Top 50 jQuery Selectors

We all pretty much use jQuery selectors in all the code we write, it”s the most powerful way to specify what elements we want from the DOM. This list is to server as a great reference material for every jQuery developer out there. Note that they are not in any particular order.

$(“*”) – This selector selects all elements in the document.
$(“p > *”) – This selector selects all elements that are children of a paragraph element.
$(“#specialID”) – This selector function gets the element with id=”specialID”.
$(“.specialClass”) – This selector gets all the elements that have the class of specialClass.
$(“li:not(.myclass)”) – Selects all elements matched by
that do not have.
$(“a#specialID.specialClass”) – This selector matches links with an id of specialID and a class of specialClass.
$(“p a.specialClass”) – This selector matches links with a class of specialClass declared within
elements.
$(“ul li:first”) – This selector gets only the first
element of the
$(“#container p”) – Selects all elements matched by
that are descendants of an element that has an id of container.
$(“li > ul”) – Selects all elements matched by
- $(“strong + em”) – Selects all elements matched by that immediately follow a sibling element matched by .
- $(“p ~ ul”) – Selects all elements matched by
- $(“code, em, strong”) – Selects all elements matched by or or .
- $(“p strong, .myclass”) – Selects all elements matched by that are descendants of an element matched by
  as well as all elements that have a class of myclass.
- $(“:empty”) – Selects all elements that have no children.
- $(“p:empty”) – Selects all elements matched by
  that have no children.
- $(“div[p]”) – Selects all elements matched by
  that contain an element matched by
  .
- $(“p[.myclass]”) – Selects all elements matched by
  that contain an element with a class of myclass.
- $(“a[@rel]”) – Selects all elements matched by that have a rel attribute.
- $(“input[@name=myname]”) – Selects all elements matched by that have a name value exactly equal to myname.
- $(“input[@name^=myname]”) – Selects all elements matched by that have a name value beginning with myname.
- $(“a[@rel$=self]”) – Selects all elements matched by
  that have a class value ending with bar
- $(“a[@href*=domain.com]”) – Selects all elements matched by that have an href value containing domain.com.
- $(“li:even”) – Selects all elements matched by
- that have an even index value.
- $(“tr:odd”) – Selects all elements matched by that have an odd index value.
- $(“li:first”) – Selects the first
- element.
- $(“li:last”) – Selects the last
- element.
- $(“li:visible”) – Selects all elements matched by
- that are visible.
- $(“li:hidden”) – Selects all elements matched by
- that are hidden.
- $(“:radio”) – Selects all radio buttons in the form.
- $(“:checked”) – Selects all checked boxex in the form.
- $(“:input”) – Selects only form elements (input, select, textarea, button).
- $(“:text”) – Selects only text elements (input[type=text]).
- $(“li:eq(2)”) – Selects the third
- element
- $(“li:eq(4)”) – Selects the fifth
- element
- $(“li:lt(2)”) – Selects all elements matched by
- element before the third one; in other words, the first two
- elements.
- $(“p:lt(3)”) – selects all elements matched by
  elements before the fourth one; in other words the first three
  
  elements.
- $(“li:gt(1)”) – Selects all elements matched by
- after the second one.
- $(“p:gt(2)”) – Selects all elements matched by
  after the third one.
- $(“div/p”) – Selects all elements matched by
  that are children of an element matched by
  
  .
- $(“div//code”) – Selects all elements matched by that are descendants of an element matched by .
- $(“//p//a”) – Selects all elements matched by that are descendants of an element matched by
- $(“li:first-child”) – Selects all elements matched by
- that are the first child of their parent.
- $(“li:last-child”) – Selects all elements matched by
- that are the last child of their parent.
- $(“:parent”) – Selects all elements that are the parent of another element, including text.
- $(“li:contains(second)”) – Selects all elements matched by
- that contain the text second.
- $(“td:gt(4)”) – Finds TD #5 and higher
- $(“input:not(:checked)”) – Finds all inputs that are not checked
- $(“div,span,p.myClass”) – Finds the elements that match any of these three selectors.
- $(“input[id][name$=”man”]”) – Finds all inputs that have an id attribute and whose name attribute ends with man

Frequently Asked Questions (FAQs) about jQuery Selectors

What is the difference between the attribute equals selector and the attribute contains selector in jQuery?

The attribute equals selector in jQuery is used to select elements with a specific attribute value. For example, if you want to select an element with a specific ID or class, you would use the attribute equals selector. On the other hand, the attribute contains selector is used to select elements whose attribute value contains a specified substring. This means that it will select elements even if the specified value is only a part of the attribute value. This can be useful when you want to select elements based on a common pattern in their attribute values.

How can I select an element by name with jQuery?

To select an element by name in jQuery, you can use the attribute equals selector. The syntax is as follows: $(“element[name=’value’]”). For example, if you want to select an input element with the name ‘username’, you would write: $(“input[name=’username’]”). This will select the input element with the name ‘username’.

What is the attribute starts with selector in jQuery?

The attribute starts with selector in jQuery is used to select elements whose attribute value begins with a specified string. The syntax is as follows: $(“element[attribute^=’value’]”). For example, if you want to select all elements with an ID that starts with ‘my’, you would write: $(“[id^=’my’]”). This will select all elements with an ID that starts with ‘my’.

How can I select multiple elements in jQuery?

In jQuery, you can select multiple elements by separating the selectors with a comma. For example, if you want to select all div elements and all p elements, you would write: $(“div, p”). This will select all div elements and all p elements.

How can I select the first child of an element in jQuery?

To select the first child of an element in jQuery, you can use the :first-child selector. The syntax is as follows: $(“element:first-child”). For example, if you want to select the first child of a div element, you would write: $(“div:first-child”). This will select the first child of each div element.

How can I select the last child of an element in jQuery?

To select the last child of an element in jQuery, you can use the :last-child selector. The syntax is as follows: $(“element:last-child”). For example, if you want to select the last child of a div element, you would write: $(“div:last-child”). This will select the last child of each div element.

How can I select all even elements in jQuery?

In jQuery, you can select all even elements using the :even selector. The syntax is as follows: $(“element:even”). For example, if you want to select all even li elements, you would write: $(“li:even”). This will select all even li elements.

How can I select all odd elements in jQuery?

In jQuery, you can select all odd elements using the :odd selector. The syntax is as follows: $(“element:odd”). For example, if you want to select all odd li elements, you would write: $(“li:odd”). This will select all odd li elements.

How can I select an element with a specific text in jQuery?

To select an element with a specific text in jQuery, you can use the :contains() selector. The syntax is as follows: $(“element:contains(‘text’)”). For example, if you want to select all p elements that contain the text ‘Hello’, you would write: $(“p:contains(‘Hello’)”). This will select all p elements that contain the text ‘Hello’.

How can I select an element with a specific attribute in jQuery?

To select an element with a specific attribute in jQuery, you can use the attribute selector. The syntax is as follows: $(“element[attribute]”). For example, if you want to select all elements with a title attribute, you would write: $(“[title]”). This will select all elements with a title attribute.