jquery Selector Summary

The JQuery selector is incredibly powerful, and the common element lookup method

$("#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 using the MyClass class
$("*")Select all the elements in the document, and you can select them in a variety of ways: for example$("#myELement,div,.myclass")

Cascade selector:

$("form input")Select the input element in all form elements
$("#main > *")Select all child elements with an ID value of main
$("label + input")Selects the next INPUT element node for all the label elements, and the test selector returns all input label elements that follow the label tag directly followed by the input label.
$("#prev ~ div")The 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")Select the first of all TR elements
$("tr:last")Select the last of all TR elements

$("input:not(:checked) + span") //过滤掉：checked的选择器的所有的input元素

$("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:

$("div:contains(‘John‘)")Select all the elements in the div that contain the John text
$("td:empty")Select all an array 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 array of elements with TD as parent node

Visual Filter Selector:

$("div:hidden")Select all of the hidden div elements
$("div:visible")Select all of the visual DIV elements

attribute Filter Selector:

$("div[id]")Select all DIV elements that contain ID attributes
$("input[name=‘newsletter‘]")Select all the name attributes equal to the ' newsletter ' INPUT element
$("input[name!=‘newsletter‘]")Select all the name attribute is not equal to the ' 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*=‘news‘]")Select all the Name property containing the ' news ' INPUT element
$("input[id][name$=‘news‘]")You can use multiple properties for federated selection, which is to get all the elements that contain the id attribute and then the property ends with news

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 that have 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
$(":password") 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 actionable form elements
$(":disabled")Select all of the non-actionable form elements
$(":checked")Select all of the checked form elements
$("select option:selected")Selects all selected elements in the child element of the Select

Cases:
$("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

Example 1: Find all input elements in a form

HTML Code:

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

JQuery Code:

$ ("form input")

Results:

<name= "name"/><name= " Newsletter "/> ]

Example 2: 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:

$ ("form > Input")

Results:

<name= "name"/> ]

Example 3: 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:

$ ("label + input")

Results:

<name= "name"/><name= " Newsletter "/> ]

Example 4: 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:

$ ("form ~ input")

Results:

<name= "None"/> ]

See the Rainbow after the rain

Source: http://www.cnblogs.com/moqiutao/

If you feel that this article is helpful to your study, please support and encourage more.

jquery Selector Summary