Getting started with jQuery (1) a versatile selector in jQuery

Getting started with jQuery (1) a versatile selector in jQuery
To compile any JavaScript program, we need to first obtain the object. The jQuery selector can completely change the method of getting the object at ordinary times and obtain almost any semantic object, for example, "a <a> element with a title attribute and a value containing test", you only need to compile a jQuery selector string to complete these tasks. Learning jQuery selector is the most important step to learn jQuery. 1. Whether writing a program or reading an API document, we should always distinguish between a Dom object and a jQuery packaging set. 1. in traditional JavaScript development, we first obtain Dom objects, such as: 1 var div = document. getElementById ("testDiv"); 2 var divs = document. getElementsByTagName ("div"); we often use document. the getElementById method obtains a single Dom object based on the id, or uses document. the getElementsByTagName method obtains the Dom object set based on the HTML Tag name. In addition, in the event function, you can use this in the method function to reference the event trigger object (but IE6 has a problem in the multicast event function), or use the target (FF) of the event object) or srcElement (IE6) gets the Dom object that triggers the event. Note that all Dom objects are obtained here, and Dom objects have different types, such as input, div, and span. Dom objects have only limited attributes and Methods: 2. jQuery packaging set can be said to be an extension of Dom objects. In the world of jQuery, all objects, whether in one or a group, are encapsulated into a jQuery packaging set, for example, getting a jQuery packaging set containing an element: var jQueryObject = $ ("# testDiv"); The jQuery package set is called together as an object. The jQuery package set has rich attributes and methods, which are unique to jQuery: 3. conversion of Dom objects and jQuery objects (1) Conversion of Dom to jQuery packaging set if you want to use the functions provided by jQuery, you must first construct the jQuery packaging set. We can use the jQuery selector introduced in this article to directly construct the jQuery package set, for example, $ ("# testDiv"); the package set constructed in the preceding statement contains only one element whose id is testDiv. Or we have obtained a Dom element, such as var div = document. getElementById ("testDiv"); In the code above, div is a Dom element. We can convert the Dom element into a jQuery packaging set: var domToJQueryObject = $ (div). Then, for example: convert window object and document Object to jQuery object $ (window ). height (); $ (document ). height (); (2) Conversion from jQuery packaging set to Dom object jQuery packaging set is a set, so we can access one of the elements through the indexer: var domObject = $ ("# testDiv") [0]; note that the returned result through the indexer is no longer a jQuery package set, but a Dom object! Some traversal methods of the jQuery package set, such as each (), can pass the traversal function. In the traversal function, this is also a Dom element, such as: $ ("# testDiv "). each (function () {alert (this) ;}) what if we want to use jQuery to operate Dom objects? Use the conversion method described above: $ ("# testDiv "). each (function () {detail (this).html ("modify content") ;}) Summary: Let's clarify the concepts of Dom objects and jQuery packaging sets, which will greatly accelerate our learning speed. I spent a long time learning jQuery and did not understand the specific differences between the two, because the book did not specifically explain the differences between the two, therefore, it is often confused by the question of why the "this pointer cannot call the jQuery method. One day, I found that as long as the two can be distinguished, it will become clear when writing programs. Ii. What is the jQuery selector? In Dom programming, we can only use limited functions to obtain Dom objects based on id or TagName. In jQuery, it is completely different. jQuery provides an extremely powerful selector to help us get objects on the page and return objects in the form of a jQuery package set. First, let's take a look at what the selector is: 1 // get the jQuery packaging set 2 var jQueryObject = $ ("# testDiv") based on the ID; In the above example, the ID selector is used, select the Dom object whose id is testDiv and put it into the jQuery package set, and return the result in the form of the jQuery package set. The "$" symbol represents a reference to a jQuery object in jQuery. "jQuery" is the core object and contains the following methods: jQuery (expression, context) Returns: jQuery receives a CSS selector string and matches a group of elements with this string. This function accepts a string containing a CSS selector which is then used to match a set of elements. jQuery (html, ownerDocument) Returns: jQuery dynamically creates Dom elements based on the original HTML string. create DOM elements on-the-fly from the provided String of raw HTML. jQuery (elements) Returns: jQuery encapsulates one or more Dom objects into jQuery function functions (that is, the jQuery package set) Wrap jQuery functionality around a single or multiple DOM Element (s ). jQuery (callback) Returns: Short for jQuery $ (document). ready () A shorthand for $ (document). ready (). This is extracted from the jQuery official manual. When the Returns type is jQuery, it indicates that the returned jQuery package set is used. The first method has some problems. The official interface writes the CSS selector, but in fact this method not only supports the CSS selector, but also all the selectors supported by jQuery, some are even jQuery-defined selectors (selectors that do not exist in the CSS standard ). To make it clearer, I modified the method as follows: jQuery (selector, context) Returns: The jQuery package set selects matching Objects Based on the selector and Returns the results in the form of a jQuery package set. Context can be a Dom object set or a jQuery package set. If it is passed in, it indicates that you want to select a matching object from the context. If it is not passed in, it indicates that the range is a Document Object (that is, all objects on the page ). The above method is the core method used by the selector. You can use "$" instead of jQuery to make the syntax more concise. For example, the effect of the following two statements is the same: 1 // obtain the jQuery packaging set based on the ID. 2 var jQueryObject =$ ("# testDiv"); 3 4 // $ is a reference to the jQuery object: 5 var jQueryObject = jQuery ("# testDiv"); Next let's learn the jQuery selector. Iii. jQuery Selector: In general, the Selector is a string that represents special semantics ". You only need to pass the selector string to the above method to select different Dom objects and return them as jQuery wrapper sets. But how to classify the jQuery selector makes me hard. Because the classification in the book is quite different from the official jQuery classification. Finally, I decided to focus on practicality. For the moment, I did not understand the CSS3 selector standard, but explained it according to the official jQuery classification. JQuery's selector supports the CSS3 selector standard. The following is W3C's latest CSS3 selector standard: selectors in the http://www.w3.org/TR/css3-selectors/ standard can be used in jQuery. The jQuery selector is divided into "select" and "filter" by function ". It is used in combination. You can combine them into a selector string. The main difference is that the Selector Used by "filter" is to specify a condition to filter from the content that matches the previous one. The "filter" selector can also be used independently to filter all. For example, $ (": [title]") is equivalent to $ ("*: [title]"), while the selector of the "select" function does not have a default range, because the function is "select" rather than "filter ". In the following selector category, the classification with a "filter" indicates a "filter" selector. Otherwise, it is the selector of the "select" function. JQuery selectors are divided into the following types: 1. basic selector Basics Name Description Example # id select $ ("divId") based on element Id select element with ID divId selected based on element name, $ ("") select all <a> elements. class: Select $ (". bgRed ") Select the element whose CSS class is bgRed * select all elements $ (" * ") select all elements of the page selector1, selector2, and selectorN can use several selectors ", "separated and then combined into a selector string. the matching contents of these selectors are selected at the same time. $ ("# divId, ,. bgRed ") 2. for example, ancestor descendant Selects all input elements in the form of "form input. that is, ancestor (ancestor) is from, descendant (descendant) Is input. $ (". bgRed div ") select all <div> elements in the element whose CSS class is bgRed. parent> child: select the child node of the parent directly. child must be included in the parent and the parent class is a parent element. $ (". myList> li ") Select the CSS class as the direct subnode <li> object in the myList element. prev + next prev and next are two elements of the same level. select the next element after the prev element. $ ("# hibiscuus + img") Select the img object after the id is the hibiscuus element. prev ~ Siblings selects the elements filtered by siblings after prev. Note: siblings is a filter $ ("# someDiv ~ [Title] ") select all the elements with the title attribute after the object whose id is someDiv. basic filter Basic Filters Name Description Example: first matches the first element found to find the first row of the table: $ ("tr: first "): last match the last element found to find the last row of the table: $ ("tr: last"): not (selector) remove all elements that match the given selector to find all unselected input elements: $ ("input: not (: checked)"): even matches all elements whose index values are even, count from 0 to search for tables 1, 3, 5... row: $ ("tr: even"): odd matches all elements with an odd index value and starts counting from 0 to search for rows 2, 4, and 6 of the Table: $ ("tr: odd "): eq (index) matches an element of a given index value. Note: index starts counting from 0 and searches for the second row: $ (" tr: eq (1 )"): gt (index) With all elements greater than the given index value. Note: index starts counting from 0 and searches for the second and third rows, that is, the index value is 1 and 2, which is greater than 0: $ ("tr: gt (0) "): lt (index) select elements whose index is less than N in the result set. Note: index starts counting from 0 and searches for the first and second rows, that is, the index values are 0 and 1, that is, the header is smaller than 2: $ ("tr: lt (2)"): Select All header labels such as h1, h2, and h3. add the background color to all titles on the page: $ (": header" ).css ("background", "# EEE ");: the animation matches all the elements that are executing the animation effect. Only one animation effect is executed for the elements that are not executing the animation effect: $ ("# run "). click (function () {$ ("div: not (: animated )"). animate ({left: "+ = 20"}, 1000) ;}); 4. content Filter Content Filt Example of ers Name Description: contains (text) matches the element containing the given text to find all div elements containing "John": $ ("div: contains ('john ')"): empty matches all empty elements that do not contain child elements or text to find all empty elements that do not contain child elements or text: $ ("td: empty"): has (selector) add a text class $ ("div: has (p)") to all div elements that contain p elements by matching the elements that match the selector )"). addClass ("test");: the parent matches the element containing the child element or text to find all the td elements containing the child element or text: $ ("td: parent") 5. visibility filter Visibility Filters Name Description Example: hidden matches all invisible elements note: In Version 1.3.2, hidden matches itself or its parent class with no space in the document. if you use CSS If the visibility attribute does not display but occupies a place, you do not enter hidden. find all invisible tr elements: $ ("tr: hidden"): visible match all visible elements find all visible tr elements: $ ("tr: visible") 6. attribute filter attribute Filters Name Description Example [Attribute] matches the element containing the given attribute to find all div elements containing the id Attribute: $ ("div [id]") [attribute = value] matching a given attribute is an element of a specific value. Finding all name attributes is the input element of newsletter: $ ("input [name = 'newsletter ']"). attr ("checked", true); [attribute! = Value] matching a given attribute is an element that does not contain a specific value to find all the input elements whose name attribute is not newsletter: $ ("input [name! = 'Newsletter'] "). attr ("checked", true); [attribute ^ = value] matches the given attribute with elements starting with some values $ ("input [name ^ = 'News']") [attribute $ = value] matches the given attribute to search for all input elements whose names end with 'letter' based on elements whose values end: $ ("input [name $ = 'Letter ']") [attribute * = value] matching a given attribute is to search for all input elements whose names contain 'man' based on elements that contain certain values: $ ("input [name * = 'man']") [attributeFilter1] [attributeFilter2] [attributeFilterN] composite attribute selector, which must meet multiple conditions at the same time. Find all the attributes that contain id and whose name attributes end with man: $ ("input [id] [name $ = 'man']") 7. for example, nth-Child (index/even/odd/equation) matches the nth child or parity element ': eq (index) under its parent element) 'only matches one element, and this will match the child element for each parent element.: Nth-child starts from 1, while: eq () is counted from 0! You can use: nth-child (even): nth-child (odd): nth-child (3n): nth-child (2): nth-child (3n + 1 ): nth-child (3n + 2) searches for 2nd li: $ ("ul li: nth-child (2)"): first-child matches the first child element 'in each ul ': first matches only one element, and this selector matches one child element for each parent element to find the first li: $ ("ul li: first-child") in each ul "): last-child matches the last child element ': la' and only matches one element. This selector matches one child element for each parent element and searches for the last li in each ul: $ ("ul li: last-child"): only-child if an element is the only child element in the parent element, it will be matched if the parent element contains other elements, it will not be matched. Find li: $ ("ul li: only-child") 8. form selector Forms Name Description: input matches all input, textarea, select, And button elements to find all input elements: $ (": input "): text matches all text boxes to find all text boxes: $ (": text"): password Matches all passwords. Box: $ (": password "): radio match all single-choice buttons find all single-choice buttons: checkbox match all check boxes find all check boxes: $ (": checkbox"): submit match all submit buttons find all submit buttons: $ (": submit "): image match all image domains: $ (": image "): reset match all reset buttons find all reset buttons: $ (": reset "): button matches all buttons to find all buttons: $ (": button"): file matches all file domains to find all file domains: $ (": file") 9. form Filter Form Filters Name Description: enabled matches all available elements to find all available input elements: $ ("input: enabled "): disabled matches all unavailable elements to find all unavailable input elements: $ ("input: disabled"): checked matches all selected elements (check boxes, single-digit, etc, select option is not included.) Find all selected check box elements: $ ("input: checked"): selected matches all selected option elements to find all selected option elements: $ ("select option: selected ")