Summary of common elements finding methods in jquery

Source: Internet
Author: User
Tags prev

$ ("#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") selects all div tag elements and returns an array of DIV elements
$ (". MyClass") Select all elements of CSS that use the MyClass class
$ ("*") selects all the elements in the document and can be selected in a variety of ways: for example $ ("#myELement, Div,.myclass")

Cascade selector:
$ ("form input") selects all the input elements in the form element
$ ("#main > *") Select all child elements with an ID value of main
$ ("label + input") selects all of the next INPUT element nodes of the label element, and the test selector returns all input label elements that follow the label tag directly followed by an input tag
$ ("#prev ~ div") sibling selector, which returns all the div tags that belong to the same parent element for the label element with ID prev

Basic Filter Selector:
$ ("Tr:first") selects the first of all TR elements
$ ("Tr:last") selects 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 number 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)") selects all TD elements in the TD element with an ordinal less than 4
$ (": Header")
$ ("div:animated")

Content Filter Selector:
$ ("Div:contains (' John ')") Select all the elements in the div that contain the John text
$ ("Td:empty") Select all the arrays of TD elements that are empty (nor include text nodes)
$ ("Div:has (P)") Select all DIV elements that contain p tags
$ ("td:parent") Select all the 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 that contain the id attribute
$ ("input[name= ' newsletter ')" selects all the name attributes equal to the INPUT element of ' newsletter '
$ ("input[name!= ' newsletter ')" selects all the name attribute 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 attributes to end with ' news ' INPUT element
$ ("input[name*= ' Man ')") Select all the name attributes that contain the ' news ' INPUT element
$ ("input[id][name$= ' Man ')") can use multiple attributes for federated selection, which is to get all the elements that contain the id attribute and then the property 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")     Returns an array of the last nodes of all DIV elements
$ ("div button:only-child")   Returns an array of all the child nodes of only one child node in all Div

Form Element selector:
$ (": Input")        Select all 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 radio input elements
$ (": CheckBox ")     Select all of the checkbox input elements
$ (": Submit ")       Select all the Submit INPUT element
$ (": Image")        Select all of 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 operable table cells
$ (":d isabled")   Select all non-actionable form elements
$ (": Checked")    Select all checked table cells
$ ("select Option:selected") to select the element selected in all of the child elements of select
The
selects the text value of the previous TD of the input text box named S_03_22″
$ ("input[@name =s_03_22]"). Parent (). Prev (). Text ()
name starts with "S_" , and not the
$ ("input[@name ^= ' s_ ') ' That ends with" _r ". Not (" [@name $= ' _r '] ")
A value of radio_01 selected named Radio
$ (" input[@name = radio_01][@checked]). Val ();

$ ("a B") finds all child nodes under the a element, including the non-direct child node
$ ("a>b") finds the immediate child node under the A element
$ ("a+b") finds the sibling node behind the a element, including the non-direct child node
$ ("a~b") Finds the sibling node after the a element, not including the non-direct child node

1. $ ("a B") finds 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:
/ strong>$ ("form input")
Result:
[<input name= "name"/> <input name= "Newsletter"/>]

2. $ ("A>b") finds the direct child nodes 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") finds the sibling node behind the A element, including the non-direct child node
Example: 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:
/strong>$ ("label + input")
Result:
[<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>
<input name= "Name"/>
<fieldset>
<label>Newsletter:</label>
<input name= "Newsletter"/>
</fieldset>
</form>
<input name= "None"/>
JQuery Code:
$ ("form ~ input")
Results:
[<input name= "None"/>]

Summary of common elements finding methods in jquery

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.