jquery selector method for selecting elements complete article

1. Let's start with a few operations that are selected by location:
: First: By default is relative to the entire page, such as: Li:first represents the first LI element of the entire page, and UL Li:first represents the entire page of the first LI element, and is under the UL sub-elements;
: Last: Ibid., just a 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 of the page have the same parent element, and that contains the LI element, then take the first LI element, each sub-class collection to be judged until all the required Li elements 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 a sibling node, note that the text element is not, that is to say, <div>hello<a href= "" >jquery</a></div&gt like this; The <a> element is selected for this paragraph, and for $ ("Label:only-child") the label element is selected, and it is the label element of its parent class's only child element;
: Nth-child (N): Returns the nth child node, n starts at 1, and if n takes 0, all elements are selected. such as: [*]li:nth-child (2) returns the Li element, and the element is the second child element of its parent element;
: Nth-child (even|odd): Returns an even or odd number of sub-nodes;
: Nth-child (AN+B): Returns all child nodes that satisfy the an+b of an expression, such as 3n+1 returns the child element with a multiple of 3 plus 1 for the parent node of the PIP element;
: even: an element in an even position within the page range, such as: Li:even returns all even-numbered LI elements;
: Odd: An odd-numbered element within the page range;
: EQ (n): Nth matched Element (n starting from 0), such as: Li:eq (3) Returns the fourth Li element of the entire page, UL Li:eq (1) Returns the second LI element under the first UL element in the page, note: Only one match is returned;
: GT (N): The element after the nth matching element (excluding) (n starting from 0), such as: UL:GT (2) returns all UL elements starting with the 3rd UL (including the third one);
: LT (n): the nth matched element (not included) before the element (n starting from 0), such as: Ul:lt (2) returns from No. 0 and 1th ul elements;

2. Use the CSS selector to select:
Element tag name: For example, $ ("a") will select all the link elements;
#id: Select by Element ID, for example $ ("#form1") to select an element with ID Form1;
. class: Choose the CSS class from the element, for example $ (". Boldstyle") to select the CSS as the element of the Boldstyle class;
Tag name #id.class: Selected by the id attribute and class attribute of a certain class of elements, such as: $ (a#blog.boldstyle) selects the link element with the ID of the blog and the CSS type is. Boldstyle type (<a id= ' blog ' Class= '. Boldstyle ' >);
Parent tag name Child tag name. Class: By selecting a child element of a CSS type under the parent tag, such as: $ (P a.redstyle), the link child element A in the p paragraph element is selected, and its CSS type is. Redstyle;

3. Select through the sub-selector, the container selector and the property selector:
*: Matches all elements, such as: $ (*) will return all elements of the page;
E: All elements that match the tag name E, such as $ ("a"), return all linked elements;
E F: Matches all child elements of the tag named F under the parent element E (F can be a subclass of the subclass of E, or even farther);
E>f: Matches all direct child elements under the parent element e with the label named F;
E+f: Matches all elements with the label named F, and has the sibling node of type E before the F element (e,f next to each other);
E~f: Match all elements F (e,f not next to any sibling node E) that precedes it;
E:has (F): The matching tag is named E, and at least one of the descendants of the tag named F is all elements of the node E;
E.C: Matches all elements with class name C E.. C is equivalent to *. C
E#i: Matches all elements of ID I, E, #I等效于 * #I;
E[a]: Matches all elements with attribute A, E;
E[A=V]: Matches the element e of all attribute A with a value of V;
E[A^=V]: Matches all element E, and A's attribute value is the beginning of V;
E[A$=V]: Matches all element E, and the attribute value of a is the end of V;
E[A*=V]: Matches all element E, and the attribute value of a contains V;

4. Use the jquery custom selector to choose from:
: button: Select any element of the button type, including Input[type=submit] and so on;
: checkbox: Select the check box element;
: File: Select all file type elements, i.e. input[type=file];
: Image: Select the images element in the form, that is, input[type=image], note that this is a bit different from the previous selection of the image according to the label name IMG ha;
: input: Select form elements, such as <input>,<select>,<textarea>,<button>, etc.;
: Radio: Select the radio button element;
: Reset: Select reset button element, e.g. Input[type=reset],button[type=reset];
: Submit: Select the commit button element;
: text: Select the textual field element, i.e. Input[type=text];
: animated: Select the element that is currently under dynamic control;
: Contains (hello): Select the element that contains the text hello;
: Header: Select a heading element, such as :p arent: Select elements that have descendant nodes (including text) and exclude empty elements;
: Selected: Select the selected option element;
: Visible: Select visual elements;
: Enable: Select form elements that are already available on the interface;
:d isabled: Select form elements that are disabled on the interface;
: Checked: Select the selected check box or radio button;

jquery selector method for selecting elements complete article