The jquery selector of the sharp jquery learning note

Before introducing the jquery selector, let's briefly introduce the CSS selector--->

One, CSS Selector

There are several common CSS selectors:

Selector Selector	Grammar	Describe	Example
Tag Selector	E{CSS Rules}	Take document element as Selector	td{font-size:10px;} A{tetx-decoration:none;}
ID Selector	#ID {CSS Rules}	The unique ID of the document element is the selector	#node {corlor:red;}
Class Selector	. CLASSNAME{CSS Rules}	Use the class of the document element as the selector	Div.node{background-color:yellow;}
Group Selector	E1,E2,E3{CSS Rules}	Use multiple document elements as selectors	p,div,a,span{font-size:10px;}
Descendant Selector	E F{CSS Rules}	As a selector with any descendant element f of element E	div input{font:10px Black;}
A wildcard selector	*{CSS Rules}	Take all elements of a document as selectors	*{font-size:10px;}

Ii. jquery Selector

The jquery selector completely inherits the CSS selector and can quickly find DOM elements and add corresponding behaviors.

jquery has a basic selector, a hierarchy selector, a filter selector, and a form selector. Here are a few categories of selectors

1. Basic Selector

Basic Selector

Selector Selector	Describe	Return	Example
Element	Matches an element based on the given element name	Collection elements	$ ("P") selects all P-elements
#id	Matches the specified element according to the given ID	An element	$ ("#nodeName") select an element with ID NodeName
#className	Matches an element according to the given class name	Collection elements	$ ("Div.span") Select all div with class as span
*	Match all the Elements	Collection elements	$ ("*") Select all the elements
Selecter1,selecter,..., Selectern	Merges elements that match each selector and returns	Collection elements	$ ("Div,span,p.info") Select all the P elements for Div\span and class info

2. Hierarchy Selector

Hierarchy Selector

Selector Selector	Describe	Return	Example
$ ("ancestor descendant")	Select all descendant (descendant) elements in the ancestor	Collection elements	$ ("div span") Select all the span elements in the DIV
$ ("Parent > Child")	Select the child element of parent ps:$ ("ancestor descendant") is the selection of descendants (including the grandchild element) $ ("Parent > Child") select only sub-elements	Collection elements	$ ("div > span") Select a child element named span under a DIV element
$ ("Pre + Next")	Select the next sibling element immediately after the pre element	Collection elements	$ (". One + div") Select class as the first div sibling element behind one
$ ("Pre ~ siblings")	Select all sibling elements after the pre element	Collection elements	$ ("#two ~ div") Select all div sibling elements that follow the ID of

The methods in jquery can replace some of the above selectors:

• The next () method is equivalent to $ ("Pre + Next"). So $ (". One + div") is equivalent to $ (". One"). Next ();
• The Nextall () method is equivalent to $ ("Pre ~ siblings"). So $ ("#two ~ div") is equivalent to $ ("#two"). Nextall ();
• The siblings () method is to get all the sibling elements of the current element, no points in front or back;

3. Filter Selector

Filter selectors mainly through specific filtering rules to filter out the required DOM elements, filtering rules and CSS pseudo-class selector syntax is the same, that is, the selector is a colon (:) Start , according to different filtering rules, filter selectors can be divided into:

Basic filtering, content filtering, visibility filtering, attribute filtering, sub-element filtering, form object property filtering

Basic Filter Selector

Selector Selector	Describe	Return	Example
: First	Select the first element	Single element	$ ("Div:first") selects the first element in all Div
: Last	Select the last Element	Single element	$ ("Div:last") Select the last element in all Div
: Not (selector)	Go to all elements that match the given selector	Collection elements	$ ("Div:not ('. Div1 ')") Select Class not div1 all DIV elements
: Even	Select an element with an even index value	Collection elements	$ ("Tr:even") Select TR element with an even number of index values
: Odd	Select an element with an odd index value	Collection elements	$ ("tr:odd") Select the TR element with an odd index value
: EQ (Index)	Select an element with index value equal to index	Single element	$ ("Input:eq (2)") Select an element with an index value of 2, which is the third INPUT element (index starting from 0)
: GT (Index)	Select an element with an index value greater than index	Collection elements	$ ("INPUTGT (2)") Select an element that has an index value greater than 2, which is the element following the third input (the index starts at 0)
: LT (Index)	Select an element with an index value less than index	Collection elements	$ ("Input:lt (2)") Select an element with an index value of less than 2, which is the element preceding the third input (the index starts at 0)
: Header	Select all the caption elements, such as H1,H2, etc.	Collection elements	$ ("header") Select all the heading elements in the Web page H1 to H6
: Animated	Select the element that is currently performing the animation	Collection elements	$ ("div:animated") Select the div element that is performing the animation
: Focus	Select all the elements that get focus	Collection elements	$ (": Focus") Select all the elements in the page that get focus

Content Filter Selector: its filtering rules are mainly embodied in the child elements or textual content that it contains.

Content Filter Selector

Selector Selector	Describe	Return	Example
: Contains (text)	Select the text content element that contains text	Collection elements	$ ("Div:contains (' student ')") Select all DIV elements that contain "students" in the text content
: Empty	Select an element that does not contain child elements or empty content	Collection elements	$ ("Div:empty") Select a DIV element that does not contain child elements or content is empty
: Has (selector)	Select the element that contains the matching selector element	Collection elements	$ ("Div:has (P)") select the div element that contains the P element
:p arent	Select elements that contain child elements or text	Collection elements	$ ("div:parent") Select a DIV element that contains child elements or text content that is not empty

