jquery Selector Comprehensive Summary _jquery

The JQuery selector is incredibly powerful, and here's a quick summary of common element lookup methods

The jquery selector makes it easier and more flexible to get page elements, which can greatly reduce the pressure on developers. Like a building, without bricks and mortar, you cannot build a building. Not getting the elements to talk about what other kinds of operations? Visible, the importance of the jquery selector. Of course, it is difficult to master all the selectors at once, which depends on practice and accumulation.

Now we're officially going into the jquery selector study. We classify the jquery selector into the following categories:

1. Basic Selector

◦id Select by Element ID
◦elementname based on element name selection
◦classname based on element CSS class name selection

Example:

Copy Code code as follows:

<input type= "text" id= "id" value= "SELECT according to ID"/>
<a> Select by element name </a>
<input type= "text" class= "classname" value= "selection based on element CSS class name"/>

Copy Code code as follows:

JQuery ("#ID"). Val ();
JQuery ("a"). Text ();
JQuery (". ClassName"). Val ();

The value of the element can be obtained separately. The above three types are the most common selectors, where the ID selector is the most efficient and should be used whenever possible.

2. Hierarchy Selector

◦ancestor descendant ancestors and descendants selector
◦parent > Child son node selector
◦prev + next Same level selector
◦prev ~ Siblings Filter Selector

Example:

Copy Code code as follows:

<div id= "Divtest" >
<input type= "text" value= "investment"/>
<input id= "Next" type= "text"/>
<input type= "text" value= "Play"/>
<input type= "text" title= "learning" value= "learning"/>
<a>1</a>
<a>2</a>
</div>

Copy Code code as follows:

Get the A tag content in the div result is 12
JQuery ("#divTest a"). Text ();
Output div Direct child node results for investment
JQuery ("#divTest >input"). Val ();
Output ID is next to the same level element result as
JQuery ("#next +input"). Val ();
Ditto, and there is the element of title that results for learning
JQuery ("#next ~[title]"). Val ();

3. Basic Filter Selector

◦:first Find the first element
◦:last find the last element
◦:not (selector) removes elements that match a given selector
◦:even elements that match index values to even are counted starting from 0
◦:odd elements that match an odd index are counted starting from 0
◦:eq (index) matches a given index value element starting from 0
◦:GT (index) match is greater than the given index value element
◦:LT (index) match is less than the given index value element
◦:header Select h1,h2,h3 type of label (not currently used)
◦:animated matches an element that is performing an animation effect (not currently used)

Example:

Copy Code code as follows:

<div id= "Divtest" >
<ul>
<li> Investment </li>
<li> Finance </li>
<li> Mature </li>
<li> Acting </li>
<input type= "Radio" value= "Learning" checked= "checked"/>
<input type= "Radio" value= "Do not Learn"/>
</ul>
</div>

Copy Code code as follows:

First Li content results for investment
JQuery ("Li:first"). Text ();
Final one Li content results for the acting
JQuery ("Li:last"). Text ();
Input is not selected value result is not learning
JQuery ("Li Input:not (: Checked)"). Val ();
Index for even Li results for investment maturity
JQuery ("Li:even"). Text ();
Index for odd Li results for financial management
JQuery ("Li:odd"). Text ();
Content result of Li with index greater than 2 as
JQuery ("LI:GT (2)"). text ();
Content of Li with index less than 1 results in investment
JQuery ("Li:lt (1)"). text ();

4. Content Filter

◦:contains (text) matches the element that contains the given text
◦:empty matches all empty elements that do not contain child elements or text
◦:has (selector) matches the element that contains the selector

Example:

Copy Code code as follows:

<div id= "Test" >
<ul>
<li>hyip Investment </li>
<li>hyip</li>
<li></li>
<li> Finance </li>
<li><a> Investment </a></li>
</ul>
</div>

Copy Code code as follows:

The content of Li containing Hyip results in the HYIP investment Hyip
JQuery ("Li:contains (' Hyip ')"). text ();
Content for the latter Li of the empty Li content results for financial management
JQuery ("Li:empty+li"). Text ();
The content of Li containing a label results in the investment
JQuery ("Li:has (A)"). text ();

5, the visibility of the filter

◦:hidden matches invisible elements
◦:visible Matching visible elements

Example:

Copy Code code as follows:

<ul>
<li> Visible </li>
<li style= "Display:none;" > Not visible </li>
</ul>

Copy Code code as follows:

Invisible Li content results are not visible
JQuery ("Li:hidden"). Text ();
Visible Li's content result is visible
JQuery ("Li:visible"). Text ();

6. Property Filter

◦[attribute=value] Matching attribute is an element of a given value
◦[attribute^=value] Matching attribute is an element that starts with a given value
◦[attribute$=value] Matching attribute is an element that ends with a given value
◦[attribute*=value] Matches an element that contains a given value

Example:

Copy Code code as follows:

<input type= "text" name= "Hyipinvest" value= "Hyip investment"/>
<input type= "text" name= "Investhyip" value= "Investment Hyip"/>
<input type= "text" name= "Google" value= "Hyip"/>
The value of name hyipinvest is the result of HYIP investment
Alert (JQuery ("Input[name= ' hyipinvest ')"). Val ());
The value of name starting with HYIP is the result of HYIP investment
Alert (JQuery ("input[name^= ' Hyip ')"). Val ());
Name ends with Hyip The result is an investment HYIP
Alert (JQuery ("input[name$= ' Hyip ')"). Val ());
Name contains OO value result is HYIP
Alert (JQuery ("input[name*= ' oo ')"). Val ());

