jQuery - Selectors

How to use selectors?

Selectors are very useful and will be needed at every step when using jQuery. They get exactly the element you want from your HTML document.

The following table lists a few basic selectors and explains them with examples.

Selects all elements that match the given Name element .

Selects one element that matches the given id .

Selects all elements that match the given .

Selects all elements available in the DOM.

Selects the combined results of all the specified selectors E, F, or G.

Selector examples

Similar to the above syntax and examples, the following examples will help you understand how to use other types of other useful selectors −

$('*')

This selector selects all elements in the document.

$("p>*")

This selector selects all elements that are children of the paragraph element.

$("#Special Identity")

This selector function gets the element with id = "specialID".

$("specialClass")

This selector gets all elements that have the class specialClass .

$("whether: no(.MyClass)")

Selects all elements matched by <li> that do not have class="myclass".

$("#specialID.specialClass")

This selector matches references with specialID and class specialClass .

$("pa.specialClass")

This selector matches links against the specialClass declared on <p> elements.

$("ul li: first")

This selector only gets the first <li> element of the <ul>.

$("# container p")

Selects all elements matched by <p> that are children of the element with container id .

$("li > ul")

Selects all elements matched by <ul> that are children of the element matched by <li>

$("strong + them")

Selects all elements matching <em> that immediately follow the parent element matching <strong>.

$("p~ul")

Selects all elements that match a <ul> that follow a sibling element that matches a <p>.

$("code, them, strong")

Selects all elements matching <code> or <em> or <strong>.

$("strong, .myclass")

Selects all elements matched by <strong> that are children of the element matched by <p> , as well as all elements that have the class myclass .

$(":blank")

Selects all elements that do not have child elements.

$("r: empty")

Selects all elements matched by <p> that have no child elements.

$("div[r]")

Selects all elements that match the <div> element that contain the element that matches the <p> element.

$("p[.MyClass]")

Selects all elements matched by <p> that contain an element with class myclass .

$("a[@rel]")

Selects all elements matched by <a> that have the rel attribute.

$("input[@name=myname]")

Selects all elements matching <input> that have a name value exactly equal to myname.

$("input[@name=MyName]")

Selects all elements matched by <input> that have a name value that starts with myname .

$("a[@$rel=self]")

Selects all elements matched by <a> that have a rel attribute value ending in self .

$("a[@HREF=domain.com]")

Selects all elements matched by <a> that have an href value containing domain.com.

$("whether: even")

Selects all elements matched by <li> that have an even index value.

$("tr:odd")

Selects all elements matched by <tr> that have an odd index value.

$("li: first")

Selects the first <li> element.

$("li: last")

Selects the last <li> element.

$("li: visible")

Selects all elements matched by <li> that are visible.

$("li: hidden")

Selects all elements matching <li> that are hidden.

$(":radio")

Selects all radio buttons in the form.

$(":checked")

Selects all checkboxes in the form.

$(":input")

Selects only form elements (input, select, text field, button).

$(":text")

Selects only text elements (input [type = text]).

$("li:eq(2)")

Selects the third <li> element.

$("li:eq(4)")

Selects the fifth <li> element.

$("li:l(2)")

Selects all elements that match the <li> element before the third; in other words, the first two <li> elements.

$("p:l(3)")

selects all elements matching <p> elements before the fourth one; in other words, the first three <p> elements.

$("Li:GT(1)")

Selects all elements matching <li> after the second one.

$("p:gt(2)")

Selects all elements matching <p> after the third.

$("div/r")

Selects all elements that match the <p> element that are children of the element that matches the <div> element.

$("div //code")

Selects all elements matched by <code> that are children of the element matched by <div>.

$("//p//a")

Selects all elements matched by <a> that are children of the element matched by <p>

$("li: first-child")

Selects all elements matched by <li> that are the first children of their parent.

$("li: last child")

Selects all elements matched by <li> that are the last children of their parent.

$(":parent")

Selects all elements that are the parent of another element, including text.

$("li: contains (second)")

Selects all elements matched by <li> that contain the second text.

You can use all of the above selectors with any HTML/XML element in general. For example, if the $("li: first") selector works on the <li> element, then $("p: first") will also work on the <p> element.