jQuery Selectors

In this section, you will learn about jQuery selectors and how to find DOM element(s) using selectors.

The jQuery selector enables you to find DOM elements in your web page. Most of the times you will start with selector function $() in the jQuery.

$(selector expression, context)
            
jQuery(selector expression, context)

The selector expression parameter specifies a pattern to match the elements. The jQuery uses CSS selector patterns as well as its own pattern to match the elements.

The context parameter is optional. It specifies elements in a DOM hierarchy from where jQuery starts searching for matching elements.

Let's see commonly used selectors in jQuery.

Select Elements by Name

The most common selector pattern is element name. Specifing an element name as string e.g. $('p') will return an array of all the <p> elements in a webpage.

The following figure shows which DOM elements will be returned from $('p') & $'(div').

As you can see in the above figure, $('div') will return all the <div> elements including its child elements.

$('p').append('This is paragraph.'); // appends text to all p elements 

$('div').append('This is div.); // appends text to all div elements 

<div>
    <p></p>
    <p></p>
</div>

<p></p>

<div></div>

Select Elements by Id

jQuery append() method inserts text at the end in the element.

You can get a particular element by using id selector pattern. Specify an id of an element for which you want to get the reference, starting with # symbol.

The following figure shows which DOM elements will be returned from $('#myDiv1') & $'(#prg2').

$('#impPrg').append('This element\'s id is "impPrg"');

$('#myDiv2').append('This element\'s id is "myDiv2"');

<div id="myDiv1">
    <p></p>
</div>

<p id="impPrg"></p>

<div id="myDiv2">
</div>

Select Elements by Attribute

jQuery also allows you to find an element based on attributes set on it. Specifing an attribute name in square brackets in $ function e.g. $('[class]') will return all the elements that have class attribute irrespective of value.

In the following example, jQuery returns all the elements that have class or contenteditable attribute irrespective of any value.

$('[class]').append('This element has class attribute');

<div id="myDiv1">
    <p></p>
</div>

<p id="impPrg" class="boldPrg"></p>

<div id="myDiv2" class="yellowDiv">
</div>

You can also specify a specific value of an attribute in attribute selector. For example, $('[class="myCls"]') will return all the elements which have class attribute with myCls as a value.

$('[class="yellowDiv"]').append('This element includes class="yellowDiv" attribute');
      
<div id="myDiv1">
    <p></p>
</div>

<p id="impPrg" class="boldPrg">This is paragraph.</p>

<div id="myDiv2" class="yellowDiv">
</div>

jQuery Selector Patterns

jQuery provides number of ways to select a specific DOM element(s). The following table lists the most important selector patterns.

Visit selector reference to know more selector patterns.