What are the types of jquery selectors?

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.

The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.

What are the types of jquery selectors

1. Basic selector

The basic selector is the most commonly used and simplest in jQuery Selector, which finds DOM elements through the element's 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: According to The given class name matches the element and returns the element set

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

3. Element (label) selector element

Description: Match the element based on the given element name and return the element collection

Example: $("p") selects all

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

4, *

Description: Match all elements and return the element set

Example: $("* ") Select all elements

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

Description: Match each selector to The elements are merged and returned together to return the merged element set

Example: $("p,span,p.myClass") selects all

, and< whose class is myClass ;p>Element collection of tags

2. Hierarchical selector

The hierarchical selector obtains specific elements based on hierarchical relationships.

1. Descendant selector

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

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

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

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

element (note: the child selector only selects child elements directly belonging to the parent element)

3. Peer selector $("prev next")

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

Example: $(". one p") selects 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 set of elements

Example: $("#two~p") selects 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 An element, returns a single element

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

element among all

elements

2, :last

Description: Select the last element and return a single element

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

element among all

elements

3. :not(selector)

Description: Remove all elements matching the given selector and return a collection of elements

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

4, :even

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

5. :odd

Description: Select all elements whose index is an odd number. The index starts from 0 and returns the element set

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: Selects the element whose index is greater than index. The index starts from 0 and returns the element. Collection

8, :lt(index)

Description: Select elements whose index is less than index, the index starts from 0, and return the element collection

9, :focus

Description: Select the currently focused element

2>Content filter selector

1, :contains(text)

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

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

2, :empty

Description: Select empty elements that do not contain child elements or text elements, and return a collection of elements

Example: $("p:empty") Selects empty elements that do not contain child elements or text elements Empty

element (

3, :has(selector)

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

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

containing the

element Element (

4, :parent

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

Example: $("p:parent") selects

elements that contain child elements or text elements (

text< ;/p>)

3>Visibility filter selector

1, :hidden

Description: Select all invisible elements and return 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 the 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 input elements with name attributes starting with text

5, [attribute$=value]

Example: $("input[name$=text]") Select input elements with name attributes ending with text

6, [attribute*=value]

Example: $("input[name*=text]") Select input elements with name attributes containing text The input element

7, [attribute~=value]

Example: $("input[class~=text]") selects the space-separated value with class attribute that contains text Input element

8, [attribute1][attribute2][attributeN]

Description: Merge multiple attribute filter selectors

5>Form object attribute filter selection Device (returns a collection of elements)

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") Selects all selected option elements

4. Form selector (returns element collection, similar usage)

1. :text

Description: Select all single-line text boxes

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

2. :password

Description: Select all password boxes

3.:button

Description: Select all buttons

4, :checkbox

Description: Select all multi-select boxes

Recommended related video tutorials: jQuery video tutorial

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