jquery selector summary [go]

Original: http://www.cnblogs.com/onlys/articles/jQuery.html

The JQuery selector is incredibly powerful, and here's a simple summary of common element lookup methods

$ ("#myELement")    //$ ("div")           //$ (". MyClass")      //  $("*")             //

Cascade selector:

$ ("form input")/         /$ ("#main > *")          //$ ("label + input")/      / $ ("#prev ~ div")//         

Basic Filter Selector:

$ ("Tr:first")//Select the first of all TR elements$ ("Tr:last")//Select the last of all TR elements$ ("Input:not (: Checked) + span")//filter out: All input elements of the checked selector$("Tr:even")//Select all of the TR elements of the section 0,2,4 ... Element (Note: The sequence number starts at 0 because the selected number of elements is an array.)$("Tr:odd")//Select all of the TR elements of the section 1,3,5 ... An element$ ("Td:eq (2)")//Select the TD element with the ordinal 2 in all TD elements$ ("TD:GT (4)")//selects all TD elements in the TD element with an ordinal greater than 4$ ("Td:ll (4)")//selects all TD elements in the TD element with an ordinal less than 4$ (": Header") $("Div:animated")

Content Filter Selector:

$ ("td:empty")//$ ("Div:has (P)")//$ ("TD:                          Parent ")            //

Visual Filter Selector:

$ ("Div:hidden")        //$ ("div:visible")/         /

Attribute Filter Selector:

 $ ("Div[id]") //  Select all DIV elements that contain the id attribute $ ("input[name= ' newsletter ')") //  Select all the name attribute equals ' newsletter ' of the INPUT element  $ ("input[name!= ' Newsletter '") // Span style= "color: #008000;" > Select all the name attribute is not equal to ' newsletter ' INPUT element  $ ("input[name^= ' News ']") //  Select all the name attribute with ' news ' beginning with the INPUT element  $ ("input[name$= ' News '") //  Select all the Name property with ' News ' to end the INPUT element  $ ("input[name*= ' Man ']") //  Select all the Name property containing the ' news ' INPUT element  $ ("input[id][name$= ' Man ']") //  You can use multiple properties for federated selection, which is to get all the elements that have an id attribute and then the property ends with man  

child element Filter Selector:

$ ("UL Li:nth-child (2)"), $ ("ul Li:nth-child (Odd)"), $ ("ul Li:nth-child (3n + 1)") $ ("div span:first-child")          //$ ("div span:last-child")           //  $ ("div button:only-child")       //

Form element selector:

$ (": input")//Select all of the form input elements, including input, textarea, select, and button$ (": Text")//Select all text input elements$ (":p Assword")//Select all the password input elements$ (": Radio")//Select all the radio input elements$ (": checkbox")//Select all the checkbox input elements$ (": Submit")//Select all the submit input elements$ (": Image")//Select all the image input elements$ (": Reset")//Select all the reset input elements$ (": Button")//Select all the button input elements$ (": File")//Select all the file input elements$ (": Hidden")//Select all input elements of type hidden or hidden fields of the form

Form element Filter Selector:

$ (": Enabled")//Select all of the operable table cells$ (":d isabled")//Select all of the non-operable table cells$ (": Checked")//Select all the table cells that are checked$ ("Select Option:selected")//selects all selected elements in the child element of the Select$ ("input[@ name =s_03_22]"). Parent (). Prev (). Text ()//Select the text value of the previous TD for the input text box named "S_03_22″"$ ("input[@ name ^= ' S_ ']"). Not ("[@ name $= ' _r ']")//The name begins with "S_" and is not terminated with "_r"$ ("input[@ name =radio_01][@checked]"). Val ();//a value that is selected by a radio named Radio_01$ ("A B")//finds all child nodes under the a element, including non-direct child nodes$ ("A>b")//find the immediate child nodes below the A element$ ("A+b")//find sibling nodes behind a element, including non-direct child nodes$ ("A~b")//find sibling nodes behind a element, excluding non-direct child nodes

1. $ ("a B") Find all child nodes under the a element, including non-direct child nodes

Example: Find all input elements in the form
HTML Code:

<form><label>Name:</label><inputname= "Name" /><fieldset>      <label>Newsletter:</label>      <inputname= "Newsletter" /></fieldset></form><inputname= "None" /> 

JQuery Code:

Results:

[<input name="name" />, <input name="newsletter"

2. $ ("a>b") Find the direct child node under the A element

Example: Match all the child input elements in the form.
HTML Code:

<form><label>Name:</label><inputname= "Name" /><fieldset>      <label>Newsletter:</label>      <inputname= "Newsletter" /></fieldset></form><inputname= "None" /> 

JQuery Code:

Results:

[<input name="name"

3. $ ("a+b") find sibling nodes behind a element, including non-direct child nodes

Example: match all input elements following the label
HTML Code:

<form><label>Name:</label><inputname= "Name" /><fieldset>      <label>Newsletter:</label>      <inputname= "Newsletter" /></fieldset></form><inputname= "None" /> 

JQuery Code:

Results:

[<input name="name" />, <input name="newsletter"

4. $ ("a~b") find sibling nodes behind a element, excluding non-direct child nodes

Example: Find all input elements with form peers
HTML Code:

<form><label>Name:</label><inputname= "Name" /><fieldset>      <label>Newsletter:</label>      <inputname= "Newsletter" /></fieldset></form><inputname= "None" />

JQuery Code:

Results:

[<input name="none" />]

jquery selector summary [go]