What are the three types of selectors in jquery?

Jquery’s three selectors: 1. Basic selector, consisting of element ID, element name, class name, and multiple selectors; 2. Hierarchical selector, which obtains elements through the hierarchical relationship between DOM elements ;3. Filter selector. According to different filtering rules, this selector can also be divided into simple filtering, content filtering, visible filtering, attribute filtering, form filtering, etc.

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

1. Basic selector

It consists of element ID, element name, and multiple selectors. Most page elements can be searched through the basic selector

Selector	Function description
id	Match based on the given ID An element
element	matches all elements
.class	based on the given element name Matches elements based on given class
*	Matches all elements
selector1, selectorN	Merge the elements matched by each selector and return them together

2. Hierarchical selector

The hierarchical selector obtains elements through the hierarchical relationship between DOM elements. , its main hierarchical relationships include descendant, father-son, adjacent, and brother relationships, through which certain types of relationships can be used to locate elements conveniently and quickly.

##ancestor descendantMatch all descendant elements based on ancestor elements##parent>child## prev nextmatches all adjacent elements immediately after the prev elementpre~siblingsmatches all sibling elements after the pre element3. Filter selector

Selector	Function description
Match all child elements based on parent elements

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

SelectorFunction Descriptionfirst() 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:oddGet 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:headerGet all header type elements, such as h1, h2... Element collection:animatedGet the element that is performing animation effect2) Content filter selector

The content filtering 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

SelectorFunction description:contains(text)Get the text that contains the given text Elements:emptyGet all empty elements that do not contain child elements or text:has(selector) Get the element containing the matched selector:parentGet the element containing child elements or text3) Visibility filter

The visibility filter selector obtains elements based on the characteristics of whether the element is visible

SelectorFunction description:hiddenGet all invisible elements, or those of type hidden Element:visbleGet all visible elements

4) Attribute filter

The attribute filter obtains the element based on a certain attribute of the element, such as the ID number or the content matching the attribute value, and starts with "[", Ended with "]"

##[attribute$=value] Get the element where the given attribute ends with some value[attribute*=value]Get the element where the given attribute ends with certain value [selector1][selector2][selectorN]Get elements that meet attributes that meet multiple conditions

Selector	Function Description
[ attribute]	Get the element containing the given attribute
[attribute=value]	Get the attribute that is equal to the given attribute with a specific value Element
[attribute!=value]	Get the element that is not equal to the given attribute and is a specific value
[attribute^=value]	Get the element whose attribute starts with a certain value

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.

SelectorFunction description##:nth-child(eq/ even/odd/index):first-child:last-child:only-child

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.

Selector##:enabledGet all elements with available attributes in the form:disabledGet all elements with unavailable attributes in the form:checkedGet all selected elements in the form:selectedGet all selected option elements in the form7) Form filter

Function description

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

SelectorFunction Description:inputGet all input, textarea, select:textGet all single-line text boxes:passwordGet all password boxes:radioGet all radio buttons:checkboxGet checkbox:submitGet all submit buttons:image Get all image fields:resetGet all reset buttons:buttonGet All buttons:fileGet all file fields[Recommended learning: jQuery video Tutorial、

web front-end video】

The above is the detailed content of What are the three types of selectors in jquery?. For more information, please follow other related articles on the PHP Chinese website!