jquery Selector Encyclopedia

The

 jquery selector makes it easier and more flexible to get page elements, which greatly eases developer stress. 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

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. The selector has the following characteristics: 1. Simplify code writing 2. An implicit iteration of 3. There is no need to determine whether an object exists where "$" is an integral part of the selector, and in the jquery library $ is a shorthand for jquery, such as $ ("#foo") and jquery ("#foo") as equivalent, and $.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 basic selector includes 5 kinds of selectors: #id, Element,. class, * and Selectorl,selector2.selectorn, and the following example describes each selector's function and use method separately. 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. The element selector element selector is one of the elements used for searching. The label name that points to the DOM node. The return value is Array<element (s) >. 3. Class selector. The classes selector matches an element based on a given class, and is a search-for category. An element can have multiple classes, as long as a match can be matched to, and its return value is Array<element (s) >.   Example:   code as follows: <input type= "text" id= "id" value= "SELECT according to ID"/> <a> select </a> <input type= based on element name Text "class=" classname "value=" selects/> jQuery ("#ID") based on the element CSS class name. 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 * Selector is used in conjunction with context to search, matching all elements of the selector. Its return value is Array<elemeNT (s) >. 5. Selector1,selector2,selectorn selector This type of selector selector will be returned together with 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. The level selector 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. The ancestor descendant selector 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. The Parent>child selector 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. The Prev+next selector's role is to match all next elements immediately after 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 Prev ~ siblings selector represents all prev elements after matching the siblings 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) >.   Example: Code as follows: <div id= "Divtest" >         <input type= "text" value= "investment"/>   &nbsp     <input id= "Next" type= "text"/>         <input type= "text"  value= "Serve"/&G T         <input type= "text" title= "learning" value= "learning"/>         <A>1</A >         <a>2</a> </div>//The result of the a tag content in Div is jQuery ("#divTest a"). Text (); Output Div Direct child node result for investment JQuery ("#divTest >input"). Val (); The output ID is the latter of the same level element of next as the result of JQuery ("#next +input"). Val (); Ditto, and there is the element of title that results for learning jQuery ("#next ~[title]"). Val (); Third, filter selector filter selector mainly through specific filtering rules to filter out the required DOM elements, filtering rules and CSS in the pseudo-class selector syntax, that is, selectors start 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 Basic Filter selector is the most commonly used filter selector, which mainly includes the following forms, in this detailed description: (1): First/:last selector. (2): not selector. (3): Even and: Odd selector. (4): EQ:GT,: LT, selector. (5): Header selector. (6): Animated selector. Example:   code as follows: <div id= "Divtest" >     <ul>         <li> investment </li> &nbs P       <li> financing </li>     &NBsp   <li> Maturity </li>         <li> serving </li>         <input t Ype= "Radio" value= "Learning" checked= "checked"/>         <input type= "Radio" value= "Do not learn"/>     </ul> </div>//First Li content results for investment jQuery ("Li:first"). Text (); The last Li content results for acting as jQuery ("Li:last"). Text (); Input is not selected value result is not learning jQuery ("Li Input:not (: Checked)"). Val (); The index for even Li results in the investment of mature jQuery ("Li:even"). Text (); Index for odd Li results for financial management as JQuery ("Li:odd"). Text (); The contents of Li with index greater than 2 result in the acting JQuery ("LI:GT (2)"). text (); The content result of Li with index less than 1 is investment jQuery ("li:lt (1)"). text (); 2. Content Filter Selector Content Filter 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:     code as follows: <div id= "Test" >     <ul>         <LI>HYIP Investment & lt;/li>         <li>hyip</li>     &NBSp   <li></li>         <li> financing </li>         <LI>&L T;a> Investment </a></li>     </ul> </div>   //Hyip Li content results for HYIP investment HYIP JQuery ("Li:contains (' Hyip ')"). text (); The contents of the latter Li of the empty Li content result for the wealth management JQuery ("Li:empty+li"). Text (); The content of Li containing a label results in the investment JQuery ("Li:has (A)"). text (); 3. The Visibility filter Selector 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:   code is as follows: <ul>     <li> visible </li>     <li style= "Display:none;" The contents of > Invisible </li> </ul>//Invisible Li are not visible to JQuery ("Li:hidden"). Text (); The visible Li content results in visible jQuery ("li:visible"). Text (); 4. The Property Filter Selector Property Filter Selector is used to match elements that contain a 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. For example: The code is as follows: <input type= "text" Name= "Hyipinvest "value=" Hyip investment "/> <input type=" text "name=" Investhyip "value=" Investment Hyip "/> <input" text "name = "Google" value= "Hyip"/>//name hyipinvest value result is HYIP investment alert (jQuery ("Input[name= ' hyipinvest ')"). Val ()); The value that the name starts with HYIP results in the HYIP Investment alert (jQuery ("input[name^= ' Hyip ')"). Val ()); The result of name ending with HYIP is the investment Hyip alert (jQuery ("input[name$= ' Hyip ')"). Val ()); Name contains OO value results for HYIP alert (jQuery ("input[name*= ' oo ')"). Val ());   5. The 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.   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.