• Jquery for Beginners – More on JQuery Selectors

    Posted on July 2, 2012 by in Jquery, Other Programming

    If you are new to JQuery , i suggest you go through Introduction to JQuery article first before reading this article. This articles explains more about different selectors available in JQuery.

    Jquery Selectors

    Accessing elements with a tag

    $(“p”) is equivalent of javascript’s document.getElementsByTagName(“p”). Listed below are few examples on the usage

           $(document).ready(function () {
                $("p").css("background-color","#ABEBCA");// changes the background color of p tags
                $("span").css("background-color","#CCFF00");// changes the background color of span elements
                $("div.row").css("background-color","#46AB52");// changes the background color of div elements with class row
            });
    

    Accessing a Child element (“parent > child”)

    You can use $(“element > children”) syntax to find the direct child(ren) of an element, $(“element children”) give elements at all levels below the element. Below listed are a few examples

           $(document).ready(function () {
                $("#frm > div.row").css("border","2px solid #FF0000"); // Finds all the div with class row that are direct children of form with id frm
                $("#frm div.row").css("border","2px solid #FF0000"); // Finds all the div with class row that are with the form with id frm
    
            });
    

    Accessing first child,last child,nth child

    We can use the :first-child, :last-child, :nth-child selector to find the element at specific position easily. Here are a few Examples

           $(document).ready(function () {
                $("#divWeekly :first-child").css({background:"yellow", border:"3px red solid"});//finds the first element
                $("#divWeekly :last-child").css({background:"yellow", border:"3px red solid"});//finds the last element
                $("#divWeekly :nth-child(3)").css({background:"yellow", border:"3px red solid"});// finds the 3rd element
                $("#divWeekly span:first-child").css({background:"yellow", border:"3px red solid"});//finds and return the first element only if it is span 
            });
    

    Please not that $(“#divWeekly span:first-child”) syntax is used , jquery does not the return the first span element, it only returns the first child if it is a span, nothing is returned it the first element is not a span.

    To see working example of the above code,click here

    Multiple Attribute Selector

    Jquery allows to filter on multiple attributes, for example if you want get all the links with a particular and with a tag name or if you to get the check box with a name and particular value , you can use code similar to one below to achieve it

    $(document).ready(function () {
       $("input[name='chkWeekDay'][value='3']").wrap('<span></span>').parent().css({background:"yellow", border:"3px red solid"});//get the elements with name 'chkWeekDay' and value = '3'
      $("a[name='somelink'][_rel='save']").css(...);//gets the elements with name 'somelink' and _rel='save'
     });
    

    Multiple Selectors

    $(document).ready(function () {
        $("p").css("background-color","#ABEBCA");
        $("span").css("background-color","#ABEBCA");
    });
    

    If you see the code above, we are changing the background color for all elements with “p” tag and “span” tag. Jquery gives us a option to combine both the statements into a single statement like below

    $(document).ready(function () {
        $("p,span").css("background-color","#ABEBCA");
    });
    

    :input and :checked selectors

    Jquery also introduces :input which selects all textboxes (input), textareas, selects, radio buttons, check boxes and buttons. :checked get all the elements that are checked/selected.

    $(document).ready(function () {
        $("#frm :input").wrap('<span></span>').parent().css({background:"#C0EAFA", border:"3px red solid"});
        $("#frm :checked").wrap('<span></span>').parent().css({background:"#C0EAFA", border:"3px red solid"});
    });
    

    Although the above code works, it is not the preferred method, use the code below for better performance

    $(document).ready(function () {
        $("#frm").filter(":input").wrap('<span></span>').parent().css({background:"#C0EAFA", border:"3px red solid"});
        $("#frm").filter(":checked").wrap('<span></span>').parent().css({background:"#C0EAFA", border:"3px red solid"});
    });
    

    To see working example of the above code,click here

    In the next article we will discuss events and event handling in JQuery.

    Be Sociable, Share!

    Written by

    Vanamali Juvvadi is a Web enthusiast and loves all things design and technology. Founded qnownow with a group of friends to share anything/everything they know/find on the internet.

    View all articles by

    Email : [email protected]

    Leave a Reply