Operation of the jquery series Select label

Every time I read something basic forget, now decided to write a blog to record, do not know how the effect.

First, jquery operation selector

1. Basic Selector

With regard to the basic selector, I don't have to say much, including the ID, class, tag Selector.

2. Hierarchy Selector

I think mastering a hierarchy selector requires understanding the tree structure of DOM elements so that you can capture exactly what DOM elements you want to manipulate.

Here's a look at the hierarchy selector:

A. $ ("ancestor descendant"), which indicates that all descendant elements in the ancestor element are selected, ancestor represents the ancestors together, descendant represents the meaning of the descendants.

For example, $ ("div span"), which means select all <span> elements in <div>.

B. $ ("Parent>child"), this selector and the above is a little similar, the difference is that it is to select the parent element under the child element, the above is the selection of descendant elements, which need us to distinguish.

For example, $ ("Div>span"), which represents the sub-element <span> under Select <div>.

C. $ ("Prev+next"), which means selecting the next sibling element of the perv element, remembering that it is a sibling element. This selector can be replaced with the next () method.

For example, $ (". Div+span"), which indicates that the next <span> element with the class name. Div is selected, or you can use the $ (". Div"). Next () expression.

D. $ ("prev~siblings"), which represents all siblings elements after the Prev element is selected. This selector can be replaced with the Nextall () method.

For example, $ ("#prev ~div"), which indicates that all DIV elements after the ID of prev are selected and, of course, peers. You can also use $ ("#prev") instead. Nextall ().

In particular, the $ ("#prev ~div") selector selects only the sibling div,$ ("#prev") after #prev. Siblings ("Div") is selected either before or after.

3. Filter Selector

Filter selector is mainly through filtering rules to filter out the required DOM elements, filtering rules and CSS in the pseudo-class selector syntax, the selector with a colon (:), according to different filtering rules, such selectors are also divided into basic filtering, content filtering, visibility filtering, attribute filtering, sub-element filtering, Form object property filtering.

A. Basic Filter Selector

: First, select the second element, for example, $ ("Div:first"), to represent the first DIV element in the selection div.

: Last, select the final element, method and upper.

: Not (selector), removes the element that matches to, for example, $ ("Input:not (. MyClass)"), and selects the element in input that has a class name other than MyClass.

: Even, select all elements of an even-numbered index, starting at 0, for example, $ ("Input:even"), and selecting an element with an even number of input index values.

: Odd, the selection index is an odd number of all elements, on the method.

: Eq[index], select an element with the index value of the given value, for example, $ ("input:eq[1]"), and choose the INPUT element with an index value of 1.

: Gt[index], select an element with an index value greater than the given value, excluding the given value.

: It[index], the selection index is less than the given value element, not including the given values.

: Header, select all the title elements on the page, such as H1,H2 ...

: Animated, select the element that is performing the animation.

B. Content Filter Selector

: Contains (text), select the element that contains the text content as "text", such as $ ("Div:contains (' Test ')").

: Empty, select a blank element that does not contain child elements or text, such as $ ("Div:empty")

: Has (selector), select the element that contains the element that the selector matches, such as $ ("Div:has (P)"), and choose the div that contains the P element

: parent, select the element that contains the child elements, for example, $ ("div:parent")

C. Visibility Filter Selector

There are two types of these selectors: hidden and: Visible indicates the selection of hidden or visible elements.

For example $ (": Hidden"), $ ("Div:hidden"), $ (": Visible"), $ ("div:visible")

D. Attribute Filter Selector

[Attribute], select the element that owns this property, for example, $ ("div[id]") to select the element that owns the id attribute.

[Attribute=value], select an element with an attribute value equal to value, for example, $ ("div[id=test]").

[Attribute!=value], select an element with an attribute value that is not equal to value.

[Attribute^=value], select the element that the property value begins with value.

[Attribute$=value], select the element where the property value ends with value.

[Attribute*=value], select the attribute value and the element with value.

[Selector1] [Selector2] [Selectorn], a composite property selector, such as $ ("div[id][title^=test]"), that selects the DIV element that contains the id attribute and the title begins with test.

E. Sub-element filter Selector

Typing good tired ....

I decided to summarize it quickly.

: Nth-child (INDEX/EVEN/ODD/EQ), here the index is starting with 1 oh.

: First-child,: Last-child,: Only-child

They can literally be understood in terms of meaning.

F. Form object property Filter

: Enable, select the available elements, such as $ ("#form1: Enable"), and select all the available elements in the form Form1.

: Disable,: Checked,: Selected the same.

G. Form selector

This is jquery for the flexible operation of the form deliberately added.

As long as the form element can be used ":" + "element representation", for example, $ (": Input"), $ (": select")

Ok,jquery selector is probably the case, in fact, these things jquery API has, and very convenient, later do not remember, you can use the API to find.

　　

　　

　　

　　

　　

Operation of the jquery series Select label