jquery Selector Learning Finishing (basic selector, hierarchy selector, pseudo-class selector, attribute filtering, content filtering, visibility filtering, range selector, exclusion selector)

Source: Internet
Author: User

In general, the Picker engine rule is: $ (' query string ').

Most commonly used most basic is: 1, Tag Selector (with document element as the selector): $ ("div"), 2, ID selector (with ID as the selector): $ ("#demo1"), 3, class selector (with class as the selector): $ (". Selected"), 4, Group selector: $ (". Class1,. Class2,. Class3"); 5, descendant selector: $ ("P span")

The combination of multiple rules will be our working hand, here are some examples:

A hierarchy selector: It is an element matching through the nesting relationships of the DOM.

A, contains the selector: $ ("#contain div")-match all the div under the element with ID contain, that is, to match all descendant elements under a given ancestor element, not necessarily a child element.

B, sub-selector: $ ("#contain >. Class1")--match the element with the ID contain all the child elements of the Class1 class, which matches all child elements under a given parent element, and must be a child element, the generational will not be.

C, adjacent selector: $ (". contain + div")--matches all. Contain elements of the next tightly connected. Class1 sibling element, equivalent to using next.

D, brother selector: $ (". Contain ~ div")--match all the sibling div elements after the. contain element, note that the sibling elements before the contain element are not counted.

Second, through the pseudo-class to filter the selection

(1), specific position selector

: first--matches the 1th element found, for example: $ (' Li:first ')

: last--matches the last element found, for example:$(‘li:last‘)

: eq--matches an element of a given index value, for example:$("tr:eq(1)")

(2), specify range Selector

: even--matches all elements with an even number of indexed values, for example:$("tr:even")

: odd--matches all elements with an odd index value, for example: $ ("tr:odd")

: GT (Index)--matches all elements that are greater than the given index value, for example:$("tr:gt(0)")

: LT (Index)--matches all elements that are less than the given index value, for example:$("tr:lt(2)")

(3), exclude selector

: not--removes all elements that match a given selector, such as:$("input:not(:checked)")

(4), Visibility filtering

: hidden--matches all invisible elements, or elements of type hidden, for example:$("input:hidden")

: visible--matches all visible elements, for example:$("tr:visible")

(5), content filtering

: Contains (text)--matches the element containing the given text, such as finding all div elements that contain "John":$("div:contains(‘John‘)")(第一次见到,先备忘一下)

: empty--matches all empty elements that do not contain child elements or text, for example:$("td:empty")

:p arent--matches elements that contain child elements or text, for example:$("td:parent"),与前一个相对

: Has (selector)--matches the element that contains the element that the selector matches, is the selector for the filter,$("div:has(p)").addClass("test");给所有包含p元素的 div 元素添加一个text类

(6), attribute filtering

[attribute]--matches the element that contains the given attribute, for example: Find all DIV elements with an id attribute$("div[id]")

[attribute=value]--matches a given property is an element of a particular value, for example: Find all the name attribute is newsletter INPUT element--$("input[name=‘newsletter‘]"),用的蛮多的

[attribute!=value]--matches all elements that do not contain the specified attribute, or the attribute is not equal to a specific value.] Usage Ibid.

      [attribue^=value]--matches a given property is an element that starts with some value and feels a bit like a regular match, $("input[name^=‘news‘]")

[attribue$=value]--matches a given property is an element that ends with some value, as in the

[attribute*=value]--matches the given attribute to an element that contains some value,$("input[name*=‘man‘]"),name="man-news"和name="milkman"都能匹配

[Selector1] [Selector2] [selectorn]--Composite Property Selector is used when multiple conditions need to be met.$("input[id][name$=‘man‘]")

(7), sub-selector

: first-child--matches the first child element, for example:$("ul li:first-child"),在每个ul中查找第一个li

: last-child--matches last child element, same as above

: Nth-child ()--matches the nth child or odd and even element under its parent element: Nth-child starting from 1 (: eq () is calculated from 0, for example:$("ul li:nth-child(2)"),在每个ul查找第2个li。

        :nth-child(2)

        :nth-child(even)

        :nth-child(odd)

        :nth-child(3n)

参考:1、http://www.cnblogs.com/xuxiuyu/p/5989278.html#3552284

2, http://hemin.cn/jq/nthChild.html

jquery Selector Learning Finishing (basic selector, hierarchy selector, pseudo-class selector, attribute filtering, content filtering, visibility filtering, range selector, exclusion selector)

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.