What are the jquery selector types?

There are 4 types of jquery selectors, namely: 1. Basic selector, which searches for elements by their id, class, etc.; 2. Hierarchical selector, which obtains specific elements based on hierarchical relationships; 3. Filtering Selectors include content filtering, visibility filtering, attribute filtering, and sub-element filtering; 4. Form selectors can return a collection of elements.

Operating system for this tutorial: Windows 10 system, jQuery3.6.0 version, Dell G3 computer.

There are four selectors in jquery:

1. Basic selector

The basic selector is the most commonly used and simplest choice in jQuery It searches for DOM elements by their id, class, tag name, etc.

1. ID selector #id

Description: Match an element based on the given id and return a single element (Note: In the web page, the id name cannot be repeated)

Example: $("#test") selects the element with the id of test

2. Class selector.class

Description: Match elements according to the given class name and return the element collection

Example: $(".test") selects all elements with class test

3. Element (label) selector element

Description: According to the given element name Match elements and return element collection

Example: $("p") selects all

elements$("div"): selects all div tags

4, *

Description: Match all elements and return the element set

Example: $("*") selects all elements

5, selector1, selector2,...,selectorN ( Union selector)

Description: Combine the elements matched by each selector and return them together, returning the combined element set

Example: $("p,span,p. myClass") selects the set of elements of all

, and

tags whose class is myClass

2. Hierarchical selector

Hierarchical selectors get specific elements based on hierarchical relationships.

1. Descendant selector

Example: $("p span") selects all elements in the

element (Note: the descendant selector selects the parent element All specified selected elements, whether they are children or grandchildren)

2. Child selector $("parent>child")

Example: $("p>span") Select all elements under the

element (Note: the child selector only selects child elements that are directly affiliated with the parent element)

3. Sibling selector $("prev next")

Description: Select the next element immediately after the PRev element and return the element set

Example: $(".one p") Select the next

sibling element set with class one

4. Sibling selector $("prev~siblings")

Description: Select all siblings elements after the prev element and return the element set

Example: $(" #two~p") Select the set of all

sibling elements after the element with id two

3. Filter selector

1>Basic filter selector

1. :First

Description: Select the first element and return a single element

Example: $("p:first") selects all

elements The first

element

2, :last

Description: Select the last element and return a single element

Example: $("p:last" ) Select the last

element among all

elements

3. :not(selector)

Description: Remove all elements matching the given selector and return the element Collection

Example: $("input:not(.myClass)") Selects elements whose class is not myClass

4, :even

Description: Select All elements whose index is an even number, the index starts from 0, and the element set is returned

5, :odd

Description: Select all elements whose index is an odd number, the index starts from 0, and the element set is returned

6. :eq(index)

Description: Select the element whose index is equal to index. The index starts from 0 and returns a single element.

7. :gt(index)

Description: Select elements whose index is greater than index. The index starts from 0 and returns the element set.

8, :lt(index)

Description: Select elements whose index is less than index. The index starts from 0 and returns the element collection

9, :focus

Description: Select the element currently receiving focus

2>Content filter selector

1. :contains(text)

Description: Select the element containing text and return the element collection

Example: $("p:contains('I')") Select the element containing Element of the text "I"

2, :empty

Description: Select an empty element that does not contain child elements or text elements, and return an element collection

Example: $(" p:empty") Selects an empty

element that does not contain child elements or text elements (

)

3, :has(selector)

Description: Select the element containing the element matched by the selector and return the element set

Example: $("p:has(p)") Selects the

element (<) containing the

element ;p>

)

4. :parent

Description: Select elements containing child elements or text, and return an element collection

Example: $("p:parent") selects

elements containing child elements or text elements (

or

text)

3>Visibility filter selector

1, :hidden

Description: Select all invisible elements and return the element collection

2. :visible

Description: Select all visible elements and return the element collection

4>Attribute filter selector (return element collection)

1.[attribute]

Example: $("p[id]") Select the p element with id attribute

2, [attribute=value]

Example:$("input[ name=text]") Select the input element with name attribute equal to text

3, [attribute!=value]

Example: $("input[name!=text]") Select Input elements with name attributes that are not equal to text

4, [attribute^=value]

Example: $("input[name^=text]") Select the name attribute that starts with text The input element

5, [attribute$=value]

Example: $("input[name$=text]") selects the input element whose name attribute ends with text

6, [attribute*=value]

Example: $("input[name*=text]") Select the input element with name attribute containing text

7, [attribute ~=value]

Example: $("input[class~=text]") Select the input element that has the class attribute separated by spaces and contains text in the value

8, [attribute1] [attribute2][attributeN]

Description: Merge multiple attribute filter selectors

5> Form object attribute filter selector (return element collection)

1, :enabled

Description: Select all available elements

2, :disabled

Description: Select all unavailable elements

3, :checked

Description: Select all selected elements (radio boxes, check boxes)

Example: $("input:checked") Select all selected elements

4. :selected

Description: Select all selected option elements (drop-down list)

Example: $("select option:selected") Select all selected option elements

4. Form selector (returns a collection of elements, similar usage)

1. :text

Description: Select all single-line text boxes

Example: $(":text") selects all single-line text boxes

2, :password

Description: selects all password boxes

3, :button

Description: Select all buttons

4, :checkbox

Description: Select all multi-select boxes

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