Learning jQuery from scratch (2)-jQuery Selector

Document directory

• 4. Content filter Content Filters
• 8. Form selector Forms

1. Basic Selector Basics

Name	Description	Example
# Id	Select by element Id	$ ("DivId") Select the element whose ID is divId
Element	Select Based on the element name,	$ ("A") select all <a> Elements
. Class	Select Based on 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	Several selectors can be separated by commas (,) and then combined into a selector string. The matching contents of these selectors are selected at the same time.	$ ("# DivId, a,. bgRed ")

 

[Learning suggestions]:Remember the basic selector for the moment. You can jump directly to the next section."JQuery selector lab"Perform hands-on exercises, and then come back to learn all the selectors, or use them to query them again.

2. Hierarchical Selector Hierarchy

Name	Description	Example
Ancestor descendant	Use form input to select all input elements in form. That is, the ancestor (ancestor) is from and the descendant (descendant) is input.	$ (". BgRed div") select all <div> elements in the element whose CSS class is bgRed.
Parent> child	If you select parent, the child. child node must be included in the parent and the parent class must be a parent element.	$ (". MyList> li") Select the CSS class as the direct subnode <li> 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.	$ ("# Hibiscuus + img") Select the img object after the id is the hibiscuus element.
Prev ~ Siblings	Select the elements filtered by siblings after prev. Note: siblings is a filter.	$ ("# SomeDiv ~ [Title] ") select all the elements with the title attribute after the object whose id is 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 element found	Find the last row of the table: $ ("tr: last ")
: Not (selector)	Removes all elements that match the given selector.	Find all unselected input elements: $ ("input: not (: checked )")
: Even	Matches all elements with an even index value and starts counting from 0.	Search for rows 1, 3, 5... of a table: $ ("tr: even ")
: Odd	Matches all elements with odd index values and starts counting from 0.	Search for rows 2, 4, and 6 of a table: $ ("tr: odd ")
: Eq (index)	Matches an element with a given index value. Note: index starts counting from 0.	Find the second row: $ ("tr: eq (1 )")
: Gt (index)	Match All elements greater than the given index value Note: index starts counting from 0.	Find the third row, that is, the index value is 1 and 2, which is greater than 0: $ ("tr: gt (0 )")
: Lt (index)	Select elements whose index is 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 labels such as h1, h2, and h3.	Add the background color to all titles on the page: $ (": header" ).css ("background", "# EEE ");
: Animated	Match all the elements that are executing the animation effect	Only one animation effect is executed for elements that do not execute the animation effect: $ ("# Run"). click (function (){ $ ("Div: not (: animated)"). animate ({left: "+ = 20"}, 1000 ); });

 

4. Content filter Content Filters

Name	Description	Example
: Contains (text)	Match the elements that contain the given text	Find all div elements containing "John": $ ("div: contains ('john ')")
: Empty	Match All null 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 the element containing the element matched by the selector.	Add a text class to all div elements containing p: $ ("div: has (p)"). addClass ("test ");
: Parent	Match an element containing child elements or text	Find all td elements containing child elements or text: $ ("td: parent ")

 

5. Visibility Filter Visibility Filters

Name	Description	Example
: Hidden	Match all invisible elements Note: In Version 1.3.2, hidden matches its own or parent class elements that do not occupy space in the document. If the CSS visibility attribute is used so that it is not displayed but occupies space, hidden is not entered.	Find all invisible tr elements: $ ("tr: hidden ")
: Visible	Match all visible elements	Find all visible tr elements: $ ("tr: visible ")

6. Attribute Filter Attribute Filters

Name	Description	Example
[Attribute]	Matches the element containing the given attribute.	Find all div elements containing the id attribute: $ ("Div [id]")
[Attribute = value]	Matching a given attribute is an element of a specific value	Find all the input elements whose name attribute is newsletter: $ ("Input [name = 'newsletter ']"). attr ("checked", true );
[Attribute! = Value]	Matching a given attribute is an element that does not contain a specific value	Find all input elements whose name attribute is not newsletter: $ ("Input [name! = 'Newsletter '] "). attr (" checked ", true );
[Attribute ^ = value]	Matching a given attribute is an element starting with some values	$ ("Input [name ^ = 'News']")
[Attribute $ = value]	Matches the given attribute with elements ending with some values.	Find all input elements whose names end with 'letter: $ ("Input [name $ = 'Letter ']")
[Attribute * = value]	Matching a given property is an element that contains certain values	Find all input elements whose names contain 'man: $ ("Input [name * = 'man']")
[AttributeFilter1] [attributeFilter2] [attributeFilterN]	Composite attribute selector, which must meet multiple conditions at the same time.	Find all the attributes with id and whose name attributes end with man: $ ("Input [id] [name $ = 'man']")

7. subelement FilterChild Filters

Name	Description	Example
: Nth-child (index/even/odd/equation)	Match the nth child or parity element under the parent Element ': Eq (index)' matches only one element, and this matches the child element for each parent element. : Nth-child starts from 1, while: eq () is counted 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)	Search for 2nd li entries in each ul: $ ("Ul li: nth-child (2 )")
: First-child	Match the first child element ': First' matches only one element, and this selector matches one child element for each parent element.	Find the first li in each ul: $ ("Ul li: first-child ")
: Last-child	Match the last child element ': La' matches only one element, and this selector matches one child element for each parent element.	Find 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.	In ul, find the li that is the only sub-element: $ ("Ul li: only-child ")

8. Form selector Forms

Name	Description	Explanation
: Input	Match All input, textarea, select, And button Elements	Find all input elements: $ (": Input ")
: Text	Match all text boxes	Find all text boxes: $ (": Text ")
: Password	Match all password boxes	Find all password boxes: $ (": Password ")
: Radio	Match All radio buttons	Find all radio buttons
: Checkbox	Match All check boxes	Find all check boxes: $ (": Checkbox ")
: Submit	Match all submit buttons	Find all submit buttons: $ (": Submit ")
: Image	Match All image Domains	Match All image domains: $ (": Image ")
: Reset	Match All reset buttons	Find all reset buttons: $ (": Reset ")
: Button	Match All buttons	Find all buttons: $ (": Button ")
: File	Match All file Domains	Find all file domains: $ (": File ")

9. Form FilterForm Filters

Name	Description	Explanation
: Enabled	Match all available elements	Find all available input elements: $ ("Input: enabled ")
: Disabled	Match All unavailable Elements	Find all the unavailable input elements: $ ("Input: disabled ")
: Checked	Match All selected elements (check box, single choice, etc., excluding option in select)	Find all selected check box elements: $ ("Input: checked ")
: Selected	Match All selected option Elements	Find all selected option elements: $ ("Select option: selected ")

 

 

Transferred from: shttp: // www.cnblogs.com/zhangziqiu/