jquery Selector Comprehensive Summary

Source: Internet
Author: User
Tags prev reset

  This article is mainly on the jquery selector for a comprehensive summary of the introduction, the need for friends can come to the reference, I hope to help you.

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   $ ("*")             Selector All elements of a file can be selected in a variety of ways: $ ("#myELement, Div,.myclass")     CASCADE selector:   $ ("form input")     & nbsp   Select input elements in all form elements   $ ("#main > *")           Select all of the child elements of Main,   $ ("Label + Input ")     selects the next INPUT element node for all the label elements, and the test selector returns all input tag elements (" #prev ~ div ") directly behind the label label with an input label. nbsp     Sibling Selector, which returns all the div tags that belong to the same parent element for the tag element with ID prev     basic Filter selector:   $ ("Tr:first")     & nbsp         Select all TR elements of the first   $ ("Tr:last")                 Select all TR The last   $ ("Input:not (: Checked) +" of the elementSpan ")       filter out: All input elements of checked selector     $ (" Tr:even ")           &NBSP ;   Select the 0,2,4 of all TR elements ... Element (Note: Since the selected element is an array, the ordinal number is starting at 0)     $ ("tr:odd")                 Select all TR The first 1,3,5 of the elements ... Elements   $ ("Td:eq (2)")             Select all TD elements with serial number 2 of TD element   $ ("TD:GT (4)")   &NBSP ;         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 Filter 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:h As (P) ")         Select all DIV elements with P tags   $ (" td:parent ")           Select all the meta with TD as parent node Prime Group     Visual filter selector:     $ ("Div:hidden")         Select all the hidden divElements   $ ("div:visible")         Select all the visual div elements     attribute filter selector:     $ ("Div[id]") &NB Sp             Select all DIV elements with ID attributes   $ ("input[name= ' newsletter ']")     Select the input element with all name attributes equal to ' newsletter '     $ (' input[name!= ' newsletter ') ' To select all input elements that do not equal ' newsletter ' for the Name property     $ ("input[name^= ' News ']")         Select all the name attributes to the ' news ' opening INPUT element   $ ("input[name$=" News ']         Select all name attributes to ' news ' end of INPUT element   $ ("input[name*= ' Man ']")       &NB Sp   Select all the name attributes containing the ' news ' INPUT element     $ ("input[id][name$= ' Man ')")     can use multiple attributes for joint selection. The selector is to get all the elements that contain the id attribute and then the attributes end 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")           Returns the first child node of all DIV elements Array   $ ("div span:last-child")          Returns an array of the last node of all DIV elements   $ ("div button:only-child")       Returns an array of all the child nodes of only one child node in all Div   & nbsp Form element selector:     $ (": input")                   Select all form input elements, including input, text area, select and button     $ (": Text")                     Select all Text INPUT element   $ (":p assword")           Select all password input elements   $ (": Radio")   &NBS P               Select all radio input elements   $ (": checkbox")         &NBS P   Select all checkbox input elements   $ (": Submit")               Select all submit input Elements &nbsp ; $ (": Image")                 Select all image input elements   $ (": Reset")     &N Bsp             Select all reset input elements   $ (": Button")                Select All button input elements   $ (": File")                     Select all fil E INPUT element   $ (": hidden")               Select all type hidden INPUT element or form's hidden field     Form element Filter Selector:     $ (": Enabled")             Select all operable table cells   $ (":d isabled") &nbsp ;           Select all non-operable table cells   $ (": Checked")             Select all check Ed's table cell   $ ("select Option:selected") selects all of the selected child elements        to select a name named "S_03_22″" The text value of the last TD in the input text box   $ ("input[@ name =s_03_22]"). Parent (). Prev (). Text ()     First name begins with "S_" and not End with "_r"   $ ("input[@ name ^= ' S_ '"). Not ("[@ name $= ' _r ']")     a radio_01 named Radio the selected value   $ ("input[@ name =radio _01][@checked] "). Val ();        $ ("A B") Find all child nodes under a element, including non-direct child node   $ ("a>b") Find the direct child node under a element   $ ("a+b") to find the sibling node behind the A element, Include non-direct sub-sectionsPoint   $ ("a~b") looks for sibling nodes behind a element, excluding indirect child nodes     1. $ ("A B") Look for all child nodes under a element, including indirect subnodes      examples: Find all input elements in the form     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"/&gt, <input name= "newsletter"/>]     2. $ ("a>b") Look for direct child nodes     examples Below a element: matches all the child input elements in the form.     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")     Result:   [<i Nput name= "name"/>]     3. $ ("a+b") looking for sibling nodes behind a element, including indirect subnodes     Examples: matching all input elements following label     HTML code:   <form>  <label>Name:</label>  <input name= "Name"/>  <fieldset>        & lt;label>newsletter:</label>        <input name= "Newsletter"/>  </ fieldset>  </form>  <input name= "None"/>     jQuery code:   $ ("label + input") &nbs P   Results:   [<input name= "name"/&gt, <input name= "newsletter"/>]     4. $ ("a~b") finds sibling nodes behind a element, excluding indirect subnodes     Example: Find all input elements with form peers     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")     Result:   [<in Put 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.