jquery Selector Description: Basic selector, hierarchy selector, filter selector, form selector

Selectors are the foundation of jquery, where event handling, traversal of the DOM, and AJAX operations all depend on selectors. Therefore, if you can use the selector skillfully, not only can simplify the code, but also achieve a multiplier effect. The jquery selector completely inherits the CSS style. The jquery selector makes it easy to find specific DOM elements and then add the appropriate behavior to them without worrying about whether the browser supports this selector.

The jquery selector can be easily divided into basic selectors, hierarchical selectors, filter selectors, and form selectors. These are described in the table below.

1. Basic Selector

Selector

Selector	Description	return	Example
#id	Match a given ID	Single element	$ ("header")
. class	Match a given class name	Collection elements	$ (". Test")
E	Match a given label name	Collection elements	$ ("div")
*	Match all elements	Collection elements	$ ("*")
E,. class, E ...	Match a given collection	Collection elements	$ ("span,. TiPS")

2. Hierarchy Selector

Selector

Selector	Description	return	Example
$ ("ancestor descendant")	Match everything in the ancestor. Descendant (descendant) elements	Collection elements	$ ("Body div")
$ ("Parent>child")	Match all of the parent Child (son) element	Collection elements	$ ("Div>span")
$ ("Prev+next")	Match the Prev immediately after the Next element	Collection elements	$ (". Error+span")
$ ("prev~siblings")	Match all the Prev after Siblings elements	Collection elements	$ ("Span~a")

3. Filter Selector

3.1 Basic Filter Selector

Selector

Selector	Description	return	Example
: First	Match first element	Single element	$ ("Div:first")
: Last	Match last Element	Single element	$ ("Span:last")
: Even	Matching index is an even number of elements Index starting from 0	Collection elements	$ ("Li:even")
: Odd	Matching index is an odd number of elements Index starting from 0	Collection elements	$ ("li:odd")
: EQ (Index)	The match index is equal to the element Vegetarian (Index starting from 0)	Single element	$ ("Input:eq (2)")
: GT (Index)	The match index is greater than the yuan Vegetarian (Index starting from 0)	Collection elements	$ ("INPUT:GT (1)")
: LT (Index)	The match index is less than the yuan Vegetarian (Index starting from 0)	Collection elements	$ ("Input:lt (5)")
: Header	Match all H1,h2 ... such as Title element	Collection elements	$ (": Header")
: Animated	Matches all executing Elements of an animation	Collection elements	$ ("div:animated")

3.2 Content Filter Selector

Selector

Selector	Description	return	Example
: Contains (text)	Match text content The Elements	Collection elements	$ ("P:contains (Today)")
: Empty	Match does not contain child elements or Empty elements of a text element	Collection elements	$ ("P:empty")
: Has (selector)	Match contains selector element The Elements	Collection elements	$ ("Div:has (span)")
:p arent	Match contains child elements or text The Elements	Collection elements	$ ("div:parent")

3.3 Visibility Filter Selector

Selector

Selector	Description	return	Example
: Hidden	Match all Invisible The Elements	Collection elements	$ (": Hidden")
: Visible	Match all visible elements	Collection elements	$ (": visible")

3.4 Attribute Filter Selector

Selector

Selector	Description	return	Example
[attr]	Match owns this property The Elements	Collection elements	$ ("Img[alt]")
[Attr=value]	Match property value to values The Elements	Collection elements	$ ("a[title=test]")
[Attr!=value]	Match attribute value not equal to element of Value	Collection elements	$ ("a[title!=test]")
[Attr^=value]	Match attribute values to value elements that begin with	Collection elements	$ ("img[alt^=welcome]")
[Attr$=value]	Match attribute values to value End of Element	Collection elements	$ ("img[alt$=last]")
[Attr*=vlaue]	The match attribute value contains the element of Value	Collection elements	$ ("div[title*=test]")
[ATTR1] [ATTR2] ...	Through multiple properties to match	Collection elements	$ ("div[id][title*=test]")

3.5 Sub-element filter Selector

Selector

Selector	Description	return	Example
: Nth-child	Match each parent element under the Index child element Index starting from 1	Collection elements	$ ("Div:nth-child (2)")
: First-child	That matches each parent element's First child element	Collection elements	$ ("Div:first-child")
: Last-child	That matches each parent element's Last child element	Collection elements	$ ("Div:last-child")
: Only-child	An element is in its parent element The only child element of the Then match it	Collection elements	$ ("Div:only-child")

3.6 Form object property Filter Selector

Selector

Selector	Description	return	Example
: Enabled	Match all available elements	Collection elements	$ ("form:enabled")
:d isabled	Match all not available The Elements	Collection elements	$ ("form:d isabled")
: Checked	Match all selected elements (with Radio box, check box)	Collection elements	$ ("input:checked")
: Selected	Matches all of the selected Option element	Collection elements	$ ("select:selected")

4. Form Selector

Selector

Selector	Description	return	Example
: input	Match all input, textarea, Select, Button Element	Collection elements	$ ("input")
: Text	Match all text boxes	Collection elements	$ (": Text")
:p Assword	Match all Password boxes	Collection elements	$ (":p Assword")
: Radio	Match all Radio Boxes	Collection elements	$ (": Radio")
: checkbox	Match all multi-marquee	Collection elements	$ (": checkbox")
: Submit	Match all Submit buttons	Collection elements	$ (": Submit")
: Image	Match all image buttons	Collection elements	$ (": Image")
: RESET	Match all reset buttons	Collection elements	$ (": Reset")
: button	Match all buttons	Collection elements	$ (": Button")
: File	Match all upload domains	Collection elements	$ (": File")

jquery Selector Description: Basic selector, hierarchy selector, filter selector, form selector