jQuery Introduction | Selecting Elements | jQuery Selectors

jQuery Selectors

In jQuery, you can use not only CSS selectors but also some non-standard selectors. These non-standard selectors let you store selected elements or filter the selected result.

Storing Selected Elements in a Variable

In jQuery, selected elements can be stored in a variable and reused.

When elements exist as follows:

<ul>
    <li>Espresso</li>
    <li>Americano</li>
    <li>Caffe latte</li>
</ul>

The following example selects all <li> elements in the document, stores them in a variable, and uses that variable to get the number of elements.

var coffees = $("li");
$("#length").text("There are " + coffees.length + " kinds of coffee in total.");

Run code

Elements stored this way are only the elements that existed at the time they were stored in the variable. Therefore, elements added or removed after the elements are stored are not automatically reflected.

Filtering Selected Elements

In jQuery, you can filter selected elements to make a more detailed selection.

When elements exist as follows:

<ul>
    <li>Espresso</li>
    <li><b>Americano</b></li>
    <li>Caffe latte</li>
</ul>

The following example selects only the <li> elements in the document that contain a <b> element and adds text to them.

$("li:has(b)").append(" - Recommended menu.");

Run code

Selectors that can be used for filtering are as follows.

Selecting input Elements

In jQuery, you can easily select specific elements related to input forms.

When elements exist as follows:

<div><input type="checkbox" id="espresso"><label for="espresso">Espresso</label></div>
<div><input type="checkbox" id="americano"><label for="americano">Americano</label></div>
<div><input type="checkbox" id="caffeLatte"><label for="caffeLatte">Caffe latte</label></div>

The following example gets the number of checked input form elements among checkboxes.

var checked = $(":checked");
$("#count").text("You selected " + checked.length + " kinds of coffee.");

Run code

Selectors that can select specific <input> elements are as follows.