Top 50 jQuery Selectors

jQuery selectors are powerful tools that every developer uses in daily life. They can accurately select the required elements from the DOM. This list brings together 50 commonly used jQuery selectors for reference by all jQuery developers. Note that these selectors are not arranged in a specific order.

1. $(“*”) – Select all elements in the document.
2. $(“p > *”) – Select the child elements of all paragraph elements.
3. $(“#specialID”) – Select the element with ID "specialID".
4. $(“.specialClass”) – Select all elements with class as "specialClass".
5. $(“li:not(.myclass)”) – Select all elements that match the li selector, but exclude elements whose class is "myclass".
6. $(“a#specialID.specialClass”) – Select the link element with ID "specialID" and class "specialClass".
7. $(“p a.specialClass”) – Select the link element within the paragraph element with class "specialClass".
8. $(“ul li:first”) – Select the first list item element of the unordered list.
9. $(“#container p”) – Select all descendant paragraph elements with ID "container" element.
10. $(“li > ul”) – Select the child unordered list element of all list item elements.
11. $(“strong em”) – Select the italic element that follows the bold element.
12. $(“p ~ ul”) – Select all unordered list elements that follow the paragraph element.
13. $(“code, em, strong”) – Select the code, italic, or bold element.
14. $(“p strong, .myclass”) – Select the bold elements within the paragraph element, and all elements whose class is "myclass".
15. $(“:empty”) – Select all elements without children.
16. $(“p:empty”) – Select all paragraph elements without child elements.
17. $(“div[p]”) – Select the div element that contains the paragraph elements.
18. $(“p[.myclass]”) – Select the paragraph element that contains the "myclass" element.
19. $(“a[@rel]”) – Select all link elements with rel attribute.
20. $(“input[@name=myname]”) – Select the input element whose name attribute value is exactly equal to "myname".
21. $(“input[@name^=myname]”) – Select the input element whose name attribute value begins with "myname".
22. $(“a[@rel$=self]”) – Select the link element with the value of the rel attribute ending with "self".
23. $(“a[@href*=domain.com]”) – Select the link element with the href attribute value that contains "domain.com".
24. $(“li:even”) – Select the list item element with an index value of even.
25. $(“tr:odd”) – Select the table row element with an index value of odd numbers.
26. $(“li:first”) – Select the first list item element.
27. $(“li:last”) – Select the last list item element.
28. $(“li:visible”) – Select all visible list item elements.
29. $(“li:hidden”) – Select all hidden list item elements.
30. $(“:radio”) – Select all radio buttons in the form.
31. $(“:checked”) – Select all selected check boxes in the form.
32. $(“:input”) – Select form elements (input, select, textarea, button).
33. $(“:text”) – Select the text input element (input[type=text]).
34. $(“li:eq(2)”) – Select the third list item element.
35. $(“li:eq(4)”) – Select the fifth list item element.
36. $(“li:lt(2)”) – Select the list item element (first two) before the third element.
37. $(“p:lt(3)”) – Select the paragraph element before the fourth element (first three).
38. $(“li:gt(1)”) – Select the list item element after the second element.
39. $(“p:gt(2)”) – Select the paragraph element after the third element.
40. $(“div/p”) – Select the subparagraph element of the div element.
41. $(“div//code”) – Select all descendant code elements of the div element.
42. $(“//p//a”) – Select descendant link elements for all paragraph elements.
43. $(“li:first-child”) – Select all list item elements that are the first child element of its parent element.
44. $(“li:last-child”) – Select all list item elements that are the last child element of its parent element.
45. $(“:parent”) – Select all elements that have at least one child element (including text).
46. $(“li:contains(second)”) – Select the list item element that contains the text "second".
47. $(“td:gt(4)”) – Select the fifth and later table cell element.
48. $(“input:not(:checked)”) – Select all input elements that are not selected.
49. $(“div,span,p.myClass”) – Select an element that matches any of the three selectors.
50. $(“input[id][name$=”man”]”) – Select an input element that has both the id attribute and the name attribute ends with "man".

jQuery Selector FAQs (FAQs)

What is the difference between an attribute equal to a selector and an attribute including a selector?

The

attribute equals the selector to select an element whose attribute value exactly matches a specific value, such as selecting an element with a specific ID or class. The attribute contains selector is used to select the element that contains the specified substring, even if the value is only part of the attribute value.

How to use jQuery to select elements by name?

Use attribute equals selector: $(“element[name=’value’]”). For example, select the input element named "username": $(“input[name=’username’]”).

What is the property starter selector?

Attribute Start Selector is used to select an element whose attribute value begins with a specified string: $(“element[attribute^=’value’]”). For example, select all elements whose ID starts with "my": $(“[id^=’my’]”).

How to select multiple elements in jQuery?

Separate selectors with commas: $(“div, p”) Select all div and p elements.

How to select the first child element of an element?

Use :first-childSelector: $(“element:first-child”).

How to select the last child element of an element?

Use :last-childSelector: $(“element:last-child”).

How to select all even elements?

Use :evenSelector: $(“element:even”).

How to select all odd elements?

Use :oddSelector: $(“element:odd”).

How to select elements that contain specific text?

Use :contains()Selector: $(“element:contains(‘text’)”).

How to select elements with specific attributes?

Use attribute selector: $(“element[attribute]”).

I hope this more comprehensive guide will be helpful to you!

The above is the detailed content of Top 50 jQuery Selectors. For more information, please follow other related articles on the PHP Chinese website!