jquery Element Lookup method

Source: Internet
Author: User

Summary of Common elements finding methods in jquery

$ ("#myELement") select an element with an ID value equal to myelement, the ID value cannot be duplicated in the document only one ID value is myelement so get the unique element

$ ("div")            Select all div tag elements, return the div element array  $ (". MyClass")       Select all elements of CSS using the MyClass class  $ ("*")               Select all the elements in the document, you can use a variety of selection methods for federated selection: for example $ ("#myELement, Div,.myclass")    Cascade selector:  $ ("form input")          Select the INPUT element  $ ("#main > *") in all form elements           Select all child elements of the ID value of main  $ ("label + input")       selects the next INPUT element node of all the label elements, and the test selector returns all input tag elements that follow the label tag directly followed by a  $ ("#prev ~ div")         Fellow selector, the selector returns all the DIV tags that belong to the same parent element for the label element with ID prev    basic filter selector:  $ ("tr: First ")                select  $ for all TR elements ("Tr:last")                 Select the last  $ of all TR elements ("inPut:not (: Checked) + span ")     filter out: All input elements of checked selector   $ (" Tr:even ")                 Select all TR elements of 0,2,4 ... Element (Note: Since multiple elements are selected as an array, the sequence number is starting from 0)   $ ("tr:odd")                  Select all TR elements of 1,3,5 ... Elements of  $ ("Td:eq (2)")              Select the TD element with the ordinal 2 in all TD elements  $ ("TD:GT (4)")               Select all TD elements in the TD element with an ordinal greater than 4  $ ("Td:ll (4)")                Select all TD elements in the TD element with an ordinal less than 4  $ (": Header")  $ ("div:animated")   Content Filter Selector:   $ ("DIV: Contains (' John ') ") Select the element  $ (" Td:empty ") that contains the John text in all div             Select all the array  $ ("Div:has (P)") of TD elements that are empty (nor include text nodes)         SelectAll DIV elements containing the P tag  $ ("Td:parent")           Select all element array with TD as parent node   Visual Filter Selector:   $ ("Div:hidden")         Select all the hidden div elements  $ ("DIV: Visible ")         Select all of the visual div elements   attribute filter selector:   $ (" Div[id] ")                Select all DIV elements with id attribute  $ ("Input[name=" Newsletter '] ")     Select all the name attribute equals ' newsletter ' INPUT element   $ (" input[name!= ' newsletter '] ") Select all the name attribute is not equal to ' newsletter ' INPUT element   $ ("input[name^= ' News ']")           Select all the name attributes to start with ' news ' 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 ')")     Multiple properties can be used for federated selection, and the selector is to get all the containedThe id attribute and then the attribute with the man end element    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")            Returns an array of the last nodes of all DIV elements  $ ("div button:only-child")        Returns an array of all child nodes with only one child node in all div    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 password INPUT element  $ (": Radio")                     Select all radio input elements  $ (": checkbox")              Select all checkbox INPUT Element  $ (": Submit")                 Select all the Submit input elements  $ (": Image")                   Select all the image input elements  $ (": Reset")                     Select all Reset INPUT element  $ (": 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 the operable table cell  $ (": Disabled ")             Select all non-operable table cell  $ (": Checked ")             Select all of the checked table cell  $ ("Select option: Selected ") selects all the elements of the selected in the child element of the Select

Select the text value of the previous TD of the input text box named "S_03_22″" ("input[@name =s_03_22]"). Parent (). Prev (). Text ()

The name begins with "S_" and is not a $ ("input[@name ^= ' S_ ')" ending with "_r". Not ("[@name $= ' _r ']")

A radio named RADIO_01 has the value $ ("input[@name =radio_01][@checked]") selected. Val ();

$ ("a B") finds all child nodes under the a element, including the non-direct child node $ ("A>b") looking for a element below the direct child node $ ("A+b") finds the sibling node behind the a element, including the non-direct child node $ ("A~b") looking for the sibling node behind the A element, Do not include 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><input name= "Name"/><fieldset> <label>Newsletter: </label> <input name= "Newsletter"/></fieldset></form><input name= "None"/> JQuery code:

$ ("form input") Result:

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

2. $ ("a>b") find the direct sub-node below the A element example: 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") Results:

[<input name= "name"/>]

3. $ ("a+b") find the sibling node behind the A element, including an example of a non-direct child node: matches all input elements following the label

HTML Code:

<form><label>name:</label><input name= "Name"/><fieldset> <label>Newsletter: </label> <input name= "Newsletter"/></fieldset></form><input name= "None"/> JQuery code:

$ ("label + input") Result:

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

4. $ ("a~b") find the sibling node behind the A element, excluding the example of a non-direct child node: 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:

[<input name= "None"/>]

jquery Element Lookup method

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.