注:本文内容摘录自《Learning jQuery (4th Edition)》。
The jQuery factory function $() is used to find elements on the page to work with. This function takes a string composed of CSS-like syntax, called a selector expression.
目录
Simple CSS
Selector | Matches |
---|---|
* | All elements. |
#id | The element with the given ID. |
element | All elements of the given type. |
.class | All elements with the given class. |
a, b | Elements that are matched by a or b. |
a b | Elements b that are descendants of a. |
a > b | Elements b that are children of a. |
a + b | Elements b that immediately follow a. |
a ~ b | Elements b that are siblings of a and follow a. |
Position among siblings
Selector | Matches |
---|---|
:nth-child(index) | Elements that are the index child of their parent element (1-based). |
:nth-child(even) | Elements that are an even child of their parent element (1-based). |
:nth-child(odd) | Elements which are an odd child of their parent element (1-based). |
:nth-child(formula) | Elements that are the nth child of their parent element (1-based). Formulas are of the form an+b for integers a and b. |
:nth-last-chind() | The same as :nth-child(), but counting from the las element to the first. |
:first-child | Elements that are the first child of their parent. |
:last-child | Elements that are the last child of their parent. |
:only-child | Elements that are the only child of their parent. |
:nth-of-type() | The same as :nth-child(), but only counting elements of the same element name. |
:nth-last-of-type | The same as :nth-last-child(), but only counting elements of the same element name. |
:first-of-type | Elements which are the first child of the same element name among their siblings. |
:last-of-type | Elements which are the last child of the same element name among their siblings. |
:only-of-type | Elements that are the only child of the same element name among their siblings. |
Position among matched elements
Selector | Matches |
---|---|
:first | The first element in the result set. |
:last | The last element in the result set. |
:not(a) | All elements in the result set that are not matched by a. |
:even | Even elements in the result set (0-based). |
:odd | Odd elements in the result set (0-based). |
:eq(index) | A numbered element in the result set (0-based). |
:gt(index) | All elements in the result set after (greater than) the given index (0-based). |
:lt(index) | All elements in the result set before (less than) the given index (0-based). |
Attributes
Selector | Matches |
---|---|
[attr] | Elements that have the attribute attr. |
[attr=”value”] | Elements whose attr attribute is value. |
[attr!=”value”] | Elements whose attr attribute is not value. |
[attr^=”value”] | Elements whose attr attribute begins with value. |
[attr$=”value”] | Elements whose attr attributes ends with value. |
[attr*=”value”] | Elements whose attr attribute contains the substring value. |
[attr~=”value”] | Elements whose attr attribute is a space-delimited set of strings, one of which is value. |
[attr|=”value”] | Elements whose attr attributes is either equal to value or begins with value followed by a hyphen. |
Forms
Selector | Matches |
---|---|
:input | All <input>, <select>, <textarea>, and <button> elements. |
:text | The <input> elements with type=”text”. |
:password | The <input> elements with type=”password”. |
:file | The <input> elements with type=”file”. |
:radio | The <input> elements with type=”radio”. |
:checkbox | The <input> elements with type=”checkbox”. |
:submit | The <input> elements with type=”submit”. |
:image | The <input> elements with type=”image”. |
:reset | The <input> elements with type=”reset”. |
:button | The <input> elements with type=”button” and <button> elements. |
:enabled | Enabled form elements. |
:disabled | Disabled form elements. |
:checked | Checked checkboxes and radio buttons. |
:selected | Selected <option> elements. |
Miscellaneous selectors
Selector | Matches |
---|---|
:root | The root element of the document. |
:header | Header elements (for example, <ht>, <h2>). |
:animated | Elements with an animation in progress. |
:contains(text) | Elements containing the given text. |
:empty | Elements with no child nodes. |
:has(a) | Elements containing a descendant element matching a. |
:parent | Elements that have child nodes. |
:hidden | Elements that are hidden, either through CSS or because they are . |
:visible | The inverse of :hidden. |
:focus | The elements that has the keyboard focus. |
:lang(language) | Elements with the given language code (either due to a lang attribute on the element or an ancestor, or a <meta> declaration). |
:target | Whichever element is targeted by the URI’s fragment identifier, if any. |