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

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)