Hello All, We are going to start new batch from next week. message/call or mail us for more details.

4 September 2013

Basic Selectors in jQuery

1. By Tag

A tag name available in the DOM. For example $('a') selects anchor tags in the document.

$("a") // <a href='#'>Hello jQuery Scripts</a>

2. By ID

A tag available with the respective ID in the DOM. For example $('#sample-id') selects the single element in the document that has an ID of "sample-id".

$("#userid") // <span id="userid"></span>

3. By Class Name

A tag available with the respective class in the DOM. For example $('.sample-class') selects all elements in the document that have a class of "sample-class".

$(".displayMenu") // <ul class="displayMenu">AboutUs</ul>

Now Let us quickly practice using some sample code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script type="text/javascript">

        $(document).ready(function () {


            $('#btn1').click(function () {
                $('#output').html('');
                // This will iterate through the DOM and will find all the DIV tags
                $("div").each(function () {
                    $(this).css('background-color', 'red');
                    $("#message").html('Demo: <br> Both DIV are selected using   
                     the using div tag');
                    $("#output").html('$("div").each(function () {             
                     $(this).css("background-color", "red"); });');
                });

            });

            $('#btn2').click(function () {

                $('#output').html('');
                // This will iterate through the DOM and will find tags with the  
                    provided id.
                $("#div1").css('background-color', 'yellow');
                $("#message").html('Demo: <br>  First DIV is selected using the 
                    using ID i.e."div1"');
                $(".div2").css('background-color', '')

                $("#output").html('$("#div1").css("background-color", "yellow");');

            });

            $('#btn3').click(function () {

                $('#output').html('');
             // This will iterate through the DOM and will find tags with the   
                 provided  class.
               
                $(".div2").css('background-color', 'green');
                $("#message").html('Demo: <br> Second DIV is selected using the 
                   using Class i.e."div2"');
                $("#div1").css('background-color', '');
                $("#output").html('$(".div2").css("background-color", "green");');

            });

            $('#btn4').click(function () {

                // This will iterate through the DOM and will find all the DIV tags.
                $("div").each(function () {
                    $(this).css('background-color', '');
                })

                $("#message").html('');
                $('#output').html('');

            });

        });
    </script>

</head>
<body>
    <button id="btn1">Select All Divs    </button>
    <button id="btn2">Select Div using ID    </button>
    <button id="btn3">Select Div using Class    </button>
    <button id="btn4">Reset    </button>
    <br />
    <br />
    <div id="div1">
        This is first Div of the Body.
    </div>
    <br />
    <div class="div2">
        This is Second Div of the Body.
    </div>
    <br />
    <br />
    <br />
    <b id='message'></b>

    <br />
    <code style='color: green' id='output'></code>
</body>
</html>
The output of the code above is:

JQuery1.jpg
In the code above I have created two Div tags, one with id "div1" and another with class "div2" that will showcase by Tag, by ID and by Class Name.

1. By Tag

After clicking the "Select All Divs" button the following code will be executed.
 
// This will iterate through the DOM and will find all the DIV tags
$("div").each(function () {
               $(this).css('background-color', 'red');
});

This will iterate through the DOM and will find all the DIV tags and apply the background color CSS to the divs.

Output

JQuery2.jpg
2. By ID

After clicking the "Select Div using ID" button the following code will be executed.
 
//This will iterate through the DOM and will find tags with the provided id.
$("#div1").css('background-color', 'yellow');

This will iterate through the DOM and will find all the DIV tags with id = "div1" and apply the background color CSS to the div.

Output

JQuery3.jpg

3. By Class Name

After clicking the "Select Div using Class" button the following code will be executed.
 
/// This will iterate through the DOM and will find tags with the provided class.
$(".div2").css('background-color', 'green');

This will iterate through the DOM and will find all the DIV tags with class = "div2" and apply the background color CSS to the divs.

Output

JQuery4.jpg

Summary

In this article, I have explained with a very basic example that shows how you can use the HTML tags, id and class name as a selector in jQuery and apply various CSS properties and other methods.

No comments:

Post a Comment