Introduction to JQuery's various selectors

1. JQuery basic selector

##$(".className")Class Selector$("tagName")Tag Selector$("*")Wildcard selector##$("tagName,.className,#idName,. ..")

express	description	remarks
$("#idName")	id selector
Group Selector

2. Hierarchy Selector

Select nodes from the parent-child relationship and brother relationship.

express$("a b")(including child nodes and Grandchild node)##$("a>b")Select all child nodes b$("a+b")Select the first sibling node b## after node a Select all sibling nodes b after node a instead of all sibling nodes

description

remarks

Select all descendant nodes b

(including only child nodes of node a , excluding grandchild nodes)

#$("a~b")

Note that it is after node a Sibling nodes,

3. Basic filter selector

Filter tags from the perspective of position.

##$("tagName:gt(2)")Select the elements after the third element in the tagName element set$("tagName:lt(2)")Select the third element in the tagName element set The element in front of the element $(":header") Select all title elements$(":animated")Select animated elements$("tagName:not(.one)")Select elements whose class value is not one in the tagName element set

express	description	remarks
$("tagName:first")	Select the first element in the tagName element collection
$("tagName:last")	Select the tagName element The last element in the collection
$("tagName:odd")	Select the element at an odd position in the tagName element collection
$("tagName:even")	Select the even-numbered element in the tagName element set
$("tagName:eq(1)")	Select the second element in the tagName element collection (The index is the same as the array, starting from zero)
	(i.e. under tagName , elements with positions greater than 3)
	(that is, the element under tagName with a position less than 3)
	(h1 to h6)

4. Content filter selector

Whether the node value is empty, Whether the text on the node contains the specified string, and whether the class value in the child element is the specified value.

expressdescriptionremarks$("tagName:empty")Select elements with empty content in the tagName element collection$("tagName:parent")Select elements that contain child elements in the tagName element set$("tagName:contents('abc')")Select the element whose content contains "abc" in the tagName element set$("tagName:has(.one)")Select the class value in the tagNmae element set as element of one

5. Attribute filter (select elements containing specified attributes)

Filter nodes based on their attributes: with or without attributes, Attribute values ​​are equal to, not equal to, include, start with **, end with **, multiple filtering.

	(Not a child element)
	(Not a child element)
	(not a child element, but a tagName element)

#expressdescriptionremarks$("div[id]")The selected element contains the id attribute##$("div[id='test']")$("div[title!='test']")$("div[title^='te']")$("div[title$='st']")$("div[title*='est']")$("div[title*='est'][id]")And has the id attribute

The selected element contains id="test"
The title attribute of the selected element is not "test"
The title attribute value of the selected element starts with "test"
The title attribute of the selected element ends with "test"
The title attribute value of the selected element contains "est"
The title attribute value of the selected element contains "est",

6. Visibility filter selector

Select nodes based on whether elements on the page are displayed

##expressdescriptionremarks$("div:hidden")Select the hidden div element$("div :hidden")Select all hidden elements in the div element$("div:visiable")Select visible div elements$("div :visiable") Select the visible elements in the div

(including child elements and grandchild elements)
(including child elements and grandchild elements)

The above is the detailed content of Introduction to JQuery's various selectors. For more information, please follow other related articles on the PHP Chinese website!