JQuery selector comprehension _ jquery

Source: Internet
Author: User
When $ is used, the returned value is an object $ selector, which is mainly used to select tags. The basic usage is the same as the css selector. $ Selector:
When $ is used, the returned value is an object.
$ Selector is mainly used to select tags. the basic usage is the same as the css selector. however, he supports common browsers, and many selectors in css are not supported by ie6.
1. Basic selector (3 types): ---- when $ is used, the returned value is an object.
$ ("Tag name"), for example, $ ("p") selects all p tag nodes.
$ ("# Id name"), for example, $ ("# test") is a label node with the id as test.
$ (". Class Name"), for example, $ (". test") is a label node that selects all classes as test.
The above $ ("tag name") and $ (". class Name ") returns all satisfied nodes. For further filtering, you can add some functions, such as eq, gt, lt, and so on.
2. Group selector: ---- a combination of the three basic selectors separated by commas (,).
The following is a convention: Remember "tag name or # id name or. class Name" as mix, then mix indicates a tag name, or a # id or. class.
$ ("Mix,..."), for example: $ ("p, # test1, p,. test2, # test3 ")

3. Descendant selector: ---- a combination of the three basic selector types, which are separated by commas (,) and take effect immediately.
$ ("Mix"), of course, can be multiple nesting, but the descendant selector can be a deep child, so $ ("mix... ") This writing method does not play a major role. example: $ ("p. test "): all descendant elements of the class with test in the p label (that is, the label with the class attribute nested by p as test)

4. Sub-selector: ---- a combination of the three basic selectors, separated by ">", valid only for parent-child
$ ("Mix> mix"), which is placed behind the descendant selector for comparison. The child selector can only select the first generation of child. It does not process deep nesting. Example:
$ ("P>. test ")

The p section label is valid.

The p section label here is invalid.
$ ("P. test)
5. Near selector: ---- a combination of the three basic selector types, separated by "+", with only the next sibling Node
$ ("Mix + mix") and select the next sibling node. For example, $ ("p + # test"). The node with id test must be the next sibling node of p.

You can get the p section node in $ ("p + # test ").

You cannot obtain
6. Attribute selector: ---- "| = | ^ | $ | *"
The attribute selector is not placed in the css selector because jQuery is written differently. for how to write in css, refer to the css selector article I wrote earlier. jQuery is similar to xPath:
$ ("Mix [@ attr]"): select all nodes with the attr attribute of the mix.
$ ("Mix [@ attr = a_value"]): select all nodes with the attr attribute and whose attribute value is a_value.
$ ("Mix [@ attr ^ = a_value_head"]): the attribute value of attr starts with a_value_head.
$ ("Mix [@ attr $ = a_value_end"]): the attribute value of attr ends with a_value_end.
$ ("Mix [@ attr * = a_value"]): the attr attribute's attribute value contains a_value.

7. Restriction selector:
This name is my own name. In fact, there are limited meanings in the selector combination. You can understand the knowledge described later.
Limited stator node selector: $("mix1 [mix2]"): returns the mix1 node containing mix2. For example: $ ("p [a]"): p containing the tag.
This is not the same as $ ("p a"). The latter indicates the tag in p and returns the tag object. The former returns the p tag object.
Colon limit node selector: $ ("mix: condition"): mix label, and meet the conditions.
E: root: the type is E and is the root element of the document.
E: nth-child (n): A child element whose nth type is E. The base number starts from 1.
E: first-child: it is the first child element of its parent element of Type E.
E: last-child: A child element whose last type is E.
E: only-child: And is the only child element of its parent element of the Type E.
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.