jquery Filter Selector

Basic Filter
$ (' Li:first '). CSS (' background ', ' #ccc ');//First element
$ (' Li:last '). CSS (' background ', ' red ');//Last element
$ (' Li:not (. red) '). CSS (' background ', ' red ');//elements that are not class red
$ (' Li:even '). CSS (' background ', ' red ');//elements indexed to even numbers
$ (' li:odd '). CSS (' background ', ' red ');//index is an odd number of elements
$ (' Li:eq (2) '). CSS (' background ', ' red ');//The element that specifies the index value
$ (' Li:gt (2) '). CSS (' background ', ' red ');//elements greater than the index value
$ (' Li:lt (2) '). CSS (' background ', ' red ');//elements less than the index value
$ (': Header '). css (' background ', ' red ');//Page All H1 ~ h6 elements

$ (' input '). Get (0). focus ();//Position the focus in the first input text box
$ (': Focus '). css (' background ', ' red ');//Set the focus element color
$ (': Focus '). Val (' bbbb ');////writes the focus element to a value

$ (' li '). EQ (2). CSS (' background ', ' #ccc ');//Element Li's third element, negative numbers start from the back
$ (' Li '). First (). CSS (' background ', ' #ccc ');//Elements Li
$ (' Li '). Last (). CSS (' background ', ' #ccc ');//Element Li's final element
$ (' Li '). Not ('. Red '). CSS (' background ', ' #ccc ');//Element Li does not contain a class red element

$ (' #box li:last '). CSS (' background ', ' #ccc ');//#box元素的最后一个 Li
$ (' #box Li). Last (). CSS (' background ', ' #ccc ');//Ibid.

Content Filter
Select element text node contains elements of ycku.com text
$ (' Div:contains (' ycku.com ') '). CSS (' background ', ' #ccc ');
$ (' Div:empty '). CSS (' background ', ' #ccc ');//Select Empty element
$ (' Ul:has (. red) '). CSS (' background ', ' #ccc ');//select child element containing class is red element
$ (':p arent '). css (' background ', ' #ccc ');//select non-empty elements
JQuery provides a have () method to improve: the performance of the has filter:
$ (' ul '). has ('. Red '). CSS (' background ', ' #ccc ');//select child element containing class is red element

$ (' Li '). Parent (). CSS (' background ', ' #ccc ');//Select the parent element of the current element
$ (' Li '). Parents (). CSS (' background ', ' #ccc ');//Select the parent and ancestor elements of the current element
$ (' Li '). Parentsuntil (' div '). css (' background ', ' #ccc ');//select current element to encounter Div parent element stop

$ (' Li:first-child '). CSS (' background ', ' #ccc ');//The first LI element of each parent element
$ (' Li:last-child '). CSS (' background ', ' #ccc ');//The last Li element of each parent element
$ (' Li:only-child '). CSS (' background ', ' #ccc ');//each parent element has only one LI element
$ (' Li:nth-child (Odd) '). CSS (' background ', ' #ccc ');//The odd Li element for each parent element
$ (' Li:nth-child (even) '). CSS (' background ', ' #ccc ');//each parent element even LI element
$ (' Li:nth-child (2) '). CSS (' background ', ' #ccc ');//The third Li element of each parent element

Visibility filters
$ (' P:hidden). Size ();//element P hidden element
$ (' p:visible '). Size ();//element P display element

Child element Filter
$ (' Li:first-child '). CSS (' background ', ' #ccc ');//The first LI element of each parent element
$ (' Li:last-child '). CSS (' background ', ' #ccc ');//The last Li element of each parent element
$ (' Li:only-child '). CSS (' background ', ' #ccc ');//each parent element has only one LI element
$ (' Li:nth-child (Odd) '). CSS (' background ', ' #ccc ');//The odd Li element for each parent element
$ (' Li:nth-child (even) '). CSS (' background ', ' #ccc ');//each parent element even LI element
$ (' Li:nth-child (2) '). CSS (' background ', ' #ccc ');//The third Li element of each parent element

Other selectors
$ ('. Red '). Is (' Li ');//true, selector, detects if class is red
$ ('. Red '). Is ($ (' Li '));//true,jquery object collection, Ibid.
$ ('. Red '). Is ($ (' Li '). EQ (2));//true,jquery object Single, ibid.
$ ('. Red '). Is ($ (' Li '). Get (2));//true,dom Object Ibid.
$ ('. Red '). Is (function () {
True, method, Ibid.
return $ (this). attr (' title ') = = ' List 3 ';
Can customize various judgments
}));
$ (' li '). EQ (2). Hasclass (' red ');//And is just like, only pass class
$ (' li '). Slice (0,2). CSS (' Color ', ' red ');//first three turns red

$ ("div"). Find ("P"). End (). get (0);//returns the native DOM of the Div
$ (' div '). Contents (). Size ();//Returns the number of child nodes (including text)
$ (' li '). Filter ('. Red '). CSS (' background ', ' #ccc ');//Select Li's class as the red element
$ (' li '). Filter ('. Red,: First,: Last '). CSS (' background ', ' #ccc '); Added a choice
Special requirements function return
$ (' li '). Filter (function () {
return $ (this). attr (' class ') = = ' Red ' && $ (this). attr (' title ') = = ' List 3 ';
}). css (' background ', ' #ccc ');

Filter selector abbreviation: filter. It is actually a selector, and this selector is similar to CSS3
Pseudo-Class in (http://t.mb5u.com/css3/) can be supported by low-version browsers that do not support CSS3. and general
Like selectors, JQuery offers a number of unique filters to make it easier for developers to use.
A Basic Filter
Filters primarily filter the required DOM elements through specific filtering rules, and the syntax classes of pseudo-classes in CSS
Like: Start with a colon (:).

Attention:
: The focus filter, which must be an element in the initial state of the Web page that has already been activated to achieve element acquisition.
Instead of a mouse click or Tab key to activate the

Note: First,: Last and First (), last () the two sets of filters and methods when the same element appears, first
The first child element of the first parent element is implemented, and the last child element of the last parent element is implemented. So
If you need to identify which parent element, you need to specify:
$ (' #box li:last '). CSS (' background ', ' #ccc ');
The last li of the #box element
Or
$ (' #box Li). Last (). CSS (' background ', ' #ccc ');
Ditto

Two Content Filter
The filter rules for content filters are mostly contained in child elements or text content.

JQuery provides a name and a method similar to the parent, but this method does not pick a child element or text
Element, instead gets the parent element of the current element, and returns the collection of elements.
$ (' Li '). Parent (). CSS (' background ', ' #ccc ');

Three Visibility filters
The visibility filter selects the appropriate element based on the visibility and invisibility of the element.

Note: Hidden filters generally contain content: CSS style is display:none, input form type is
type= elements of "hidden" and Visibility:hidden.

Four Child element Filter
The filter rule for child element filters is to get the corresponding elements through the relationship between the parent element and the child element.

Five Other methods
JQuery also provides a number of common methods for selecting and filtering, which makes it easy to use when developing.

$ (' li '). Slice (0,2). CSS (' Color ', ' red ');
The first three turns red.
Note: This parameter has multiple methods of slice and JavaScript are the same as for example: Slice (2), from a third
Beginning to the last designates; slice (2,4), third and fourth are designated; Slice (0,-2), from the penultimate position, the forward selection
All; Slice (2,-2), top two and end two unselected.

jquery Filter Selector