What filter selectors does jQuery have?

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 , , <select> and <button> elements. </button></select>

b) ":text", select all text box elements.

c) ":password", select all password box elements.

d) ":radio", select all radio button elements.

e) ":checkbox", select all checkbox elements.

f) ":submit", select all submit button elements.

g) ":image", selects all image button elements.

h) ":reset", selects all reset button elements.

i) ":button", select all button elements.

j) ":file", selects all file upload domain elements.

k) ":hidden", select all invisible elements.

7. Form object attribute filter selector

Filter selector that selects form element attributes.

• ":enabled" selects all available elements.

• ":disabled" selects all disabled elements.

• ":checked" selects all selected elements, such as radio buttons and check boxes.

• ":selected" selects all selected elements, such as drop-down list boxes and list boxes.

For more programming-related knowledge, please visit: Programming Learning! !

The above is the detailed content of What filter selectors does jQuery have?. For more information, please follow other related articles on the PHP Chinese website!