Intro to Jquery

Jquery is essentially a javascript library simpler than javascript. It too is used for client side scripting. The selector used in this language is the ‘$’ symbol. It is used to select tags, ids, class or the whole document.
Its syntax for different cases is –

  • Tag – $("h1") if we are using h1 tag
  • Class – $(".class") or $("h1.class") if we want to specify the tag along with the class
  • Id – $("#id")
  • Document – $("document") This is generally used to run script when the whole document has been loaded.

Jquery is also written inside the <script></script> tags. However, we also need to include the jquery library file in the document where we are using jquery. The latest jquery library can be found at this link. This file can be included by using the snippet

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

Different Jquery Functions

.hide() and .show()

$("h1").hide() hides all the h1 elements. $("h1").show() Shows all the h1 elements if any hidden.

.val()

$("#myid").val() gets the value of the element with id myid. This is generally used to get value of input tags.

.html()

$("myid").html() gets the html content of an element.

.fadeIn()

$(".myclass").fadeIn() shows the elements with class as myclass with a fading effect.

.ready()

$("document").ready() includes the code which is executed after the document has been loaded. This generally includes some code within it which is supposed to run after the document is ready. For instance, to hide a particular element, say h1, after the document has been loaded, we will write a function inside the ready function which will have the code to hide h1 elements.

$("document").ready(function(){
    $("h1").hide();
});

.click()

$("button").click() – This is also used to run some code which the user wants to execute when a button is clicked. For instance to hide a div when a button has been clicked, we will write the following code

$("button").click(function(){
    $("div").hide();
});

All these functionalities are explained in the code below.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });
    $("#html").click(function(){
        var html = $("p").html();
        alert(html);
    });
    $("#value").click(function(){
        var value = $("#name").val();
        alert(value);
    });
});
</script>
</head>
<body>

<p>Click on "Hide" button to make me disappear.</p>

<button id="hide">Hide</button>
<button id="show">Show</button>
<button id="html">Show HTML</button>
<br><br>
<input type="text" id="name" name="name" /><br><br>
<button id="value">Show value of input element</button>


</body>
</html>

This script hides the paragraph on clicking the hide button, shows it on clicking the show button, shows the HTML content on clicking the Show HTML button and shows value of the input element on clicking the last button.

Original document

Show

After clicking Hide button

Hide

On clicking the Show HTML button

Show HTML

Entering some value in input field and clicking on the button Show value of input element

Show value

Please feel free to download the source code for reference.

View Demo Download source

This content has been helpful to you?

Thanks for contributing!

Yes No