Jquery selector usage and operations on Elements

1. Basic Selector

$ (# ID)Matches an element based on the given ID.
$ (. Class)Matches the element based on the given class name.
$ (Element)Match an element based on the given element name
$ (*)Match All elements
$ (Selector1, selector2,..., selectorn)Returns the elements matched by each selector together.

2-level Selector

$ ("Ancestor descendant ")Select all descendant (descendant) elements in ancestor
$ ("Parent> child ")Select only child (sub-level) elements under the parent element, which is different from $ ("ancestor descendant"). The former Selects all descendant elements (including but not limited to sub-levels)
$ ('Prev + next ')Select the next element next to the prev Element
$ ('Prev ~ Siblings ')Select the next element after the prev Element

3. Filter Selector

3.1 basic filter Selector

$ ("Selector: First ")Select the first element
$ ("Selector: Last ")Select the last element
$ ("Selector: Not (selector2 )")Removes all elements that match the given selector.
$ ("Selector: Even ")Select all the elements with an even index. The index starts from 0.
$ ("Selector: odd ")Select all the elements with an odd number of indexes. The index starts from 0.
$ ("Selector: eq (INDEX )")Select the element whose index is equal to the index. The index starts from 0.
$ ("Selector: GT (INDEX )")Select the element whose index is greater than the index, and the index starts from 0.
$ ("Selector: Lt (INDEX )")Select the element whose index is smaller than the index, and the index starts from 0.
$ (": Header ")Select All title elements, such as H1, H2, H3, etc.
$ (": Animated ")Select all elements of the animation being executed

3.2 content filter Selector

$ (": Contains (text )")Select an element with text content as "text"
$ (": Empty ")Select an empty element that does not contain child elements or text
$ (": Has (selector2 )")Select the element containing the element matched by the selector
$ (": Parent ")Select an element that contains child elements or text

3.3 visibility filter Selector

$ (": Hidden ")Select all invisible elements
$ (": Visible ")Select all visible elements

3.4 attribute filter Selector

$ ("Selector [attribute]")Select the element with this attribute
$ ("Selector [attribute = value]")Select an element whose attribute value is value
$ ("Selector [attribute! = Value] ")Select an element whose attribute value is not equal to value
$ ("Selector [attribute ^ = value]")Select an element whose attribute value starts with value.
$ ("Selector [attribute $ = value]")Select the element whose attribute value ends with value.
$ ("Selector [attribute * = value]")Select the element whose attribute value contains value.
$ ("Selector [selector2] [selectorn]")Combine the attribute selector into a composite attribute selector to meet multiple conditions. Each time you select, the range is reduced. For example, $ ("Div [ID] [Title $ = 'test']") selects the property ID, and the <div> element whose property title ends with "test"

3.5 child element filter Selector

$ (": Nth-child (index/even/odd/equation )")Select the index sub-element or parity element under each parent element. The index starts from 1.
$ ("Selector: First-Child ")Select the first child element of each parent element.
$ ("Selector: Last-Child ")Select the last child element of each parent element.
$ ("Selector: Only-Child ")If an element is the only child element in its parent element, it will be matched. If the parent element contains other elements, it will not be matched.

3.6 form object attribute filter Selector

$ ("Selector: enabled ")Select all available elements
$ ("Selector: Disabled ")Select all unavailable Elements
$ ("Selector: checked ")Select All selected elements (radio, checkbox)
$ ("Selector: Selected ")Select All selected option Elements)

4. Form Selector

$ (": Input ")Select all <input>, <textarea>, <SELECT>, and <button> Elements
$ (": Text ")Select all single-row text boxes
$ (": Password ")Select all password boxes
$ (": Radio ")Select all single-region
$ (": Checkbox ")Select All check boxes
$ (": Submit ")Select all submit buttons
$ (": Image ")Select All image buttons
$ (": Reset ")Select all reset buttons
$ (": Button ")Select All buttons
$ (": File ")Select All upload Domains
$ (": Hidden ")Select all invisible elements

========================================================== ========================================

Jquery's selector is incredibly powerful. Here is a simple summary of common element search methods.

