jquery selector using the detailed

Source: Internet
Author: User
Tags prev reset

 jquery is a very NB of JS Integration works, with its concise syntax and cross-platform compatibility advantages, here to introduce the next jquery in the selector, do not understand the selector or use a bad selector, it is impossible to have a very NB of jquery skills

The JQuery selector is incredibly powerful, and here's a quick summary of the common element lookup methods     $ ("#myELement")     Select the element with the ID value equal to MyElement, ID value cannot be repeated in the document only one ID value is myelement so the only element that gets is   $ ("div")           Select all div tag elements, return the DIV element array   $ (". MyClass")       Select all elements of CSS with MyClass class   $ ("*")             Select document All the elements in, you can use a variety of options for joint selection: for example $ ("#myELement, Div,.myclass")     CASCADE selector:  $ ("form input")         Select input elements in all form elements   $ ("#main > *")           Select all the child elements of main of the ID value of   $ ("L Abel + input ")     Select the next INPUT element node for all the label elements, and the test selector returns all the input tag elements immediately following the label tag with an input label   $ (" #prev ~ Div ")       Sibling selector, which returns all the div tags that belong to the same parent element of the tag element for ID prev     basic filter selector:  $ (" Tr:first ")               Select all TR elements first   $ ("Tr:last")                 Select the last   $ ("Input:not (: Checked) + span")    for all TR elements   Filter out: All input elements of checked selector     $ ("Tr:even")               Select all of the TR elements of the No. 0 , 2,4 ... Element (Note: Since the selected element is an array, the ordinal number is starting at 0)     $ ("tr:odd")                 Select the first 1,3,5 of all TR elements ... Elements   $ ("Td:eq (2)")             Select the TD element with serial number 2 in all TD elements   $ ("TD:GT (4)")             Select all TD elements with serial number greater than 4 in TD element   $ ("Td:ll (4)")               Select TD meta All TD elements with ordinal less than 4   $ (": Header")   $ ("div:animated")   content filtering selector:    $ ("Div:contains (' John ')") Select all elements of the div containing John text   $ ("Td:empty")           Select all of the TD elements that are empty (also excluding text nodes)   $ ("Div:has" ( P) ")         Select all the DIV elements with P tags   $ (" td:parent ")           Select all elements with TD as parent node   Visual Filter Selector:    $ ("Div:hidden")         Select all hidden div elements   $ ("div:visible")         Select all the visual div elements   attributes filter selector:    $ ("Div[id]")               Select all DIV elements with ID attributes   $ ("input[name= ' newsletter ')")     Select all the name attributes equal to ' newsletter ' INPUT element     $ ( "Input[name!= ' newsletter '") Select all the name attributes that are not equal to ' newsletter ' input     $ ("input[name^= ' News")         Select all the name attributes to "news" for input elements   $ ("input[name$= ' News")         Select all name attributes with ' News ' end of INPUT element   $ ("input[name*= ' Man ']")           Select all name attributes containing ' news ' INPUT element     $ ("input[id][name$= ' Man ')")     can use multiple properties for joint selection, which is to get all elements that have the id attribute and then the attribute ends with a 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")           Returns an array of the first child nodes of all DIV elements   $ ("Div span: Last-child ")           return all DIV elements to the last node of the array   $ (" div button:only-child ")      Returns an array of all the child nodes of only one child node in all div     FORM element selector:    $ (": input")         &NBS P         Select all form input elements, including input, textarea, select and button    $ (": Text")       &NB Sp             Select all text input elements   $ (":p assword")           Select all P Assword INPUT element   $ (": Radio")                   Select all radio input elements   $ (": checkbox")             Select all checkbox input elements   $ (": Submit")       &NBS P       Select all submit input elements   $ (": Image")                 Select all IM Age INPUT Element   $ (": Reset")                   Select all reset input elements   $ (": Button ")                 Select All button input elements   $ (": File ")           &nbsp         Select all file input elements   $ (": hidden")               Select all type H Idden INPUT element or form hidden field     FORM element Filter Selector:    $ (": Enabled")             Select all the available Table cell   $ (":d isabled")             Select all non-operable table cells   $ (": Checked")     &NB Sp       Select all of the checked table cells   $ ("Select Option:selected") Select all of the selected child elements in the selected element     & nbsp;    Select the last TD's text value $ ("input[@ name =s_03_22]" for the input text box with the name "S_03_22″". Parent (). Prev (). Text ()     The name begins with "S_" and is not the $ ("input[@ name ^= ' S_ ')" That ends with "_r". Not ("[@ name $= ' _r ']")     a named Radio_ Radio of 01 The selected value $ ("input[@ name =radio_01][@checked]"). Val ();        $ ("A B") looks up all the child nodes under the A element, Include the indirect child node $ ("A>b") to find the direct child node below the A element $ ("a+b") to find the sibling node behind the A element, includes the indirect child node $ ("A~b") to find the sibling node behind the a element, excluding the indirect child nodes     1. $ ("A B") Look for all the child nodes below the A element, including the indirect subnodes     Example: Find all the formsInput elements     HTML code:    <form> <label>Name:</label> <input name= "Name"/> ;fieldset>       <label>Newsletter:</label>       <input name= " Newsletter "/> </fieldset> </form> <input name=" None "/>  jQuery code:    $ (" form input ")   results:    [<input name=" name "/> <input name=" newsletter "/>]    2. $ ("a>b") find the direct subnodes   Example: matching all the child input elements in a form.     HTML code:      code is as follows: <form> <label>Name:</label> <input name= "Name"/ > <fieldset>       <label>Newsletter:</label>       <input name= Newsletter "/> </fieldset> </form> <input name=" None "/>      jQuery code:      Code as follows:  $ ("form > Input")       results:    code as follows: [<input name= "name"/>]   & nbsp3. $ ("a+b") finds sibling nodes behind a element, including indirect subnodes   Examples: matches all input elements following the label     HTML code:  code as follows: <form> <la bel>name:</label> <input name= "Name"/> <fieldset>       <label>newsletter: </label>       <input name= "newsletter"/> </fieldset> </form> <input name= " None "/>      jQuery code:      code as follows: $ (" label + input ")       Results:  &nbsp ; The   code is as follows: [<input name= "name"/&gt, <input name= "newsletter"/>]      4. $ ("a~b") look for sibling nodes behind a element, excluding indirect subnodes   examples: Find all input elements     HTML code with form peers:    code as follows: <form> < label>name:</label> <input name= "Name"/> <fieldset>       <label>newsletter :</label>       <input name= "newsletter"/> </fieldset> </form> <input name= " None "/>      jQuery code:        Code as follows: $ ("form ~ input")       results:      code as follows: [<input name= "None"/>] 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.