The jquery selector is summed up here, these are basically in the learning process encountered, and a very small part did not sum up. After a period of practice, I believe you will be able to skillfully use the jquery selector.

$ ("#myELement") select an element with an ID value equal to MyElement, and the ID value cannot be repeated in the document only one ID value is myelement so the unique element is obtained
$ ("div") selects all div tag elements, returns an array of DIV elements
$ (". MyClass") Select all elements of a CSS that uses the MyClass class
$ ("*") Select all the elements in the document, and you can use a variety of options for joint selection: for example $ ("#myELement, Div,.myclass")

Cascade selector:
$ ("Form input") select the INPUT element in all form elements
$ ("#main > *") Select all child elements of the ID value of main
$ ("label + input") selects the next INPUT element node for all the label elements, and the test selector returns all input label elements immediately following the label label with an input label
$ ("#prev ~ div") sibling selector, which returns all the div tags that belong to the same parent element for a LABEL element with ID prev

Basic Filter Selector:
$ ("Tr:first") selects the first of all TR elements
$ ("Tr:last") selects the last of all TR elements
$ ("Input:not (: Checked) + span")

Filter out: All input elements of the checked selector

$ ("Tr:even") Select all TR elements of the 0,2,4 ... Element (Note: Since the selected element is an array, the ordinal number is starting at 0)

$ ("tr:odd") Select all TR elements of the 1,3,5 ... An element
$ ("Td:eq (2)") select the TD element with the serial number 2 in all TD elements
$ ("TD:GT (4)") Select all TD elements with serial number greater than 4 in TD elements
$ ("Td:ll (4)") Select all TD elements with a serial number less than 4 in the TD element
$ (": Header")
$ ("div:animated")

Content Filter Selector:

$ ("Div:contains (' John ')") Select elements in all div that contain John text
$ ("Td:empty") selects all arrays of TD elements that are empty (and not including text nodes)
$ ("Div:has (P)") Select all DIV elements that contain p tags
$ ("td:parent") Select all array of elements with TD as parent node

Visual Filter Selector:

$ ("Div:hidden") Select all the hidden div elements
$ ("div:visible") Select all the visual div elements

Attribute Filter Selector:

$ ("Div[id]") Select all DIV elements that contain ID attributes
$ ("input[name= ' newsletter ']") selects all input elements that have the Name property equal to ' newsletter '

$ ("input[name!= ' newsletter ']") selects all input elements that are not equal to ' newsletter ' for all name properties

$ ("input[name^= ' News") selects all the input elements with the name attribute beginning with ' News '
$ ("input[name$= ' News '") Select all the input elements with the name attribute ending with ' news '
$ ("input[name*= ' Man ']") Select all the name attributes containing the ' news ' INPUT element

$ ("input[id][name$= ' man ')" can use multiple properties for joint selection, which is to get all the elements that contain the id attribute and then the attribute ends with a 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 an array of the first child nodes of all DIV elements
$ ("div span:last-child") returns an array of the last nodes of all DIV elements
$ ("div button:only-child") returns an array of all child nodes in all div with only one child node

Form element selector:

$ (": Input") Select all form input elements, including input, textarea, select and button

$ (": Text") Select all text input elements
$ (":p assword") Select all password input elements
$ (": Radio") Select all radio input elements
$ (": CheckBox") Select all 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 that are of type hidden

Form element Filter Selector:

$ (": Enabled") Select all operable form elements
$ (":d isabled") Select all of the form elements that are not operable
$ (": Checked") Select all of the checked form elements
$ ("Select Option:selected") Select the element to be selected in the child elements of all Select


Select the last TD's text value for the input text box named "S_03_22″"
$ ("input[@ name =s_03_22]"). Parent (). Prev (). Text ()

The name begins with "S_" and is not end with "_r"
$ ("input[@ name ^= ' S_ ']"). Not ("[@ name $= ' _r ']")

A value selected by a radio named radio_01
$ ("input[@ name =radio_01][@checked]"). Val ();


$ ("A B") finds all child nodes under a element, including non-direct child nodes
$ ("a>b") looking for a direct child node under the A element
$ ("a+b") finds sibling nodes behind a element, including indirect child nodes
$ ("a~b") finds sibling nodes behind a element, excluding indirect child nodes

1. $ ("A B") Look for all child nodes under a element, including non-direct child nodes

Example: Find all input elements in a 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")

Results:
[<input name= "name"/>, <input name= "newsletter"/>]

2. $ ("a>b") Find the direct child node below the A element

Example: matches 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")

Results:
[<input name= ' name '/>]

3. $ ("a+b") finds sibling nodes behind a element, including indirect child nodes

Example: matches 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")

Results:
[<input name= "name"/>, <input name= "newsletter"/>]

4. $ ("a~b") finds sibling nodes behind a element, excluding indirect child nodes

Example: Find all input elements with a form sibling

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")

Results:
[<input name= "None"/>]