jquery Selector Select DOM Element

jquery selector is actually a bit more puzzling, if not through many experiments, it is difficult to get it's what each operator is doing, it is easy to make mistakes, after my many tests, finally some more difficult to understand or error-prone selection of operations to summarize, Not only to facilitate their own future inquiries and facilitate beginners to learn. If there is something wrong also hope that everyone help me point out, here is a place to learn from each other.

1. Let's start with the selection of several operations by location:

: First: By default, it is relative to the entire page, such as: Li:first represents the first LI element of the entire page, while the UL Li:first represents the first LI element of the entire page, and is the child element under the UL;

: Last: Ditto, only is the final one;

: First-child: Matches the first child element for each parent element, such as Li:first-child returns the first LI element of each ul. It can be understood that the elements in the page have the same parent element, and the inside contains the LI element, then take the first LI element, and each subclass set is judged until all the LI elements that meet the requirements are found;

: Last-child: This is also relative to the above, just take the last one;

: only-child: Returns all elements that do not have sibling nodes, note that text elements are not, that is, similar to <div>hello<a href= "" >JQUERY</A></DIV> For this segment, the <a> element is selected; for $ ("Label:only-child"), the Label element is selected, and it is the label element of the unique child element of its parent class;

: Nth-child (N): Returns the nth child node, n starts at 1, and if n takes 0, all elements are selected. For example: [*]li:nth-child (2) returns the LI element, which is the second child element of its parent element;

: Nth-child (even|odd): Returns even or odd-numbered child nodes;

: Nth-child (AN+B): Returns all the child nodes that satisfy the expression an+b, such as the child element with a multiplier of 3 plus 1, where 3n+1 returns the parent node of the idea element;

: even: An even-numbered element within the page range, such as: Li:even returns all even LI elements;

: Odd: The elements in the page range that are in odd positions;

: EQ (n): n A matching element (n starting from 0), such as: Li:eq (3) Returns the fourth Li element of the entire page, the UL li:eq (1) Returns the second LI element under the first UL element in the page, note: only match once returned;

: GT (N): the elements (n) after the nth matching element (not included), such as: UL:GT (2) returns all UL elements starting with the 3rd UL (including the third);

: LT (n): the element (n) before which the nth matching element (not included), such as: Ul:lt (2) returns from the No. 0 and 1th ul elements;

2. Use CSS selector to choose:

Element tag name: For example, $ ("a") selects all link elements;

#id: Select by Element ID, for example, $ ("#form1") to select an element with an ID of Form1;

. class: Select from the CSS class of the element, for example, $ (". Boldstyle") to select the CSS as an element of the Boldstyle class;

The label name #id. Class: Select by the id attribute and class attribute of a class element, such as: $ (a#blog.boldstyle) selects a LINK element with an ID of blog and a CSS type of. Boldstyle type (<a id= ' blog ') Class= '. Boldstyle ' >);

Parent tag name Child tag name. Class: By selecting a child element of a CSS type under a parent tag, such as: $ (P a.redstyle) selects the link child element A in the p paragraph element, and its CSS type is. Redstyle;