Home >Web Front-end >Front-end Q&A >How to implement filtering function in jquery
The filtering function is implemented in jquery through filter selectors. According to different filtering rules, filter selectors can be divided into: 1. Content filter selectors, which can obtain elements based on the text content in the element or the characteristics of the sub-elements it contains, and its text content can be absolutely fuzzy or absolutely matched for element positioning; 2. Visibility filter, which can obtain elements based on the characteristics of whether the element is visible; 3. Attribute filter, which can obtain elements based on a certain attribute of the element; 4. Form object attribute filter, which can be obtained through the attribute characteristics of an object in the form Element, such as enabled attribute.
The operating environment of this tutorial: windows7 system, jquery3.6.0 version, Dell G3 computer.
Jquery implements filtering functions through a variety of filter selectors.
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: simple filter selector, content filter selector, visibility filter selector, attribute filter selector, sub-element filter selector, form object attribute filter selector Devices etc.
1) Simple filter selector
Filter selector matches elements according to certain filtering rules. When written, it starts with a colon (:); simple filter selection Filter is the most widely used type of filter selection among filter selectors
Selector | Function Description |
---|---|
first() or :first | Get the first element |
last() or :last | Get The last element |
:not(selector) | Get all elements except the given selector |
:even | Get all elements with even index values, index numbers start from 0 |
:odd | Get all elements with odd index values, index The number starts from 0 |
:eq(index) | Get the element with the specified index value, the index number starts from 0 |
:gt(index) | Get all elements greater than the given index value, the index number starts from 0 |
:lt(index) | Get all elements less than the given index value, the index number starts from 0 |
:header | Get all header type elements, such as h1, h2... Element collection |
:animated | Get the element that is performing animation effect |
2) Content filter selector
The content filter selector obtains elements based on the text content in the element or the characteristics of the sub-elements it contains. The text content can be absolutely fuzzy or absolutely matched for element positioning
Selector | Function Description |
---|---|
:contains(text) | Get the text that contains the given text Elements |
:empty | Get all empty elements that do not contain child elements or text |
:has(selector) | Get the element containing the matched selector |
:parent | Get the element containing child elements or text |
3) Visibility filter
The visibility filter selector obtains elements based on the characteristics of whether the element is visible
Selector | Function description |
---|---|
:hidden | Get all invisible elements, or those of type hidden Element |
:visble | Get all visible elements |
4) Attribute filter
The attribute filter obtains the element based on a certain attribute of the element, such as an ID number or content that matches the attribute value, and starts with a "[" and ends with a "]"
Selector | Function description |
---|---|
Get the content containing the given Attribute element | |
Gets the element equal to the given attribute that is a specific value | |
Get elements that are not equal to the given attribute and are a specific value | |
Get the element where the given attribute starts with some value | |
Get the element where the given attribute ends with some value Element | |
Gets the element where the given attribute contains some value | |
Get elements that meet attributes that meet multiple conditions |
Selector | Function description |
---|---|
Get the specific position element under each parent element, the index number starts from 1 | |
Get the first child element under each parent element | |
Get the last child element under each parent element | |
Get only one child element under each parent element |
6) Form object Attribute filter
The form object attribute filter selector obtains the element through the attribute characteristics of an object in the form, such as enabled, disabled, checked, and selected attributes.Function description | |
---|---|
Get all elements with available attributes in the form | |
Get all elements with unavailable attributes in the form | |
Get all selected elements in the form | |
Get all selected option elements in the form |
Introduces the form selector in the jQuery selector, which is specially designed for forms. It can quickly locate a form object on the page.
Function Description | |
---|---|
Get all input, textarea, select | |
Get all single-line text boxes | |
Get all password boxes | |
Get all radio buttons | |
Get checkbox | |
Get all submit buttons | |
Get all image fields | |
Get all reset buttons | |
Get All buttons | |
Get all file fields |
The above is the detailed content of How to implement filtering function in jquery. For more information, please follow other related articles on the PHP Chinese website!