Summarize jquery Selector

Source: Internet
Author: User

Original: Summarize jquery selector

Basic Selector

1. ID selector (Specify ID Element)

2. Class selector (Traverse CSS class Element)

3. Element selector (traverse HTML element)

4. * Selector (traverse all elements)

5. Parallel selector $ (' P,div '). CSS (' margin ', ' 0 ');

Hierarchy Selector

1. Parent > Child (direct Element)

2. Prev + next (next sibling element, equivalent to Next () method)

3. Prev ~ siblings (all sibling elements of the Prev element, equivalent to the Nextall () method)

Filter Selector1. Basic Filter Selector

--1.1:first and: Last (take first element or final element)

--1.2:not (take non-element)

  $ (' Div:not (. Wrap) '). CSS (' color ', ' #FF0000 ');

--1.3:even and: Odd (take even or odd indexed elements, index starting at 0, even for even, odd for odd numbers)

--1.4:eq (x) (takes the element of the specified index)

--1.5:GT (x) and: LT (x) (elements greater than x index or less than x index)

$ (' ul li:gt (2) '). CSS (' color ', ' #FF0000 ');            $ (' ul li:lt (2) '). CSS (' color ', ' #0000FF ');

--1.6:header (take H1~h6 title Element)

$ (': Header '). css (' background ', ' #EFEFEF ');
2. Content Filter Selector

--2.1:contains (text) (takes the element containing text)

$ (' Dd:contains (' jQuery ') '). CSS (' color ', ' #FF0000 ');

--2.2:empty (takes elements that do not contain child elements or empty text)

$ (' Dd:empty '). HTML (' no content ');
--2.3:has (selector) (selects the element that matches the selector)
$ (' Div:has (span) '). CSS (' border ', ' 1px solid #000 ');

--2.4:p arent (takes elements that contain child elements or text)
$ (' ol li:parent '). CSS (' border ', ' 1px solid #000 ');
3. Visibility Filter Selector

--3.1:hidden (take invisible elements)

jquery to 1.3.2: The hidden selector matches only the elements of Display:none or <input type= "hidden", not the/> or visibility:hidden elements. This also means that hidden matches only those elements that are "hidden" and do not occupy space, and elements like Visibility:hidden or opactity:0 occupy space and are excluded.

--3.2:visible (take visible elements)

4. Attribute Filter Selector

--4.1 [attribute] (takes the element that owns the attribute property)

$ (' a[title] '). CSS (' text-decoration ', ' none ');

--4.2 [attribute = value] and [attribute! = value] (takes an element with a attribute attribute value equal to or not equal to value)

$ (' a[class=item] '). CSS (' color ', ' #FF99CC ');

$ (' a[class!=item] '). CSS (' color ', ' #FF6600 ');

--4.3 [attribute ^= value], [attribute $= value] and [attribute *= value] (attribute attribute value starts with value, ends with value, or contains value)

--4.4 [Selector1][selector2] (composite attribute filter, satisfying multiple conditions simultaneously)

5. Child element Filter Selector

--5.1:first-child and: Last-child


When an element has and has only one child element, the only-child takes effect.


: There are three ways to use Nth-child:

1): Nth-child (x), gets the x child element
2): Nth-child (even) and: Nth-child (odd), starting from 1, obtaining an even number of elements or an odd number of elements
3): Nth-child (Xn+y), x>=0,y>=0. For example, x = 3, y = 0 o'clock is 3n, which means take the first 3n element (n>=0). In fact, the xn+y is the above two kinds of the general formula. (when x=0,y>=0, equivalent to: Hth-child (x), when x=2,y=0, equals to Nth-child (even); when X=2,y=1, equals: Nth-child (odd))

6. Form object property Filter Selector

--6.1:enabled and: Disabled (take available or not available elements)

: The matching range of enabled and: diabled includes input, select, textarea.

--6.2:checked (selects the selected radio box or check box element)

The following code, changing the border or background color only works under IE, Chrome and Firefox will not change, but alert will pop out.

--6.3:selected (Remove the selected element from the Pull list)

Form Selector

1.: input (take Input,textarea,select,button Element)

: The input element is no longer spoken here, and some of the previous examples have been included.

2.: text (take single line text box element) and: Password (take password box element)

These two selectors are equivalent to the property selector $ (' input[type=text] '), $ (' input[type=password] '), respectively.

3.: Radio (take single MARQUEE Element)

: Radio Selector and property selector $ (' input[type=radio] ') equals

4.: CheckBox (Take check box Element)

: CheckBox Selector and Property selector $ (' input[type=checkbox] ') equals

5.: Submit (Take the submit button element)

: The submit selector and the property selector $ (' input[type=submit] ') equals

6.: Reset (take reset button Element)

: Reset Selector and Property selector $ (' input[type=reset] ') equals

7.: button (take buttons Element)

: Button Selector and property selector $ (' Input[type=button] ') equals

8.: File (take upload domain Element)

: File Selector and Property selector $ (' input[type=file] ') equals

9.: Hidden (take invisible Element)

: Hidden selector and Property selector $ (' input[type=hidden] ') equals

Summarize jquery Selector

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: 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.