The selector does not have a fixed definition, and in some ways the jquery selector is very similar to the selector in the style sheet. Selectors have the following characteristics:
1. Simplifying the writing of code
2. Implicit iterations
3. No need to determine if an object exists
Where "$" is an integral part of the selector, in the jquery library, $ is a shorthand for jquery, such as $ ("#foo") and jquery ("#foo") are equivalent, $.ajax and Jquery.ajax are equivalent. If not specifically stated, you can interpret the $ symbol in your program as a shorthand for jquery.
Now we're officially going into the jquery selector study. According to the selector of the functional habits of the selector classification, the following classification of different types of classifiers, and explained separately, so that the reader to reach the level of mastery.
First, the basic selector
The base selector consists of 5 selectors: #id, Element,. class, * and Selectorl,selector2.selectorn, and the following examples describe each selector's function and usage.
1. #id选择器
#id选择器根据给定的ID匹配一个元素. If the selector contains special characters, it can be escaped with a two slash, with the return value of array<element>.
2. Element Selector
The element selector is a search for elements. The label name that points to the DOM node. The return value is Array<element (s) >.
3. Class Selector
The. Class selector matches an element based on a given class, which is a class to search for. An element can have multiple classes, as long as a match can be matched to, and its return value is Array<element (s) >.
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"/>
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.
4. * Selector
* Selectors are used in conjunction with context to search, matching all elements of the selector. The return value is Array<element (s) >.
5. Selector1,selector2,selectorn selector
This type of selector selector will return the elements that each selector matches to. You can specify as many selectors as you want, and combine the elements that are matched into one result and return the value: Array<element (s) >. In the following example, a CSS action is made on the selected item to give the reader a clear idea of the role of the Selector1,selector2,selectorn selector.
second, the level selector
The hierarchy selector consists of 5 forms: ancestor, descendant, parent > child, Prev + Next, and prev ~ siblings. The following example details each selector's function and the use method respectively.
1. Ancestor descendant selector
It refers to matching all descendant elements under a given ancestor element, as the ancestor of the argument represents any valid selector, while descendant is used to match the element's selector, and it is the descendant of the first selector. The return value is: array<element (s) >.
2. Parent>child selector
The Parent>child selector represents the matching of all child elements under the given parent element. The two parameters are represented as follows: parent represents any valid selector, the child is used to match the selector of the element, and it is the element of the first selector. The return value is Array<element (s) >.
3. Prev+next Selector
The role of such selectors is to match all next elements immediately following the Prev element. The two parameters represent the following meanings: prev represents any valid selector, and next represents a valid selector and immediately follows the first selector. The return value is Array<element (s) >.
4. Prev ~ siblings Selector
The prev ~ Siblings selector represents all siblings elements that match the Prev element. Two parameters are represented as follows: prev represents any valid selector, siblings represents a selector, and it acts as the peer of the first selector. The return value is Array<element (s) >.
For 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>
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 ();
Third, filter selector
The filter selector mainly filters out the required DOM elements through specific filtering rules, which are the same as the Pseudo class selector syntax in CSS, that is, selectors begin with a colon.
The filter selector involves more content, a total of 6 types, but it can be categorized. Below we will explain the various types of selectors in detail.
1. Basic Filter Selector
The basic filter selector is the most commonly used filter selector, which mainly includes the following forms, which are described in detail here:
(1): First/:last selector.
(2): not selector.
(3): Even and: Odd selector.
(4): EQ:GT,: LT, selector.
(5): Header selector.
(6): Animated selector.
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>
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 ();
2. Content Filter Selector
Content Filter Selector Mainly includes: Contains,: Empty,: Has,:p arent 4 kinds of filters, this part of the filter is to introduce the basic filter selector of a supplement, for page selection, set element display, etc. play an important role. The selectors are described in detail below.
(1): Contains selector.
(2): Empty selector.
(3): Has selector.
(4):p arent 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>
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 ();
3. Visibility Filter Selector
The Visibility filter selector is simpler and consists of two selectors, mainly for matching all visible and invisible elements. The two selectors are described in detail below.
(1): Hidden selector.
(2): visible selector.
Example:
Copy Code code as follows:
<ul>
<li> Visible </li>
<li style= "Display:none;" > Not visible </li>
</ul>
Invisible Li content results are not visible
JQuery ("Li:hidden"). Text ();
Visible Li's content result is visible
JQuery ("Li:visible"). Text ();
4. Attribute Filter Selector
The property filter selector is used to match the element that contains the given property, and of course it can match elements that do not contain this attribute. The attribute filter selector altogether contains the following 7 selector types.
(1) [attribute] Selector.
(2) [Attribute=value], [Attribute!=value] Selector (contains two).
(3) [Attribute^=value], [Attribute$=value], [Attribute*=value] Selector (contains three kinds).
(4) [Selector][selector2] Selector.
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 ());
5. child element Filter Selector
HTML is made up of layers of nested tags, and because some labels need to be handled separately, how to select one or some specific nested tags becomes a problem in the program. jquery provides a child element filter selector to solve this problem. It includes 4 selectors, which will be explained in detail below.
(1): Nth-child selector.
(2): First-child,: Last-child selector (two kinds).
(3): Only-child selector.
6. Form Object Properties Filter Selector
This section is fairly simple and contains only four types of selectors that match the available elements or unavailable elements, selected elements, and so on. This part of the content is explained in the form of an instance below.
(1): Enabled,:d isabled selector.
(2): Checked selector.
(3): Selected selector.
The form filter selector is a selector for working with forms in HTML, including not only buttons that are often used, text fields, radio boxes, check boxes, and so on, but also very rarely used pictures, hidden fields, file uploads, and so on. These selectors are described in detail below.
(1): input selector.
(2): text,:p assword selector.
(3): Radio,: CheckBox selector.
(4): Submit,: Image,: Reset,: button,: File selector.
(5): Hidden selector.
The query 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.
