May 07, 2021 jQuery
Use our jQuery selector detector to demonstrate the different selectors.
| Selector | Example | Choose | ||
|---|---|---|---|---|
| * | $("*") | All elements | ||
| # id | $("#lastname") | ID = "Lastname" elements | ||
| . class | $(".intro") | Class = "INTRO" all elements | ||
| . class, . class | $(".intro,.demo") | Class is "INTRO" or "DEMO" all elements | ||
| element | $("p") | 所有 <p> 元素 | ||
| el1 , el2 , el3 | $("h1,div,p") | 所有 <h1>、<div> 和 <p> 元素 | ||
| :first | $("p:first") | 第一个 <p> 元素 | ||
| :last | $("p:last") | 最后一个 <p> 元素 | ||
| :even | $("tr:even") | 所有偶数 <tr> 元素 | ||
| :odd | $("tr:odd") | 所有奇数 <tr> 元素 | ||
| :first-child | $("p:first-child") | 属于其父元素的第一个子元素的所有 <p> 元素 | ||
| :first-of-type | $("p:first-of-type") | 属于其父元素的第一个 <p> 元素的所有 <p> 元素 | ||
| :last-child | $("p:last-child") | 属于其父元素的最后一个子元素的所有 <p> 元素 | ||
| :last-of-type | $("p:last-of-type") | 属于其父元素的最后一个 <p> 元素的所有 <p> 元素 | ||
| :nth-child( n ) | $("p:nth-child(2)") | 属于其父元素的第二个子元素的所有 <p> 元素 | ||
| :nth-last-child( n ) | $("p:nth-last-child(2)") | 属于其父元素的第二个子元素的所有 <p> 元素，从最后一个子元素开始计数 | ||
| :nth-of-type( n ) | $("p:nth-of-type(2)") | 属于其父元素的第二个 <p> 元素的所有 <p> 元素 | ||
| :nth-last-of-type( n ) | $("p:nth-last-of-type(2)") | 属于其父元素的第二个 <p> 元素的所有 <p> 元素，从最后一个子元素开始计数 | ||
| :only-child | $("p:only-child") | 属于其父元素的唯一子元素的所有 <p> 元素 | ||
| :only-of-type | $("p:only-of-type") | 属于其父元素的特定类型的唯一子元素的所有 <p> 元素 | ||
| parent > child | $("div > p") | <div> 元素的直接子元素的所有 <p> 元素 | ||
| parent descendant | $("div p") | <div> 元素的后代的所有 <p> 元素 | ||
| element + next | $("div + p") | 每个 <div> 元素相邻的下一个 <p> 元素 | ||
| element ~ siblings | $("div ~ p") | <div> 元素同级的所有 <p> 元素 | ||
| :eq( index ) | $("ul li:eq(3)") | The fourth element in the list (INDEX value starts from 0) | ||
| :gt( no ) | $("ul li:gt(3)") | Enumeral INDEX greater than 3 elements | ||
| :lt( no ) | $("ul li:lt(3)") | Enumeral INDEX less than 3 elements | ||
| :not( selector ) | $("input:not(:empty)") | All input elements that are not empty | ||
| :header | $(":header") | 所有标题元素 <h1>, <h2> ... | ||
| :animated | $(":animated") | All animated elements | ||
| :focus | $(":focus") | Current element with focus | ||
| :contains( text ) | $(":contains('Hello')") | All elements that contain text "hello" | ||
| :has( selector ) | $("div:has(p)") | 所有包含有 <p> 元素在其内的 <div> 元素 | ||
| :empty | $(":empty") | All-air element | ||
| :parent | $(":parent") |
Select all parent elements containing child or text.
|
||
| :hidden | $("p:hidden") | 所有隐藏的 <p> 元素 | ||
| :visible | $("table:visible") | All visible forms | ||
| :root | $(":root") | Document root element | ||
| :lang( language ) | $("p:lang(de)") | 所有带有以 "de" 开头的 lang 属性值的 <p> 元素 | ||
| [ attribute ] | $("[href]") | All elements with HREF attributes | ||
| [ attribute = value ] | $("[href='default.htm']") | All elements with HREF attributes and values equal to "default.htm" | ||
| [ attribute != value ] | $("[href!='default.htm']") | All elements with HREF attributes and values are not equal to "default.htm" | ||
| [ attribute $= value ] | $("[href$='.jpg']") | All elements with HREF attributes and values with ".jpg" | ||
| [ attribute |= value ] | $("[title|='Tomorrow']") | All strings with Title attributes and values equal to 'tomorrow' or after 'Tomorrow' followed by connectors as the beginning. | ||
| [ attribute ^= value ] | $("[title^='Tom']") | All elements with Title attributes and values with "Tom" | ||
| [ attribute ~= value ] | $("[title~='hello']") | All elements with Title properties and values contain words "Hello" | ||
| [ attribute* = value ] | $("[title*='hello']") | All elements with Title attributes and values contain strings "Hello" | ||
| :input | $(":input") | All INPUT elements | ||
| :text | $(":text") | All INPUT elements with type = "text" | ||
| :password | $(":password") | All INPUT elements with type = "password" | ||
| :checkbox | $(":checkbox") | All INPUT elements with type = "checkbox" | ||
| :submit | $(":submit") | All INPUT elements with type = "submit" | ||
| :reset | $(":reset") | All INPUT elements with type = "reset" | ||
| :button | $(":button") | All INPUT elements with type = "button" | ||
| :image | $(":image") | All INPUT elements with type = "image" | ||
| :file | $(":file") | All INPUT elements with type = "file" | ||
| :enabled | $(":enabled") | All enabled INPUT elements | ||
| :disabled | $(":disabled") | All disabled INPUT elements | ||
| :selected | $(":selected") | All selected INPUT elements | ||
| :checked | $(":checked") | All selected INPUT elements |
jQuery uses the selector to get HTML elements
jQuery selects an HTML element through the selector and then changes the element.
Use the jQuery selector to manipulate the same element
jQuery adds classes to the same element through the selector.
jQuery uses the selector to manipulate even index elements
jQuery also gets all the even elements through the selector.