JQuery selector (3) filtering Selector

JQuery's filter selector mainly uses specific filter rules to filter out the required DOM elements. The filter rules have the same syntax as the pseudo-class selector in CSS, that is, the selector starts with a colon. Based on different filtering rules, the filter selector can be divided into basic filtering, content filtering, visibility filtering, attribute filtering, subelement filtering, and form object attribute filtering.

1.Basic filter Selector

Selector	Description	Return
: First	Select 1st Elements	Single element
: Last	Select the last element	Single element
: Not (selector)	Removes all elements that match the given selector.	Set Element
: Even	Select all the elements with an even index. The index starts from 0.	Set Element
Dd	Select all the elements with an odd number of indexes. The index starts from 0.	Set Element
: Eq (index)	Select the element whose index is equal to index (index starts from 0)	Single element
: Gt (index)	Select the element whose index is greater than index (index starts from 0)	Set Element
: Lt (index)	Select the element whose index is smaller than the index (index starts from 1)	Set Element
: Header	Select All title elements, such as h1, h2, h3, etc.	Set Element
: Animated	Select all elements of the animation being executed	Set Element

 

2.Content Filter Selector
The filtering rules of the content filtering selector are mainly reflected in the replacement of many resources or text content.

Selector	Description	Return
: Contains (text)	Select an element with the text content as "text"	Set Element
: Empty	Select an empty element that does not contain child elements or text	Set Element
: Has (selector)	Select the element containing the element matched by the selector	Set Element
: Parent	Select an element that contains child elements or text	Set Element

3.Visibility filter Selector
The visibility filter selector is a more visible and invisible element to select the corresponding element.

Selector	Description	Return
: Hidden	Select all invisible elements	Set Element
: Visible	Select all visible elements	Set Element

4.Attribute filter Selector
The filter rule of the attribute filter selector is to obtain the corresponding element through the attribute of the element.

Selector	Description	Return
[Attribute]	Select the element with this attribute	Set Element
[Attribute = value]	Select an element whose attribute value is value	Set Element
[Attribute! = Value]	Select an element whose attribute value is not equal to value	Set Element
[Attribute ^ = value]	Select an element whose attribute value starts with value.	Set Element
[Attribute $ = value]	Select the element whose attribute value ends with value.	Set Element
[Attribute * = value]	Select the element whose attribute value contains value.	Set Element
[Selector1] [selector2] [selectorN]	Combine the attribute selector into a composite attribute selector to meet multiple conditions. Scale down every time you select	Set Element

5.Child element filter Selector
The filtering rules of the child element filter selector are slightly more complex than those of other selectors, but it does not matter. As long as the parent element and the child element of the element are clearly distinguished, it is very easy to use.

Selector	Description	Return
: Nth-child (index/even/odd/equation)	Select the index sub-element or parity element under each parent element. (Index starts from 1)	Set Element
: First-child	Select the 1st child elements of each parent Element	Set Element
: Last-child	Select the last child element of each parent element.	Set Element
Nly-child	If an element is the only child element in its parent element, it will be matched. If the parent element contains other elements, it will not be matched.	Set Element

6.Form object attribute filter Selector
The form object attribute filter selector mainly filters selected form objects.

Selector	Description	Return
: Enabled	Select all available elements	Set Element
: Disabled	Select all unavailable Elements	Set Element
: Checked	Select All selected elements (single choice, check box)	Set Element
: Selected	Select All selected option elements (drop-down list)	Set Element

There are many types of filter selectors, and there are also some differences in the rules used, you can try to remember their features.