JQuery is a very NB-integrated js file. With its concise syntax and cross-platform compatibility advantages, we will introduce you to the selectors in JQuery, which do not understand the selectors or are difficult to use, it is impossible to have a very powerful JQuery selector with NB skills. Here we will briefly summarize the commonly used element search methods.
$ ("# MyELement") Select the element whose id value is equal to myElement. The id value cannot be repeated. Only one id value in the document is myElement, so the result is a unique element.
$ ("P") select all p tag elements and return an array of p elements.
$ (". MyClass") select all elements of css using the myClass class
$ ("*") Select all the elements in the Document. You can use multiple options for joint selection: for example, $ ("# myELement, p,. myclass ")
Cascade selector:
$ ("Form input") Select the input element from all form elements
$ ("# Main> *") select all child elements whose id is main.
$ ("Label + input") Select the next input element node of all label elements. The result returned by the test selector is that the label is directly followed by all input tag elements of an input tag.
$ ("# Prev ~ P ") compatriot selector. This selector returns all the p tags of the Tag Element whose id is prev that belong to the same parent element.
Basic filter selector:
$ ("Tr: first") Select the first element of all tr
$ ("Tr: last") Select the last one of all tr Elements
$ ("Input: not (: checked) + span ")
Filter out all input elements of the checked selector.
$ ("Tr: even") Select the 0, 2, 4 ...... (Note: Because the selected multiple elements are arrays, the serial number starts from 0)
$ ("Tr: odd") select elements 1, 3, 5... of all tr elements.
$ ("Td: eq (2)") Select the td element whose Sn is 2 from all td elements.
$ ("Td: gt (4)") Select All td elements whose serial number is greater than 4 in the td Element
$ ("Td: ll (4)") Select All td elements whose serial number is less than 4 in the td Element
$ (": Header ")
$ ("P: animated ")
Content Filter selector:
$ ("P: contains ('john')") select all p elements containing John text
$ ("Td: empty") Select an array of all td elements that are empty (or contain text nodes)
$ ("P: has (p)") select all p elements containing p tags
$ ("Td: parent") Select All element arrays with td as the parent node
Visual filter selector:
$ ("P: hidden") select all hidden p elements.
$ ("P: visible") Select All visualized p elements
Attribute filter selector:
$ ("P [id]") select all p elements containing the id attribute
$ ("Input [name = 'newsletter ']") Select the input element whose name attribute is equal to 'newsletter'.
$ ("Input [name! = 'Newsletter'] ") Select the input element whose name attribute is not equal to 'newsletter '.
$ ("Input [name ^ = 'News']") select all input elements whose name attributes start with 'News '.
$ ("Input [name $ = 'News']") select all input elements whose name attributes end with 'News '.
$ ("Input [name * = 'man']") select all input elements whose name attribute contains 'new '.
$ ("Input [id] [name $ = 'man']") multiple attributes can be used for joint selection, this selector is used to obtain all elements that contain the id attribute and end with man.
Child element filter selector:
$ ("Ul li: nth-child (2)"), $ ("ul li: nth-child (odd)"), $ ("ul li: nth-child (3n + 1 )")
$ ("P span: first-child") returns the array of the first subnode of all p elements.
$ ("P span: last-child") returns the array of the last node of all p elements.
$ ("P button: only-child") returns the array of all child nodes with only one subnode in all p
Form element selector:
$ (": Input") select all form input elements, including input, textarea, select, And button
$ (": Text") select all text input Elements
$ (": Password") select all password input Elements
$ (": Radio") select all radio input Elements
$ (": Checkbox") select all the checkbox input Elements
$ (": Submit") select all submit input Elements
$ (": Image") select all image input Elements
$ (": Reset") select all reset input Elements
$ (": Button") select all button input Elements
$ (": File") select all file input Elements
$ (": Hidden") Select the hidden fields of all input elements or forms of the hidden type.
Form element filter selector:
$ (": Enabled") Select All operable form elements
$ (": Disabled") Select All unoperable form elements
$ (": Checked") select all checked form elements
$ ("Select option: selected") select the selected element from all select sub-elements.
Select the text value of the previous td in the input text box named "S_03_22 ".
$ ("Input [@ name = S_03_22]"). parent (). prev (). text ()
The name starts with "S _" and does not end with "_ R"
$ ("Input [@ name ^ ='s _ ']"). not ("[@ name $ =' _ R']")
The value of a radio_01 radio.
$ ("Input [@ name = radio_01] [@ checked]"). val ();
$ ("A B") searches for all subnodes under Element A, including non-direct subnodes.
$ ("A> B") Find the direct subnode under Element
$ ("A + B") searches for the sibling nodes behind Element A, including non-direct subnodes.
$ ("~ B ") Find the sibling nodes behind Element A, excluding non-direct subnodes.
1. $ ("a B") searches for all subnodes under Element A, including non-direct subnodes.
Example: Find all input elements in the form
HTML code:
JQuery code:
$ ("Form input ")
Result:
[ , ]
2. $ ("A> B") Find the direct subnode under Element
Example: match all the child input elements in the form.
HTML code:
The Code is as follows:
JQuery code:
The Code is as follows:
$ ("Form> input ")
Result:
The Code is as follows:
[]
3. $ ("A + B") searches for the sibling nodes behind Element A, including non-direct subnodes.
Example: match all input elements following the label
HTML code:
The Code is as follows:
JQuery code:
The Code is as follows:
$ ("Label + input ")
Result:
The Code is as follows:
[,]
4. $ ("~ B ") Find the sibling nodes behind Element A, excluding non-direct subnodes.
Example: Find all input elements of the same generation as the form
HTML code:
The Code is as follows:
JQuery code:
The Code is as follows:
$ ("Form ~ Input ")
Result:
The Code is as follows:
[]
