jQuery filter selectors include: ":first", ":last", ":not()", ":even", ":odd", ":eq()", ":gt( )", ":lt()", ":header", ":empty", ":has()", ":hidden", etc.
[Related recommendations: jQuery video tutorial]
jQuery filter selector
filter? Definitely need to add filter conditions. Add filter conditions through ":", such as "$("div:first")" to return the first div element in the div element collection, and first is the filter condition.
According to different filtering rules, filtering selectors can be divided into basic filtering, content filtering, visibility filtering, attribute filtering, sub-element filtering and form object attribute filtering selectors.
1. Basic filter selector
a) ":first", select the first element, don't forget that it is also placed in a collection! Because JQuery is a collection of DOM objects. For example, "$("tr:first")" returns the first tr element of all tr elements, which is still saved in the collection.
b) ":last", select the last element. For example, "$("tr:last")" returns the last tr element of all tr elements, which is still saved in the collection.
c) ":not(selector)", removes all elements matching the given selector. For example, "$("input:not(:checked)")" returns all input elements, but removes the selected elements (radio button, multi-select box).
d) ":even", selects even-numbered elements among all elements. Because the JQuery object is a collection, the even number here refers to the index of the collection, and the index starts from 0.
e) ":odd", selects odd-numbered elements among all elements, and the index starts from 0.
f) ":eq(index)", selects the element at the specified index, and the index starts from 0.
g) ":gt(index)", selects elements whose index is greater than the specified index, and the index starts from 0.
h) ":lt(index)", selects elements whose index is less than the specified index, and the index starts from 0.
i) ":header", select all title elements, such as hq, h2, etc.
j) ":animated", selects all animated elements currently being executed.
2. Content filtering selector
It operates on elements and text content.
a) ":contains(text)", select the element containing text text content.
b) ":empty", selects empty elements that do not contain child elements or text nodes.
c) ":has(selector)", selects the element containing the element matched by the selector.
d) ":parent", select elements containing child elements or text nodes. (It is a parent node)
3. Visibility filter selector
Selects elements based on their visible or invisible status.
":hidden", select all invisible elements.
":visible" selects all visible elements.
Visible selector: hidden not only includes elements whose style attribute display is none, but also includes text hidden fields () and visible:hidden. Elements.
4. Attribute filter selector
Select the corresponding element through the attribute of the element.
a) "[attribute]", select elements with this attribute.
b) "[attribute=value]", select all elements whose specified attribute value is value.
c) "[attribute !=value]", select all elements whose attribute value is not value.
d) "[attribute ^= value]", select all elements whose attribute value starts with value.
e) "[attribute $= value]", select all elements whose attribute value ends with value.
f) "[attribute *= value]", select all elements whose attribute value contains value.
g) "[selector1] [selector2]...[selectorN]", a composite selector, first selects [selector1] and returns set A, set A then selects [selector2] and returns set B, set B Then select and return the result set through [selectorN].
5. Child element filter selector
As you can see from the name, it selects the child elements of a certain element.
a) ":nth-child(index/even/odd)", selects the element with index, the element with even index, and the element with odd index.
nth-child(even/odd): Can select elements whose index value under each parent element is an even (odd) number.
nth-child(2): Can select the element with index value 2 under each parent element.
nth-child(3n): Can select elements whose index value under each parent element is a multiple of 3.
nth-child(3n 1): Can select the element whose index value is 3n 1 under each parent element.
b) ":first-child", select the first child element.
c) ":last-child", select the last child element.
d) ":only-child", selects the only child element whose parent element has only this child element.
6. Form filter selector
The filter selector that selects form elements.
a) ":input", selects all ,
