Jquery selector summary [preliminary]

Source: Internet
Author: User

1. Jquery introduction Jquery is another excellent Javascript framework after prototype. It is a lightweight js library that is compatible with CSS3 and various browsers. JQuery allows you to easily process HTML documents, events, and animation effects, and provides AJAX interaction for websites. JQuery can ensure that the user's html page is separated from the code and html content. That is to say, you don't need to insert a bunch of JavaScript code in the html to call the command. You just need to define the id. 2. for examples of JQuery and html separation, you do not need to add events such as onclick to call functions on the webpage. You can directly introduce the JQuery class library and self-compiled JQuery code; $ (function () {$ ("Element "). click {function () {alert ("clicked") ;}}); above function $ (function () {}); execute this function when the page is loaded. 3. some of JQuery's core methods, each (callback) // Like loop $ ("Element "). length; // number of elements, which is an attribute $ ("Element "). size (); // It is also the number of elements, but parentheses are a method $ ("Element "). get (); // a set of elements on the page, which is stored as an array $ ("Element "). get (index); // The function is the same as above. index indicates the nth Element, and the subscript of the array $ ("Element "). get (). reverse (); // returns the direction of the array $("Element1 "). index ($ ("Element2"); // the index value of element 2 in element 1 is... 4. get basic objects (Note: Jquery objects instead of Dom objects are obtained here, and they can be converted to each other) $ ("*") // It is not commonly used to obtain all objects $ ("# XXX") // obtain the Element Object with id = XXX (id can be the tag id or CSS style id) $ ("input [name = 'username']") // obtain the Element Object name = 'username' in the input tag. $ (". abc ") // obtain the name of the style class. $ ("div") // The tag selector Selects all div elements. obtain the level element $("Element1 Element2 Element3 .... ") // The subset behind the parent level $ (" div> p ") // obtain all p elements under the div $ (" div + p ") // The first p element after the div element $ ("div ~ P ") // All p elements behind the div 6. get a simple object $ ("Element: first") // the first Element of a certain Element in the HTML page $ ("Element: last ") // The last Element of a certain Element in the HTML page $ ("Element: not (selector)") // removes all elements that match the given selector, for example: $ ("input: not (: checked) ") indicates to select all the unselected check boxes $ (" Element: even ") // obtain an even number of rows $ (" Element: odd ") // obtain an odd number of rows $ ("Element: eq (index)") // obtain a given index value $ ("Element: gt (index )") // get all elements after the given index value $ ("Element: lt (index)") // get all elements before the given index value. 7. get content objects and object visibility $ ("Element: contains (text )") // Whether the Element contains text content $ ("Element: empty") // obtain the Element that does not contain child elements or text $ ("Element: partnt ") // obtain the $ ("Element: has (selector)") of the Element containing the child Element or text. // determine whether to include an Element, for example, $ ("p: has (span) ") represents all p elements containing span elements $ (" Element: hidden ") // select all visible elements $ (" Element: visible ") // select all invisible elements 8. method for obtaining other objects $ ("Element [id]") // all elements with the ID attribute $ ("Element [attribute = youlika]" // obtain all elements whose attributes are youlika $ ("Element [attribute! = Youlika] "// obtain all elements whose attributes are not youlika $ (" Element [attribute ^ = youlika] "// obtain elements whose attributes start with not youlika $ ("Element [attribute $ = youlika]" // obtain all elements whose attributes do not end with youlika $ ("Element [attribute * = youlika]" // obtain all attributes elements starting with youlika $ ("Element [selector1] [selector2] [...] ") // conforms to the attribute selector. For example, $ (" input [id] [name] [value = youlika] ") indicates that an ID is obtained. name and value are the input elements of youlika. 9. obtain the child Element $ ("Element: nth-child (index)") // select the nth Element under the parent level $ ("Element: nth-child (even) ") // select the even number under the parent level $ (" Element: nth-child (odd) ") // select the odd number under the parent level $ (" Element: nth-child (3n + 1) ") // expression $ (" Element: first-child ") // select the first child Element under the parent level $ (" Element: last-child ") // select the last child Element $ (" Element: only-child ") in the parent class. // match the unique child Element in the parent class, for example, if dt is unique in the dl list, dt10. the form object will be used to get $ (: input) // to search for all Input elements, including the drop-down list, text fields, single fields, check box. $ (: Text) // match all single-line text boxes $ (: password) // match all password boxes $ (: radio) // match all single-choice buttons $ (: checkbox) // match all the check boxes $ (: submit) // match all the submit buttons $ (: image) // match all image domains, for example, <input type = "image"/> $ (: reset) // match all reset buttons $ (: button) // match all buttons $ (: file) // match all file upload domains $ (: hidden) // match all invisible elements or elements with the type of hidden $ (: enabled) // match all available input elements. For example, radio: enabled indicates matching all available single-choice buttons $ (: disabled) // match all unavailable input elements, opposite: $ (: checked) // match all selected check box elements $ (: selected) // match all drop-down lists 11. setting and removing element attributes $ ("Element "). attr (name) // gets the first matching property value, for example, $ ("img "). attr ("src") $ ("Element "). attr (key, value) ") // you can specify the attribute $ (" Element ") for an Element "). attr ({key: value, key1: value ,....})) // set multiple attributes for an Element at one time $ ("Element "). attr (key, function) // set a calculated attribute value for all matched elements. $ ("Element"). removeAttr (name) // remove an attribute. For example: [src = http://download.csdn.net/detail/nuptboyzhb/6042401] Example 1:

<Html> 

 

Example 2:
<Html> 

 

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.