Home > Article > Web Front-end > JQuery selector basic tutorial: Basic selector, hierarchical selector, filter selector
JQuery selector basic tutorial: Basic selector, hierarchical selector, filter selector
- 伊谢尔伦Original
- 2017-06-17 15:45:091587browse
The basic selector is the most commonly used selector in JQuery and the simplest selector. It searches by element id, class and tag name. DOM element. This is very important, and the following content is based on this and improved step by step.
1). "$("#id")", get the element specified by id. The id is globally unique, so it has only one member.
2). "$(".class")", get the element specified by class. Different elements can have the same class attribute, so it may have multiple members.
3). "$("element")", get the element specified by element (element name, such as div, table, etc.), which may have multiple members.
4). "$("*")", get all elements, equivalent to document.
5). "$("selector1,selector2,...,selectorN")", merge the elements matched by each selector and return them together. Returns the set matched by selector1 + the set matched by selector2 +... + the set matched by selectorN.
2. Level selector
What is level? Level is the node of father-son relationship and brother relationship. Therefore, the hierarchical selector is used to obtain the parent, child, and sibling nodes of a specified element.
1). "$("ancestor descendant")", get all the elements below the ancestor element.
2). "$("parent > child")", get all the child elements under the parent element (only the first-level child elements are included).
3). "$("pre + next")", get the next sibling element immediately following the pre element.
4). "$("pre ~ siblings")", get all sibling elements after the pre element.
3. 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, filter 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 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 is an operation on elements and text content.
a) “:contains(text)”, selects elements 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 elements such as text hidden fields () and visible:hidden.
4). Attribute filter selector
Selects the corresponding element through the attribute of the element.
a) “[attribute]”, select elements with this attribute.
b) "[attribute=value]", selects all elements with the specified attribute value as value.
c) "[attribute !=value]", selects 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 number, and the element with odd number.
l nth-child(even/odd): Can select elements whose index value under each parent element is an even (odd) number.
l nth-child(2): Can select the element with an index value of 2 under each parent element.
l nth-child(3n): Can select elements whose index value under each parent element is a multiple of 3.
l 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”, selects 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 ,