Common jQuery selector summary, jquery Selector

Common jQuery selector summary, jquery Selector

In Dom programming, we can only use limited functions to obtain Dom objects by id or TagName. however, jQuery is completely different. jQuery provides an exceptionally powerful selector to help us obtain objects on the page and return objects in the form of jQuery wrapper sets. This article mainly introduces and classifies commonly used jQuery selectors.

JQuery selectors can be divided into four types: Basic selector, hierarchical 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, and form object attribute filter selector.

Basic selector:

$ ("# MyELement") Select the element whose id value is equal to myElement. The id value cannot be repeated. Only one id value in the document is myElement, so the result is a unique element.
$ ("Div") Select All div tag elements and return an array of div elements.
$ (". MyClass") select all elements of css using the myClass class
$ ("*") Select all elements in the document [/code]
You can use multiple options for joint selection: $ ("# myELement, div,. myclass ")

Cascade selector:

$ ("Form input") Select the input element from all form elements
$ ("# Main> *") select all child elements whose id is main.
$ ("Label + input") Select the next input element node of all label elements
The test selector returns all input tag elements directly following the label with an input tag.
$ ("# Prev ~ Div ") compatriot Selector
This selector returns all the div labels of the label element with the id of prev that belong to the same parent element.

Basic filter selector:

$ ("Tr: first") Select the first element of all tr
$ ("Tr: last") Select the last one of all tr Elements
$ ("Input: not (: checked) + span ")
Filter out all input elements of the checked selector.
$ ("Tr: even") Select the 0, 2, 4 ...... (Note: Because the selected multiple elements are arrays, the serial number starts from 0)
$ ("Tr: odd") select elements 1, 3, 5... of all tr elements.
$ ("Td: eq (2)") Select the td element whose Sn is 2 from all td elements.
$ ("Td: gt (4)") Select All td elements whose serial number is greater than 4 in the td Element
$ ("Td: ll (4)") Select All td elements whose serial number is less than 4 in the td Element
$ (": Header ")
$ ("Div: animated ")

Content Filter selector:

$ ("Div: contains ('john')") select all elements whose div contains John text.
$ ("Td: empty") Select an array of all td elements that are empty (or contain text nodes)
$ ("Div: has (p)") Select All div elements containing the p tag
$ ("Td: parent") Select All element arrays with td as the parent node

Visual filter selector:

$ ("Div: hidden") select all the div elements to be hidden.
$ ("Div: visible") Select All visualized div elements

Attribute filter selector:

$ ("Div [id]") Select All div elements containing the id attribute
$ ("Input [name = 'newsletter ']") Select the input element whose name attribute is equal to 'newsletter'.
$ ("Input [name! = 'Newsletter'] ") Select the input element whose name attribute is not equal to 'newsletter '.
$ ("Input [name ^ = 'News']") select all input elements whose name attributes start with 'News '.
$ ("Input [name $ = 'News']") select all input elements whose name attributes end with 'News '.
$ ("Input [name * = 'man']") select all input elements whose name attribute contains 'new '.
$ ("Input [id] [name $ = 'man']") multiple attributes can be used for joint selection, this selector is used to obtain all elements that contain the id attribute and 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 array of the first subnode of all div elements.
$ ("Div span: last-child") returns the array of the last node of all div elements.
$ ("Div button: only-child") returns an array of all child nodes with only one subnode in all Divs.

Form element selector:

$ (": Input") select all form input elements, including input, textarea, select, And button
$ (": Text") select all text input Elements
$ (": Password") select all password input Elements
$ (": Radio") select all radio input Elements
$ (": Checkbox") select all the checkbox input Elements
$ (": Submit") select all submit input Elements
$ (": Image") select all image input Elements
$ (": Reset") select all reset input Elements
$ (": Button") select all button input Elements
$ (": File") select all file input Elements
$ (": Hidden") Select the hidden fields of all input elements or forms of the hidden type.

Form element filter selector:

$ (": Enabled") Select All operable form elements
$ (": Disabled") Select All unoperable form elements
$ (": Checked") select all checked form elements
$ ("Select option: selected") select the selected element from all select sub-elements.

How does jquery use two selectors at the same time? For example, I want to obtain the first and last

$ ('Td: first, td: last'). Don't think it's too complicated. jquery's selector is based on the css architecture. How can you write your css style, how to write the basic jquery selector?

Jquery selector Problems

Table. tab-query: select the table (table) where the class is tab-query)
: Text [name $ = Time]: select text input whose name ends with Time
. Attr ("readonly", true): Set the readonly attribute to true (read-only)
. Datepick (): calls the date selection function on this element.

What together is

Search for all the text inputs whose names end with Time in the table with the tab-query class, set them to read-only, and call the datepick date selection function]