Home >php教程 >PHP开发 >Detailed explanation of the complete collection of jQuery selectors

Detailed explanation of the complete collection of jQuery selectors

高洛峰Original: 2016-12-17 16:22:171389browse

In layman's terms, a Selector is "a string representing special semantics". As long as the selector string is passed into the above method, different Dom objects can be selected and returned in the form of a jQuery wrapper set.

But I had a hard time classifying jQuery selectors. Because the classification in the book is completely different from the official classification of jQuery. In the end, I decided to focus on practicality and not understand the CSS3 selector standard for the time being, and explain it according to the official classification of jQuery.

jQuery’s selectors support the CSS3 selector standard. The following is the latest CSS3 selector standard from W3C:

http://www.w3.org/TR/css3-selectors/

The selectors in the standard can all be used in jQuery Used in.

jQuery selectors are mainly divided into "select" and "filter" according to their functions. They are used together. They can be used at the same time to form a selector string. The main difference is that the selector for "filter" is Specify conditions to filter from the previously matched content. The "Filter" selector can also be used alone, which means to filter from all "*". For example:

$(":[title]")

is equivalent to:

$ ("*:[title]")

The selector with the "Select" function will not have a default range, because the function is "select" rather than "filter".

In the following selector categories, with The classification of "Filter" means "Filter" selector, otherwise it is the selector of "Select" function.

jQuery selectors are divided into the following categories:

[Instructions]
1. Click "Name" to jump Go to the jQuery official documentation for this method.
2. You can test various selectors in the jQuery Selector Lab in the next section

1. Basic selector Basics

Name

Explanation

Example

#id

Select based on the element ID

$("divId") Select the element with ID divId

element

Select based on the name of the element,

$("a") Select all elements

.class

Select according to the css class of the element

$(".bgRed") Select the element whose CSS class is bgRed

Select all elements

$("*") Select all elements on the page

selector1,
selector2,
selectorN

You can separate several selectors with "," and then combine them into a selector string. The content matched by these selectors will be selected at the same time.

$("#divId, a, .bgRed ”)

[Learning Suggestions]: Just remember the basic selectors for the time being. You can jump directly to the next section "jQuery Selector Lab" for hands-on practice. Come back later to learn all the selectors slowly, or use Come back to check when you arrive.

2. Hierarchy selector Hierarchy

Name

Description

Example

ancestor descendant

Use the form of "form input" to select all input elements in the form. That is ancestor (ancestor) For from, descendant (descendant) is the input.

$(".bgRed div") Selects all

elements in the element whose CSS class is bgRed.

parent > child

Selects the direct child node of parent child. child must be contained in parent and the parent class is the parent element.

$(".myList>li") Selects the CSS class as the direct child node

object in the myList element.

prev + next

prev and next are two elements of the same level. Select the next element after the prev element.

$("#hibiscus+img") selects the img object behind the hibiscus element with the id.

prev ~ siblings

Select Elements after prev that are filtered based on siblings
Note: siblings is a filter

$("#someDiv~[title]") selects all elements with the title attribute behind the object with the id of someDiv

3. Basic filter Basic Filters

Name

Description

Example

:first

match the first element found

find the first row of the table:$("tr:first")

:last

match the last found An element

Find the last row of the table: $("tr:last")

:not(selector)

Remove all elements matching the given selector

Find all unselected input elements: $(" input:not(:checked)”)

:even

Matches all elements with an even index value, counting from 0

Find rows 1, 3, 5… of the table: $(“tr:even”)

:odd

Matches all elements with an odd index value, counting from 0

Find rows 2, 4, and 6 of the table: $("tr:odd")

:eq(index)

Match one given Elements with a given index value
Note: index starts counting from 0

Find the second line: $("tr:eq(1)")

:gt(index)

Match all elements greater than the given index value
Note: index starts counting from 0

Look for the second and third rows, that is, the index values are 1 and 2, which is greater than 0: $("tr:gt(0)")

:lt(index)

Select elements with an index less than N in the result set
Note: index starts counting from 0

Find the first and second rows, that is, the index values are 0 and 1, which is smaller than 2: $("tr:lt(2)")

:header

Select all header tags such as h1, h2, h3.

Add background color to all titles in the page: $(“:header”).css(“background”, “#EEE”) ;

:animated

matches all elements that are executing animation effects

Only perform an animation effect on elements that are not executing animation effects: $(“#run”).click(function(){
$(“div: not(:animated)”).animate({ left: “+=20″ }, 1000);
});

4. Content FiltersContent Filters

Name

Explanation

Example

:contains(text)

Match elements that contain the given text

Find all div elements that contain "John":$("div:contains('John')")

:empty

Matches all empty elements that do not contain child elements or text

Find all empty elements that do not contain child elements or text: $("td:empty")

:has(selector)

Matches those containing the selector The element of the element

Add a text class to all div elements containing p elements: $("div:has(p)").addClass("test");

:parent

matches child elements or text Elements

Find all td elements that contain child elements or text: $("td:parent")

5. Visibility Filters Invisible elements

Note: In version 1.3.2, hidden matches elements that themselves or their parent class do not occupy space in the document. If you use the CSS visibility attribute to make it not display but occupy space, do not enter hidden.

Find all invisible tr elements: $("tr:hidden")

:visible

Match all visible elements

Find all visible tr elements: $("tr:visible")

6. Attribute filtering Attribute Filters

Name

Description

Example

[attribute]

Match elements containing the given attribute

Find all div elements containing the id attribute:

$("div[id]")

[ attribute=value]

Match elements where the given attribute is a specific value

Find all input elements whose name attribute is newsletter:

$("input[name='newsletter']").attr("checked" , true);

[attribute!=value]

matches elements where the given attribute does not contain a specific value

Find all input elements whose name attribute is not newsletter:

$("input[name!=' newsletter']").attr("checked", true);

[attribute^=value]

matches elements where the given attribute starts with some value

$("input[name^='news ']")

[attribute$=value]

Match elements where the given attribute ends with some value

Find all input elements whose name ends with 'letter':

$("input[name$= 'letter']")

[attribute*=value]

Match the given attribute as an element containing some value

Find all input elements whose name contains 'man':

$("input[name* ='man']")

[attributeFilter1][attributeFilter2][attributeFilterN]

Composite attribute selector, used when multiple conditions need to be met at the same time.

Find all attributes containing id, and its name attribute ends with man:

$("input[id][name$='man']")

7. Child Filters

Name

Explanation

Example

:nth-child(index/even/odd/equation)

matches the Nth child or odd-even element under its parent element

':eq(index)' only matches one element, while This will match child elements for every parent element. :nth-child starts from 1, and :eq() starts from 0!

You can use:

nth-child(even)

:nth-child(odd)

:nth-child(3n)

:nth-child(2)

:nth-child(3n+1)

:nth- child(3n+2)

Find the 2nd li in each ul:

$("ul li:nth-child(2)")

:first-child

match the first child element

' :first' only matches one element, while this selector will match one child element for each parent element

Find the first li in each ul:

$("ul li:first-child")

: last-child

matches the last child element

':last' only matches one element, and this selector will match one child element for each parent element

finds the last li in each ul:

$( "ul li:last-child")

:only-child

If an element is the only child element in the parent element, it will be matched

If the parent element contains other elements, it will not be matched match.

Find li that is the only child element in ul:

$("ul li:only-child")