$ ("# 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 the elements in the document and use multiple options for joint selection: for example, $ ("# 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 result returned by the test selector is that the label Label is directly followed by all input tag elements of an input tag.
$ ("# Prev ~ Div ") compatriot selector, which returns all Div tags of the Tag Element with ID as Prev that belongs 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.

SelectNameIt is the text value of the previous TD in the input text box of "s_03_22 ".
$ ("Input [@Name= S_03_22] "). Parent (). Prev (). Text ()

The name starts with "S _" and does not end with "_ r"
$ ("Input [@Name^ ='S _ '] "). Not ("[@Name$ = '_ R'] ")

The value of a radio_01 radio.
$ ("Input [@Name= Radio_01] [@ checked] "). Val ();

$ ("A B") searches for all subnodes under Element A, including non-direct subnodes.
$ ("A> B") Find the direct subnode under Element
$ ("A + B") searches for the sibling nodes behind Element A, including non-direct subnodes.
$ ("~ B ") Find the sibling nodes behind Element A, excluding non-direct subnodes.

1. $ ("a B") searches for all subnodes under Element A, including non-direct subnodes.

Example: Find all input elements in the form

HTML code:

<Form>
<Label> name: </label>
<Input name = "name"/>
<Fieldset>
<Label> Newsletter: </label>
<Input name = "newsletter"/>
</Fieldset>
</Form>
<Input name = "NONE"/>
Jquery code:

$ ("Form input ")
Result:

[<Input name = "name"/>, <input name = "newsletter"/>]

2. $ ("A> B") Find the direct subnode under Element
Example: match all the child input elements in the form.

HTML code:

<Form>
<Label> name: </label>
<Input name = "name"/>
<Fieldset>
<Label> Newsletter: </label>
<Input name = "newsletter"/>
</Fieldset>
</Form>
<Input name = "NONE"/>
Jquery code:

$ ("Form> input ")
Result:

[<Input name = "name"/>]

3. $ ("A + B") searches for the sibling nodes behind Element A, including non-direct subnodes.
Example: match all input elements following the label

HTML code:

<Form>
<Label> name: </label>
<Input name = "name"/>
<Fieldset>
<Label> Newsletter: </label>
<Input name = "newsletter"/>
</Fieldset>
</Form>
<Input name = "NONE"/>
Jquery code:

$ ("Label + input ")
Result:

[<Input name = "name"/>, <input name = "newsletter"/>]

4. $ ("~ B ") Find the sibling nodes behind Element A, excluding non-direct subnodes.
Example: Find all input elements of the same generation as the table

HTML code:

<Form>
<Label> name: </label>
<Input name = "name"/>
<Fieldset>
<Label> Newsletter: </label>
<Input name = "newsletter"/>
</Fieldset>
</Form>
<Input name = "NONE"/>
Jquery code:

$ ("Form ~ Input ")
Result:

[<Input name = "NONE"/>]

========================================================== ======================================

Jquery selector is a very important part of the jquery library. It allows web developers to quickly and easily set the CSS syntax they are familiar. Learning about the jquery selector is the key to opening the door to efficient jquery development. A typical jquery selector Syntax:
$ (Selector). methodname ();
Selector is a string expression used to identify the elements in the Dom and then set them using the method set provided by jquery.
In most cases, jquery supports the following operations:
$ (Selector). Method1 (). method2 (). method3 ();
This instance implies the id = "goaway" element in the Dom, and then adds a class = "incognito" attribute to it.
$ ('# Goaway'). Hide (). addclass ('encoding ');
Tip: When the selector expression matches multiple elements, you can use the array pointer for selection as easily and flexibly as you would in the javascrui array operation. This is an example:
VaR element = $ ('img ') [0];
In the matching expression element, the first element object is assigned to the variable element.

Jquery selector Classification
There are three types: Basic selector, position selector, and custom selector. The basic selector can be understood as a "Discovery selector". In fact, it is used to search for elements in the Dom. The position selector and custom selector are more like "filter selector ".

Basic Selector
A reference example of the basic selector is provided here. All of these selectors support the css3 syntax standard and syntax.

$ ('Div ') selects all <div> elements.

$ ('Fieldset A') selects all <A> elements that appear in the <fieldset> element.

$ ('Li> p') selects all <p> elements that appear directly in the <li> tag.

$ ('Div ~ P ') The position is all <p> elements that appear after the <div> MARK.

$ ('P: Has (B) ') select all elements containing <B> In the <p> element package.

$ ('Div. someclass ') select all elements whose class = "someclass" attribute appears in the <div> element.

$ ('. Someclass') selects all elements that contain the class = "someclass" attribute.

$ ('# Testbutton') Select the id = "testbutton" element. The element ID attribute value is unique in the current Dom. Therefore, I am curious about how to select two elements with ID = "testbutton. The experiment shows that only the first element is selected. In the real development process, we should never show multiple elements with the same ID in a Dom.

$ ('Img [alt] ') selects all elements with the alt attribute.

Optional ('a' href0000000000000000'] ') selects all <A> elements with href0000,and the values ending with a limit.

$ ('Button [ID * = test] ') select all buttons, but the ID attribute of the button must contain "test ".

Note: In the same $ () structure, you can use "," To connect multiple different selectors, for example:

$ ('Div, p ')

Match All <div> elements with the title attribute and all elements with the alt attribute:

$ ('Div [title], IMG [alt] ')

Position Selector
This type of selector can be appended to any basic selector for element-based filtering. If the default basic selector is used, all elements are considered.

Here are some examples.

$ ('P: First ') Select the first <p> element on the page.

Optional ('img?src==.png]: first') Select the element whose src=value ends with .png on the page.

$ ('Button. Small: last') Select the last button element that appears class = "small" on the page.

$ ('Li: First-child ') selects the first element of all <li> lists on the page.

$ ('A: Only-Child ') selects all <A> elements on the page, but these elements can only be within one parent element. For example, if <li> <a href = "url"> an URL </a> </LI>, <A> in <li> matches.

$ ('Li: Nth-child (2) ') Select the second <li> element from the parent element. <Li> the other one must be in a parent element. For example, <ul>
<Li> 1 </LI>
<Li> 2 </LI>
</Ul>

In this case, <li> 2 </LI> is matched.

$ ('Tr: Nth-child (ODD) ') Select All row elements with odd numbers in the table.

$ ('Li: Nth-child (3N) ') has many <li> elements in the parent element, but only the <li> elements that appear three times after each. For example

<Ul>
<Li> 1 </LI>
<Li> 2 </LI>
<Li> 3 </LI>
<Li> 4 </LI>
<Li> 5 </LI>
<Li> 6 </LI>
<Li> 7 </LI>
<Li> 8 </LI>
</Ul>

<Li> 3 </LI> and <li> 6 </LI> match.

$ ('Li: Nth-child (3N + 5) ') with an offset. In the parent element, only the <li> elements that appear every three times starting from 5th <li> elements are selected. For example

<Ul>
<Li> 1 </LI>
<Li> 2 </LI>
<Li> 3 </LI>
<Li> 4 </LI>
<Li> 5 </LI>
<Li> 6 </LI>
<Li> 7 </LI>
<Li> 8 </LI>
</Ul>

<Li> 5 </LI> and <li> 8 </LI> match.

$ ('. Someclass: eq (1)') Select the second element of class = "someclass" on the page. Jquery uses 0 as the benchmark, so (1) represents 2nd.

$ ('. Someclass: GT (1)') select all class = "someclass" elements on the page, except the first two.

$ ('. Someclass: Lt (4)') selects only the first four elements in all the class = "someclass" elements on the page.

Custom Selector
Jquery provides this type of selector for selecting elements conveniently and quickly without the explicit CSS requirements. Custom selectors may be combined to take a look at these powerful selector instances.

$ ('Img: animated') selects all the elements that have just passed the animation method call.

$ (': Button: Den den') selects all the button type elements hidden by the hide () method.

$ ('Input [name = myradiogroup]: Radio: checked') Select the project selected in a single region with name = "myradiogroup.

$ (': Text: Disabled') select all disabled text box elements.

$ ('# XYZ: header') select all

$ ('Option: Not (: Selected) ') selects all <option> elements that are not selected.

$ ('# Myform button: Not (. someclass)') select all buttons in the form with ID = "myform" that do not have the class = "someclass" attribute.

$ ('Select [name = choices]: selected') select all the selected <option> items in the <SELECT> element of name = "Choices.

$ ('P: INS ins (coffee) ') select all <p> elements whose content contains coffee.

Thank you for sharing ~~ Http://hi.baidu.com/xcaozhao1986/item/490f3fdea78edae5b2f777f8