Shulou(Shulou.com)05/31 Report--

This article focuses on "what are the types of jquery selectors". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn what are the types of jquery selectors.

There are four types of jquery selectors, namely: 1, basic selector, through the element's id, class, etc., to find elements; 2, hierarchical selector, according to the hierarchical relationship to obtain specific elements; 3, filter selector, including content filtering, visibility filtering, attribute filtering, and sub-element filtering; 4, form selector, you can return a collection of elements.

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

What are several types of jquery selectors? 1. Basic selectors

The basic selector is the most commonly used and simplest selector in jQuery. It looks for DOM elements by their id, class, tag signatures, and so on.

1. ID selector # id

Description: matches an element based on a given id and returns a single element (Note: in a web page, the id name cannot be repeated)

Example: $("# test") selects the element whose id is test

2. Class selector .class

Description: matches the element based on the given class name and returns a collection of elements

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

3. Element (tag) selector element

Description: matches an element based on a given element name and returns a collection of elements

Example: $("p") selects all

Element $("div"): select all div tags

4. *

Description: matches all elements and returns a collection of elements

Example: $("*") selects all elements

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

Description: the elements matched by each selector are merged and returned together, returning the merged collection of elements

Example: $("pforce spanpene p.myClass") selects all

, and class for myClass

A collection of elements of tags

2. Hierarchical selector

The hierarchy selector gets specific elements according to the hierarchical relationship.

1. Descendant selector

Example: select $("p span")

All elements in the element (Note: the descendant selector selects all specified selected elements of the parent element, whether son or grandchild)

2. Sub-selector $("parent > child")

Example: $("p > span") selection

All elements under the element (Note: the child selector selects only child elements that belong directly to the parent element)

3. Peer selector $("prev+next")

Description: select the next element immediately after the prev element and return a collection of elements

Example: $(".one + p") selects class as the next one

Collection of peer elements

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

Description: all siblings elements after selecting prev element, return a collection of elements

Example: $("# two~p") after selecting the element whose id is two

Collection of peer elements

Third, filter selector

1 > basic filter selector

1 、: first

Description: select the first element and return a single element

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

The first in the element

element

2 、: last

Description: select the last element and return a single element

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

The last of the elements

element

3. Not (selector)

Description: removes all elements that match the given selector and returns a collection of elements

Example: $("input:not (.myClass)") selects an element whose class is not myClass

4 、: even

Description: select all elements whose index is even, starting with 0, and return a collection of elements

5 、: odd

Description: select all elements whose index is odd. The index starts at 0 and returns a collection of elements.

6. Eq (index)

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

7. Gt (index)

Description: select the element whose index is greater than index. The index starts from 0 and returns the collection of elements.

8. Lt (index)

Description: select elements whose index is less than index. The index starts at 0 and returns the collection of elements.

9 、: focus

Description: select the element that is currently in focus

2 > content filter selector

1. Contains (text)

Description: select an element with text text content, and return a collection of elements

Example: $("p:contains") selects the element that contains the text "I"

2 、: empty

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

Example: $("p:empty") selects an empty space that does not contain child or text elements

Element (

)

3. Has (selector)

Description: select the elements that contain the elements matched by the selector and return a collection of elements

Example: $("p:has (p)") selection contains

Of the element

Element (

)

4 、: parent

Description: select an element that contains child elements or text, and return a collection of elements

Example: $("p:parent") selects objects that contain child or text elements

Element (

Or

Text

)

3 > visibility filter selector

1 、: hidden

Description: select all invisible elements and return a collection of elements

2 、: visible

Description: select all visible elements and return a collection of elements

4 > attribute filter selector (returns a collection of elements)

1 、 [attribute]

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

2 、 [attribute=value]

Example: $("input [name=text]") selects an input element that has a name attribute equal to text

3. [attributeurs assigned value]

Example: $("input [nameplate assigned text]") selects an input element that has a name attribute that is not equal to text

4. [attribute ^ = value]

Example: $("input [name ^ = text]") selects the input element that has the name attribute starting with text

5 、 [attribute$=value]

Example: $("input [name$=text]") selects the input element that has the name attribute ending with text

6 、 [attribute*=value]

Example: $("input [name*=text]") selects the input element that has the name attribute and contains text

7 、 [attribute~=value]

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

8 、 [attribute1] [attribute2] [attributeN]

Description: merge multiple attribute filter selectors

5 > form object attribute filter selector (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 (check box, check box)

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

4 、: selected

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

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

Form selector (returns a collection of elements, using similar)

1 、: text

Description: select all single-line text boxes

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

2 、: password

Description: select all password boxes

3 、: button

Description: select all buttons

4 、: checkbox

Description: select all the checkboxes

At this point, I believe you have a deeper understanding of "what are the types of jquery selectors?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.