JQuery Selector Understanding _jquery

Source: Internet
Author: User
Tags tag name

the selector portion of the $:
In the use of $, the return value is an object
The $ selector is primarily used to select labels. The basic usage is the same as the CSS selector. But, to be very exciting, he supports common browsers, and many of the selectors in CSS are not supported by IE6.
1. Basic selector (3 kinds):----usually use $, its return value is an object
$ ("tag name"), such as $ ("P") is selected for all P tag nodes
$ ("#id名"), such as $ ("#test") is a label node with the ID test selected
$ (". Class name"), such as $ (". Test") is a label node that selects all class test
The above $ ("tag name") and $ (". Class name") return all the satisfied nodes, and for further filtering you can add some functions, such as eq,gt,lt and so on.
2. Group selector:----A combination of 3 basic selectors, "," separated
The following is a convention: "label or #id name or. Class name" As Mix, then mix represents a label name, or a #id or a. class.
$ ("Mix,mix,mix,..."), such as: $ ("Div, #test1, p,.test2, #test3")

3. Descendant selector:----The combination of 3 basic selectors, "" "separated, the immediate effect of
$ ("Mix Mix"), of course it can be multiple nesting, but the descendant selector can be a deep descendant, so $ ("mix mix ...") is not very useful. Example: $ ("div. Test"): the descendant element of all class with Test in the DIV tag ( is a label that is nested by DIV with the class attribute of test

4. Sub selector:----3 basic selector combinations, ">" separated, only parent-child effective
$ ("Mix>mix"), which is placed behind the descendant selector to contrast it. The child selector can only select the first generation of descendants. Do not process deep nesting. Example:
$ ("Div>.test")
<div><p class= "Test" ></p></div> is valid for the p paragraph label here. But for
<div><p><p class= "Test" ></p></p></div> is not valid for the P paragraph label here.
$ ("div. Test")
5. Proximity selector:----3 basic selector combinations, "+" separated, only the next sibling node
$ ("Mix+mix"), select the next sibling node. For example: $ ("div + #test"), the node with the test ID must be the next sibling node of the Div.
<div></div><p id= "Test" ></p> in $ ("div + #test") can be taken to the p paragraph node
<div></div><p></p><p id= "Test" ></p> will not be able to take
6. Attribute selector:----"|=|^|$|*"
The attribute selector is not placed inside the CSS selector because it is written differently in jquery. As for the CSS, the writing can refer to the text of a CSS selector I wrote earlier. jquery is a similar notation to XPath:
$ ("mix[@attr]"): Select all nodes that have attr properties for the mix
$ ("mix[@attr =a_value"]): Select all of the mix with attr attributes and satisfy the a_value of the property values
$ ("mix[@attr ^=a_value_head"]): The property value of the Attr property begins with A_value_head
$ ("mix[@attr $=a_value_end"]): The property value of the Attr property ends with A_value_end
$ ("mix[@attr *=a_value"]): Attr property value contains A_value

7. Limit selector:
This name is my own, in fact, the selector combination has a limited meaning, you understand the knowledge described in the following.
has a qualified child node selector: $ ("mix1[mix2]"): Returns the MIX1 node containing the mix2. such as: $ ("Div[a]"): Div containing a label.
This is not the same as $ ("div a"). The latter represents a tag in the Div, and returns a Label object, which returns a DIV tag object.
Colon-Qualified node selector: $ ("Mix:condition"): Mix label, and meet qualifying criteria.
E:root: Type E, and is the root element of the document
E:nth-child (N): is a child element of the nth type E of its parent element, starting with a base of 1
E:first-child: Is the 1th child element of its parent element of type E
E:last-child: Is the child element of the last type E of its parent element
E:only-child: And is the only child element of its parent element of type E

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.