JQuery selector Daquan

JQuery selector Daquan

In DOM programming we can only use finite functions to get Dom objects by ID or TagName. In jquery, however, it is quite different, and jquery provides an exceptionally powerful selector to help us get the objects on the page and return the objects as a jquery wrapper set. This paper mainly introduces and classifies the commonly used jQuery selectors.

JQuery selectors can be broadly divided into 4 categories: basic selector, hierarchy selector, filter selector, and form selector. Filter selectors can be divided into: Simple filter selector, Content filter selector, visibility filter selector, attribute filter selector, child element filter Selector, Form object property filter Selector.

Basic selector:

• $ ("#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
• $ ("*") Select all the elements in the document
• There are multiple options for joint selection: 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 the next INPUT element node for all the label elements
• The test selector returns all input label elements that follow a label tag directly following the label label
• $ ("#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") 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 that have 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 password input elements
• $ (": Radio") Select all 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 the actionable form elements
• $ (":d isabled") Select all 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

This article transferred from: http://www.cnblogs.com/oooweb/p/jquery-selector-handbook.html

JQuery selector Daquan