Monday, July 31, 2017

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 DOM tree. When an 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 function, 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 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 help to mitigate browser incompatibility. If you have just started then I also recommend you to check out Head First jQuery, one of the best book to learn jQuery in quick time.

JQuery Selectors Examples

Here are list of some popular JQuery selectors. 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">
        <ul id="web">
    <li class='functional'>Lisp</li>

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 elements and it’s the fastest selector available in jQuery tool box.

2) Class Selector - starts with 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 elements. Understanding the difference between class and id selector is also very important from interview point of view, its one of the most frequently asked jQuery interview question.

3) Element Selector or Tag 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 particular tag and then apply some class on it or perform manipulation on them.

4) Descendent Selector - this JQuery selector is more specific, it allows you to choose descendants of an 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 more selector, which is similar to descendent selector, but there is some subtle difference between them, which we will look in next section.

5) Child Selector - 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 selector : 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 exmple7) Pseudo class : 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 selector 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