Monday, July 31, 2017

Top 7 JQuery Selectors Examples to find elements in DOM - ID, Class, Element, Descendent, Child, Multiple and Pseudo Selector

jQuery selectors are like CSS Selectors, which allows you to find or select an element from the DOM tree. When HTML pages loaded in a browser like Chrome, Firefox, or Internet Explorer, the browser creates a tree-like structure is known as Document Object Model or DOM. JavaScript and jQuery allow you to play with this DOM i.e. selecting elements from DOM, traversing through DOM, going from one element to another, selecting a list of elements from DOM, adding or removing elements from DOM, etc. In order to apply most of the jQuery function, available in the jQuery object, we first need to select HTML elements or tags, on which we want to apply those functions, jQuery selector allows you to choose those elements.

There are many JQuery selectors e.g. ID selector, class selector, or element selector, which provides the capability to choose only elements you need. In this JQuery tutorial, we will take a look at these jQuery selectors, and simple example to learn how to use them. 

As I have said before, jQuery is an immensely powerful and helpful library for client-side scripting, it makes using JavaScript easy with Java-like methods. jQuery not only reduces code but also helps to mitigate browser incompatibility.

And, If you want to learn Modern JavaScript or level up your skills then I suggest you join The Complete JavaScript Course: Build Real Project by Jonas Scmedtmann on Udemy. It's one of the best and hand-son course to learn ES 6 and other new Javascript features.

If you have just started then I also recommend you to check out Head First jQuery, one of the best books to learn jQuery in a quick time.




JQuery Selectors Examples

Here are a list of some popular JQuery selectors. The best way to learn JQuery selectors is to try them. We will following HTML code snippet to demonstrate How different JQuery Selector works.





HTML Document :

Here is the our HTML page, which we will use in this example. It contains couple of common tags e.g. list items, h1, h2 and p, by using jQuery selector, we can get any of this element or a list of elements.

<h1>Do you want to learn Programming?</h1>
<h2>Programming Languages</h2>
<p>choose the one, which your friends like</p>
<ul id="languages">
    <li>Java</li>
    <li>
        <ul id="web">
            <li>JavaScript</li>
        </ul>
    </li>
    <li class='functional'>Lisp</li>
</ul>



1) ID Selector 

Starts with # and select elements whose id attribute matches. For example ${"#languages"} will chose HTML tag, whose id is languages, which is unordered list (<ul id="languages">) here. This selector will return only one element and it’s the fastest selector available in jQuery toolbox.

2) Class Selector 

Starts with a dot ( . ) and select list of elements on which that class has applied. For example $(".functional") will select all HTML elements which has attribute class = "functional", which is list item <li class='functional'>Lisp</li>. 

This selector can return either only one element or more than one element, based upon how many elements have that particular class applied. This is generally used to select similar category elements i.e. more than one element. Understanding the difference between class and id selector is also very important from the interview point of view, its one of the most frequently asked jQuery interview questions.


3) Element Selector or Tag Selector 

This jQuery selector selects all specified elements from DOM e.g. ${"h2"} will select all <h2> elements. Since this JQuery selector selects named HTML tags, it is also known as tag selector. This selector is often used to grab a set of elements for a particular tag and then apply some class on it or perform manipulation on them.

4) Descendant Selector 

This JQuery selector is more specific, it allows you to choose descendants of HTML elements. For example $("#movies  li"}  will select all list items (li) which are descendent of HTML element, whose id is movies. In this example $("#languages  li"}  will select all list items from unordered list (<ul id="languages">). jQuery has one mode selector, which is similar to the descendent selector, but there is some subtle difference between them, which we will look in next section.

5) Child Selector 

The child selector is more specific than Descendent Selector. If an element has children's and grand children, then using descendent selector will select all descendents, which includes direct children and grand children. If you use JQuery child selectors, then it will only select direct children of an element. Child selector is denoted by greater than sign (>)  

For example in following HTML structure, if we need all the <li> elements which is direct child of (<ul id="languages">, then we need to use JQuery child selector. if we use descendent selector as ${"languages li"}; , it will also select inner <li> JavaScript, while if we use child selector as ${"languages > li"}, it will only select direct childs of  (<ul id="languages">, which doesn't include <li>JavaScript</li>.



6) Multiple selectors

This jQuery selector allows you to choose more than one element in one shot. By using multiple selector, you actually combine two selection in one call. For example if you want to select element with CSS class functional, as well as list item with id="web", you can use jQuery multiple selector as ${".functional,  #web"). Just remember to put comma between two arguments.


jQury Selector Example - ID,Class, Element, Descendent, Child, Muliple and Pseudo selector exmple

7) Pseudo class


This  jQuery allows you to use CSS like pseudo classes e.g. $(‘li :even’) to select even elements, $(‘li :odd’) to select odd items, :first to select first item, and :last to select last list item. 

This gives you immense power to select most specific element of your choice. Here is an example of jQuery pseudo class selector, $("#languages li:first") will return first list item from unordered list <ul>, with id languages, which is Java, <li>Java</li>.

That's all on JQuery Selectors examples, we have seen examples of major jQuery selectors including ID selector, child selector, tag selector, descendent selector, multiple selectors, and pseudo-class selector. As you can see, JQuery selectors are inspired with CSS selectors, So if you are good with CSS selectors, you will pick jQuery selectors quickly. On the other hand, if you are not so familiar with CSS selectors, then this gives you a chance to learn that as well.

Further Reading
The Complete jQuery Course: From Beginner To Advanced!
Up and Running with jQuery
jQuery Fundamentals By Dan Wahlin


Recommended jQuery books for further reading
If you are interested in learning JQuery and knowing more about power of this amazing JavaScript library, you can checkout following books. Head First jQuery is my favorite but other two are also good companion book.

1 comment :

Anonymous said...

You can also use :checked pseudo selector in jQuery to find all checked checkboxes and radio buttons. Then you can also use not() jQuery selector to invert the selection e.g. to get all check boxes which are not selected e.g.

$("input[type=checkbox]:checked") will give you all checked check boxes

$("input[type=radio]:checked") will give you all selected radio buttons

$('nput[type=checkbox]:not(:checked)' )will give you all non-checked checkboxes

Post a Comment