7 jQuery Selectors Examples for Beginners - Tutorial

jQuery selectors are like CSS Selectors, which allow 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 functions, 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 like the 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 examples 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.

If you have just started then I also recommend you to check out these best online jQuery Beginner courses, one of the best resources to learn jQuery in a quick time.

jQuery Selectors Examples

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

HTML Document :

Here is our HTML page, which we will use in this example. It contains a couple of common tags e.g. list items, h1, h2, and p, by using a jQuery selector, we can get any of these elements 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 the 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, it's 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 the 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 selectors, you actually combine two selections 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 a comma between two arguments.

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 the first item, and :last to select last list item. 

This gives you immense power to select a 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 by 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.

Recommended jQuery books for further reading

If you are interested in learning JQuery and knowing more about the power of this amazing JavaScript library, you can check out the following jQuery books and jQuery Courses. Head First jQuery is my favorite but the other two are also good companion books.

Head First jQuery By Ryan Benedetti and Ronan Cranley 

jQuery in Action, Second Edition

jQuery Cookbook: Solutions & Examples for jQuery Developers