English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
jQuery selectors allow you to select and manipulate HTML elements.
This section includes a complete list of selectors belonging to the latest jQuery JavaScript library.
All selectors are divided into several categories.
| Selector | Example | Description |
|---|---|---|
| * | $("*") | Select all elements (universal selector) |
| #id | $("#demo") | Select an element with id="demo" |
| .class | $(".demo") | Select all elements with class="demo" |
| element | $("p") | Select all <p> elements |
| selector1, selector2 | $("p, div") | Select all <p> elements and all <div> elements |
| Selector | Example | Description |
|---|---|---|
| ancestor descendant | $("div p") | Select all <p> elements within a <div> element |
| parent > child | $("div > p") | Select all <p> elements whose parent element is a <div> element |
| prev + next | $("div" + p") | Select all <p> elements that immediately follow a <div> element |
| prev ~ siblings | $("div ~ p") | Select all <p> elements that are siblings of <div> elements |
| Selector | Example | Description |
|---|---|---|
| [attribute] | $("[target]") | Select all elements with target attribute |
| [attribute=value] | $("a[href=&#"39;CSS3']") | Select all elements with href attribute equal to "CSS"3"s<a> element |
| [attribute!=value] | $("a[href!=&#"39;CSS3']") | Select all elements whose href attribute value is not equal to " CSS"3"s<a> element |
| [attribute~=value] | $('[alt~=Parrot]') | Select all elements with alt attribute and containing the word "Parrot" |
| [attribute|=value] | $('[lang|=en]') | Select all elements with lang attribute values starting with " en" |
| [attribute^=value] | $('a[href^=https]') | Select each <a> element whose href attribute value starts with " https" |
| [attribute$=value] | $('a[href$='.org']") | Select each <a> element whose href attribute value ends with " .org" |
| [attribute*=value] | $('a[href*=example]) | Select each <a> element whose href attribute value contains the substring "example" |
| Selector | Example | Description |
|---|---|---|
| :first | $('p:first') | Select the first <p> element |
| :last | $('p:last') | Select the last <p> element |
| :even | $('tr:even') | Select all even <tr> elements, zero index |
| :odd | $('tr:odd') | Select all odd <tr> elements with zero index |
| :not() | $('p:not(.demo)') | Select all <p> elements except those with class="demo" |
| :eq() | $('tr:eq('2)") | Select the third <tr> element starting from zero in the matched set |
| :lt() | $('tr:lt('5)") | Select all index numbers less than5of the <tr> elements, from the index starting at zero |
| :gt() | $('tr:gt('5)") | Select all index numbers greater than5of the <tr> elements, from the index starting at zero |
| :header | $(':header') | Select all header elements, such as <h1>，《h2>，《h3> etc. |
| :lang() | $('div:lang(en)') | Select all <div> elements with the language value 'en', i.e., lang="en", lang="en-us" etc. |
| :root | $(':root') | Select the root element of the document, which is always the <html> element in the HTML document |
| :animated | $(':animated') | The selector selects all animated elements when running the selector |
| Selector | Example | Description |
|---|---|---|
| :first-child | $("p:first-child) | Select all <p> elements that are the first child of their parent |
| :last-child | $("p:last-child) | Select all <p> elements that are the last child of their parent |
| :only-child | $("p:only-child) | Select all <p> elements that belong to the only child level of its parent |
| :first-of-type | $("p:first-of-type) | Select all <p> elements that belong to the first <p> element of its parent |
| :last-of-type | $("p:last-of-type) | Select all <p> elements that belong to the last <p> element of its parent |
| :only-of-type | $("p:only-of-type) | Select all <p> elements that do not have siblings and have the same element name |
| :nth-child(n) | $("p:nth-child(3)") | Select all <p> elements that belong to the third child level of its parent |
| :nth-last-child(n) | $("p:nth-last-child(4)") | Select all <p> elements from the previous element to the first element, which are the fourth child elements of their parent |
| :nth-of-type(n) | $("span:nth-of-type(3)") | Select all <span> elements that belong to the third <span> element of its parent |
| :nth-last-of-type(n) | $("span:nth-last-of-type(4)") | Select the nth element that belongs to its parent element4All <span> elements from the last to the first counting the <span> elements |
| Selector | Example | Description |
|---|---|---|
| :contains() | $("p:contains('is')") | Select all <p> elements that contain the text "is" |
| :empty | $(":empty") | Select all empty elements, i.e., elements that have no child elements (including text) |
| :has() | $("p:has(span)") | Select all <p> elements that contain at least one <span> element |
| :parent | $(":parent") | Select all elements that have at least one child node (element or text) |
| Selector | Example | Description |
|---|---|---|
| :input | $(":input") | Select all input, textarea, select, and button elements |
| :text | $(":text") | Select all input elements of type "text" |
| :password | $(":password") | Select all input elements of type "password" |
| :radio | $(":radio") | Select all input elements of type "radio" |
| :checkbox | $(":checkbox") | Select all input elements of type "checkbox" |
| :button | $(":button") | Select all input and button elements of type "button" |
| :submit | $(":submit") | Select all input and button elements of type "submit" |
| :reset | $(":reset") | Select all input and button elements of type "reset" |
| :image | $(":image") | Select all input elements of type "image" |
| :file | $(":file") | Select all input elements of type "file" |
| :enabled | $(":enabled") | Select all enabled elements |
| :disabled | $(":disabled") | Select all disabled elements |
| :selected | $(":selected") | Select all selected elements, applicable only to <option> elements |
| :checked | $(":checked") | Select all selected or checked elements, applicable to checkboxes, radio buttons, and select elements |
| :focus | $(":focus") | Select the element currently in focus |
| Selector | Example | Description |
|---|---|---|
| :hidden | $("p:hidden") | Select all hidden <p> elements |
| :visible | $("p:visible") | Select all visible <p> elements |