first, the basic selector1. ID selector (Specify ID Element)
sets the element background color of id= "one" to black. (ID selector returned to a single element)
$ (document). Ready (() { $ (' #one '). CSS (' #000 ');});
2. Class selector (Traverse CSS class Element)
Sets the element background color of class= "cube" to black
$ (document). Ready (() { $ ('. Cube '). CSS (' #000 ');});
3. Element selector (traverse HTML element)
Set the text size of the P element to 12px
$ (document). Ready (() { $ (' P '). css (' 12px ');});
4. * Selector (Traverse all elements)
$ (document). Ready (() { //iterates through all the elements under the form, setting the font color to red $ ('form * '). CSS (' #FF0000 ');});
5. Parallel selector
$ (document). Ready (() { //Set the margin of P element and DIV element to 0 $ ('p, div '). css (' 0 ');});
second, level selector1. 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)Third, filter selector1. Basic Filter Selector
--1.1:first and: Last (take first element or final element)
--1.2:not (take non-element)
--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)
--1.6:header (take H1~h6 title Element)
2. Content Filter Selector
--2.1:contains (text) (takes the element containing text)
--2.2:empty (takes elements that do not contain child elements or empty text)
--2.3:has (selector) (selects the element that matches the selector)
--2.4:p arent (takes elements that contain child elements or text)
3. Visibility Filter Selector
--3.1:hidden (take invisible elements)
--3.2:visible (take visible elements)
4. Attribute Filter Selector
--4.1 [attribute] (takes the element that owns the attribute property)
--4.2 [attribute = value] and [attribute! = value] (takes an element with a attribute attribute value equal to or not equal to value)
--4.3 [attribute ^= value], [attribute $= value] and [attribute *= value] (attribute attribute value starts with value, ends with value, or contains value)
In the property selector, the ^$ symbol and the start end symbol of the regular expression represent a consistent meaning, * fuzzy matching, similar to the "%str%" in SQL.
--4.4 [Selector1][selector2] (composite attribute filter, satisfying multiple conditions simultaneously)
5. Child element Filter Selector
--5.1:first-child and: Last-child
: First-child represents the first child element: Last-child represents the last child element.
It is important to note that: Fisrst and: Last return is a single element, and: First-child and: Last-child returns a collection element. For example: Div:first returns the first DIV element in the entire DOM document, while Div:first-child returns the merged collection of the first element under all DIV elements.
--5.2:only-child
When an element has and has only one child element, the only-child takes effect.
--5.3:nth-child
See this reminds of English words, fourth, fifth, Sixth......,nth represents nth,: Nth-child represents the nth child element. Note that the n here is not like EQ (x), GT (x) or LT (x) is starting from 0, it is starting from 1, there seems to be no zeroth such an ordinal word in English.
: 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)
--6.3:selected (Remove the selected element from the Pull list)
four, 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)
Some of the jquery selector