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 "]"

##[attribute]Get the content containing the given Attribute element[attribute=value]Gets the element equal to the given attribute that is a specific value[attribute!=value]Get elements that are not equal to the given attribute and are a specific value[attribute^=value]Get the element where the given attribute starts with some value[attribute$=value]Get the element where the given attribute ends with some value Element[attribute*=value]Gets the element where the given attribute contains some value [selector1][selector2][selectorN]Get elements that meet attributes that meet multiple conditions

5) Sub-element filter

During the page development process, you may encounter the need to highlight a certain line. Although the basic filter selector ":eq(index)" can be used to display a single table, it cannot meet the selection needs of large amounts of data and multiple tables. In order to achieve such a function, jQuery can easily obtain an element in all parent elements through the child element filter selector.

Selector	Function description

##:nth-child(eq/ even/odd/index)Get the specific position element under each parent element, the index number starts from 1:first-child Get the first child element under each parent element:last-childGet the last child element under each parent element:only-childGet only one child element under each parent element

Selector	Function description

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.

SelectorFunction description##:enabled:disabled:checked:selected

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

7) Form filter

Introduces the form selector in the jQuery selector, which is specially designed for forms. It can quickly locate a form object on the page.

Selector:input:text:password:radio:checkbox:submit:image:reset:button:file[Recommended learning:

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

jQuery video Tutorial

、web front-end video】

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!