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 descendant Match all descendant elements based on ancestor elements ##parent>child ## prev next matches all adjacent elements immediately after the prev element pre~siblings matches all sibling elements after the pre element 3. 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

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

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

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

Selector Function description :hidden Get all invisible elements, or those of type hidden Element :visble Get all visible elements ##[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.

Selector Function 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 ##:enabled Get all elements with available attributes in the form :disabled Get all elements with unavailable attributes in the form :checked Get all selected elements in the form :selected Get all selected option elements in the form 7) 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.

Selector Function Description :input Get all input, textarea, select :text Get all single-line text boxes :password Get all password boxes :radio Get all radio buttons :checkbox Get checkbox :submit Get all submit buttons :image Get all image fields :reset Get all reset buttons :button Get All buttons :file Get 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!