The visibility filter selector selects elements based on the visibility and invisibility of the elements.

Visibility Filter Selector

Selector Selector	Describe	Return	Example
: Hidden	Select all hidden elements	Collection elements	$ (": Hidden") Select all hidden elements of the page PS: Hidden elements include style properties display for none,visibility as hidden and hidden form fields
: Visible	Select all visible elements	Collection elements	$ ("div:visible") Select all visible div elements

The attribute filter selector selects the appropriate element based on the element attribute

Attribute Filter Selector

Filter filters	Describe	Return	Example
[Attribute]	Select the element that contains the attribute	Collection elements	$ ("Div[id]") Select the div element that contains the id attribute
[Attribute=value]	Select an element with an attribute value equal to value	Collection elements	$ ("div[id= ' Div1 ')" Select the div element with the id attribute value equal to Div1
[Attribute!=value]	Select an element with a property value that is not equal to value	Collection elements	$ ("div[id!= ' Div1 ') Select the value of the id attribute that is not equal to the div1 div element
[Attribute^=value]	Select an element whose property value begins with value	Collection elements	$ ("div[id^= ' Div1 ') select the div element whose id attribute value starts with DIV1
[Attribute$=value]	Select an element with a property value ending with value	Collection elements	$ ("div[id$= ' Div1 ') Select the id attribute value to duv1 the end of the DIV element
[Attribute*=value]	Select attribute value contains the element of value	Collection elements	$ ("div[id*= ' Div1 ') Select id attribute value contains div1 div element
[Attribute|=value]	Select the element with the property value as value or prefixed with value (the string followed by a hyphen '-')	Collection elements	$ ("div[id|= ' Div1 ') Select a DIV element with an id attribute value of div1 or a DIV1 prefix
[Attribute~=value]	Select an element with a space-delimited value that contains a given value	Collection elements	$ ("div[id~= ' Div1 ') Select the id attribute with a space-delimited value equal to the Div1 div element
[Attribute1] [Attribute2] [Attribute3]	Combine the attribute selector with a composite attribute selector to satisfy multiple conditions, without selecting one at a time to narrow down the selection	Collection elements	$ ("div[id][title= ' Hello ')") Select the div element that contains the id attribute and the title's property value is Hello

A child element filter selector is a pin that is filtered by all parent elements, not just one of the specified parent elements

child element Filter Selector

Selector Selector	Describe	Return	Example
: Nth-child (Index/even/odd/equation)	Select the child element of index next to the parent element or the odd and even element (index starts at 1)	Collection elements	: EQ (index) matches only one element, and: Nth-child (index) matches the child element of index value in each parent element, and the former index starts at 0 and the index starts at 1.
: First-child	Select the first child element of each parent element	Collection elements	: First returns only a single element, whereas: First-child will return one element in each parent element $ ("ul li:last-child") Select the first element in each UL
: Last-child	Select the last child element of each parent element	Collection elements	: Last only returns an element, and: Last-child will return the final element in each parent element $ ("ul li:first-child") Select the last element in each UL
: Only-child	If an element is the only child of its parent element, it will be matched, otherwise it will not be matched	Collection elements	$ ("ul Li:only-child") Gets the only child element in UL Li

The Form Element property filter, which filters the selected form elements.

Form Object property Filter

Selector Selector	Describe	Return	Example
: Enabled	Select all of the available form elements	Collection elements	$ ("#form1: Enabled") Select all the available elements in the Id=form1 's form
:d isabled	Select all form elements that are not available	Collection elements	$ ("#form1:d isabled") Select all the unavailable elements in the Id=form1 's form
: Checked	Select all selected elements (including a radio box, check box)	Collection elements	$ ("#input: Checked") Select all selected input elements
: Selected	Select All selected option elements (drop-down list)	Collection elements	$ ("Select option:selected") Select I all selected option elements

At this point, all filter selectors are introduced, the last selector-----form selector

3. Form Selector

The form selector makes it easy to get to one or some type of element

form selector

Selector Selector	Describe	Return	Example
: input	Selects all input, textarea, button, select elements	Collection elements	$ (": Input") Select all input, textarea, select, button elements
: Text	Select all single-line text boxes	Collection elements	$ (": Text") Select all single-line text boxes
:p Assword	Select all the password boxes	Collection elements	$ (":p assword") Select all the password boxes
: Radio	Select all the radio boxes	Collection elements	$ (": Radio") Select all the radio boxes
: checkbox	Select all the check boxes	Collection elements	$ (": CheckBox") Select all the check boxes
: Submit	Select all the Submit buttons	Collection elements	$ (": Submit") Select all the Submit buttons
: Image	Select all the picture buttons	Collection elements	$ (": Image") Select all the picture buttons
: RESET	Select all reset Buttons	Collection elements	$ (": Reset") Select all reset Buttons
: button	Select all the buttons	Collection elements	$ (": Button") Select all the buttons
: File	Select all the upload fields	Collection elements	$ (": File") Select the upload domain to be searched
: Hidden	Select all hidden fields	Collection elements	$ (": Hidden") Select all hidden fields (this is already mentioned in the previous invisibility filter)

The above is the jquery all the selectors and the use of the method, so many selectors, to be able to understand every one, the key is still in practice.

The jquery selector of the sharp jquery learning note