jQuery - Selectors

In this tutorial we will learn to select elements using selectors in jQuery.

jQuery uses selectors like CSS to select element.

Selecting by Id and Class

If you are familiar with CSS syntax then you know that to select HTML element by Id we use the # hash symbol followed by the id value. And to select HTML element by class we use the . dot symbol followed by the class value.

Click here to check out CSS tutorial.

In the following example we have two HTML elements having Id and Class attribute.

<p id="username">Yusuf Shakeel</p>
<p class="description">This is a sample description.</p>

So, in CSS to target the paragraph having id="username" we will write the following.

#username {
	/* some css style rule */
}

And to target the paragraph in CSS having class="description" we will write the following.

.description {
	/* some css style rule */
}

Selecting by Id and Class in jQuery

To select HTML element by Id we write the following.

$("#username");

And if we console.log( $("#username") ); then we will get the following array like structure.

[p#username, context: document, selector: "#username"]

And to select HTML element by class we write the following.

$(".description");

And if we output by using console.log( $(".description") ); we will get the following.

[p.description, prevObject: n.fn.init(1), context: document, selector: ".description"]

Both the selectors will return an array like structure having elements like the selectors, length etc.

Selecting element by tag

To select an HTML element by tag name we use the tag. For example if we have a paragraph in our HTML and we want to target it then in CSS we use the following.

HTML

<p>Hello World</p>

CSS

p {
	/* some style rule goes here */
}

Similarly, if we want to select the body then we will use the body tag.

CSS

body {
	/* some style rule goes here */
}

Selecting element by tag in jQuery

To select the paragraph we will write the following.

$("p");

This will also return an array like structure which contains the selector, length, some methods etc.

And if we console.log( $("p") ); we will get the following output.

[p#username, p.description, prevObject: n.fn.init(1), context: document, selector: "p"]

And to select the body we will write the following.

$("body");

And console.log( $("body") ); will produce the following output.

[body, prevObject: n.fn.init(1), context: document, selector: "body"]

Total number of elements selected

To know the total number of elements selected we can use length.

Lets say, we want to know the total number of paragraphs p got selected by the $("p"). So, we will write the following code.

$("p").length;

And lets say, there are three paragraph in the page then, if we console.log( $("p") ); we will get 3 as output.

Selecting element by tag and Id

We combine the tag and Id value together if we want to select an element by both tag and Id.

Lets say, we want to select a paragraph having id "happy" then to select this in CSS we will write the following.

p#happy {
	/* some style rule here... */
}

To select the same element using jQuery we will write the following code.

$("p#happy");

Selecting element by tag and Class

Similarly, we combine both tag and Class value together to select an element by tag and Class.

Lets say, we want to select a paragraph having class "awesome" then to select this in CSS we will write the following.

p.awesome {
	/* some style rule here... */
}

And to select the same element using jQuery we will write the following code.

$("p.awesome");

Selecting by Id is faster than Class

Selecting element by Id is faster compared to selecting elements by class. This is because when we are selecting element by Id value then jQuery knows that there will be only one element in the page that will have the given id value.

It is assumed that an id value will be used only once in any given page. Though a page can use the same id value more than once. But it is a bad practice.

Whereas, when selecting by class value the jQuery has to scan the whole page (i.e. DOM) and look for elements having the given class value.

Selecting direct descendent (children)

Lets say, we have an unordered list.

<ul class="fruits-1">
<li>Apple</li>
<li>Mango</li>
<li>Orange</li>
<li>Fruits-2 list:
  <ul class="fruits-2">
    <li>Banana</li>
    <li> Pomegranate</li>
  </ul>
</li>
</ul>

So, ul element having class "fruits-1" is the parent element and 4 li elements are its direct descendent (children).

Note the 4th li element has a ul element having class "fruits-2" and it has 2 li elements (Banana and Pomegranate). So, these two li elements are not the direct descendents of the ul element having class "fruits-1". But they are descendents (grandchildren)

So, to select the direct descendent of the ul element having class "fruits-1" we write the following in CSS.

ul.fruits-1 > li {
	/* some style rule... */
}

And, to select the direct descendent using jQuery we will write the following.

$("ul.fruits-1 > li");

And, if we console.log the length we will get 4 as there are only 4 direct descendents of the ul element having class "fruits-1".

console.log( $("ul.fruits-1 > li").length );	//this will print 4

To target direct descendents we use > symbol.

Selecting descendents (children and grandchildren)

If we consider the following unordered list.

<ul class="fruits-1">
<li>Apple</li>
<li>Mango</li>
<li>Orange</li>
<li>Fruits-2 list:
  <ul class="fruits-2">
    <li>Banana</li>
    <li> Pomegranate</li>
  </ul>
</li>
</ul>

Then li elements (Banana, Pomegranate) are direct descendents (children) of the ul element having class "fruits-2". And these two li elements are also descendets (grandchildren) of the ul element having class "fruits-1".

So, to target all the descendents (children and grandchildren) of ul element having class "fruits-1" we will write the following in CSS.

ul.fruits-1 li {
	/* some style rule... */
}

And to target the descendents in jQuery we will write the following.

$("ul.first-1 li");

And if we console.log the length we will get 6 as there are 6 li elements as descendents of the ul element having class "fruits-1".

console.log( $("ul.first-1 li").length );	//this will print 6