JQuery selectors are the foundation of jQuery. They are indispensable to event handling and DOM traversal

JQuery selectors

1. JQ selectors inherit the advantages of CSS selectors,CSS selectors are found after the style, JQ selectors found after the action, JQ selectors fully support CSS1,CSS2,CSS3 all features.

2. Perfect processing mechanism.

Jquery selectors

One, basic selector

$(“#idName”).css(…)

$(“.classname “).css(…)

$(“p”).css(…)

$(“*”).css(…)

$(“p,div,ul,li”).css(…)

Two, hierarchical selector

$(“ul>li”).css(…)

Prev + next(the next sibling is equivalent to the next() method)

Example: $(“.item + div”).css(…) Is equivalent to $(” item “). The next (” div “). The CSS (…)

Prev ~ siblings (all siblings following the element, equal to nextAll() method)

For example: $(“.item ~ div”).css(…) Is equivalent to $(” item “). NextAll (” div “). The CSS (…)

Three, filter selector

3.1. Basic Filter selector

1.1, :first and :last (take the first or last element)

For example: $(" li: first "). The CSS (" color ", "white")

For example: $(" li: the last "). The CSS (" color ", "white")

1.2, not… The element)

For example: $(" div: not. (wrap) "). The CSS (" color ", "white")

1.3, :even and :odd (index from 0, even even, odd odd)

For example: $(" tr: odd "). The CSS (" color ", "red"); // Odd line font color

For example: $(" tr: even "). The CSS (" color ", "blue"); // Even line font color

Eq (x) (select the color of the specified index)

For example: $(" li: eq (0) "). The CSS (" color ", "blue"); // The font color of the first li is blue

1.5, :gt(x) and :lt(x) (take elements greater than x and less than x index)

For example: $(" li: gt (5) "). The hide ()

For example: $(" li: lt (5) "). The show ()

1.6, :header (take elements from H1-h6)

For example: $(" : the header "). The CSS (" background ", "blue")

3.2. Content Filter selector

2.1, :contains(text)

For example: $(" li: the contains (" JavaScript ") "). The CSS (" display ", "block")

2.2, :empty (takes an element with no children or empty text)

For example: $("li:empty").html(" no content ")

2.3, :has(selector)

For example: $(" div: from the (span) "). The CSS (" display ", "none")

Parent takes an element that contains child elements or text

$("ol li:parent").css("border","1px solid black")

1  <ol>
2    <li></li>
3    <li>A</li>
4    <li></li>
5    <li>D</li>
6  </ol>
Copy the code

3.3 visibility filter selector

3.1, :hidden(take an element that is not visible)

For example: $("div:hidden").show() //display:none; Or < input type = "hidden" >

//dispaly:block;

For example: $(" div: visible "). Hide ()

3.4. Property Filter selector

4.1, [attribule] (take an element with an attribute)

For example: $(" a [title] "). The CSS (" display ", "block")

4.2 [attribute = value] and [attribute! = value] (Take elements whose attribute value is equal to or not equal to value)

For example: $(" a [class = item] "). The CSS (...).

For example: $(" a [class! = item] "). The CSS (...).

4.3, [attribute ^= value], [attribute $= value], and [attribute *= value] (^attribute attribute values start with value, end with value, or contain value)

For example: $(' a [title ^ = jQuery] '). The CSS (' the font - weight ', 'bold');

$('a[title$=jQuery]').css('font-size', '24px');

$('a[title*=jQuery]').css('text-decoration', 'line-through');

4.4, [selector1][selector2] (compound attribute filter, satisfies multiple conditions simultaneously)

Such as: $(' a [title ^ = jQuery] [class = item] '). Hide ();

3.5. Child element filter selector

:first-child :last-child :last-child :last-child

5.2, :only-child When an element is the only child of the parent element…

Such as: $(' div: only - child). CSS (' border ', '1 px solid # FF0000'). The CSS (' width ', '200 px);

, 5.3: NTH – child

There are three uses for :nth-child:

  1. :nth-child(x), gets the x th child element

  2. :nth-child(even) and :nth-child(odd), starting from 1, get the even-numbered element or the odd-numbered element

  3. :nth-child(xn+y), x>=0, y>=0. For example, when x = 3 and y =0, it is 3n, which means to take the \3n element (n>=0). In fact, xn plus y is the general term for both of these. (x =0,y>=0, \ = hth-child(x); If x=2 and y=0, this is equal to nth-child(even); When x=2,y=1, \ = :nth-child(odd))

3.6. Form object properties filter selector

6.1: Enabled and: Disabled (take available or unavailable elements)

The matching ranges of: Enabled and: diabLED include INPUT, SELECT, and Textarea

$(':disabled').css('border', '1px solid #0000FF');

$(':disabled').css('border', '1px solid #0000FF');

6.2, :checked (check box or check box element)

Changing the border or background color only works in IE. Chrome and Firefox won’t change it, but Alert will pop up

6.3. :selected (select the selected element from the drop-down list)

Such as alert ($(' : selected '). Val ());

Form selectors

, 4.1: input (in the input, textarea, the select button elements)

Such as alert ($(' : input). Val ());

$(‘input[type=text]’) $(‘input[type=text]’)

$(‘input[type=password]’) $(‘input[type=password]’)

4.3: RADIO (select a single box element)

4.4, :checkbox

$(‘input[type=checkbox]’) $(‘input[type=checkbox]’

Submit (take the submit button element)

$(‘input[type=submit]’) $(‘input[type=submit]’

4.6, :reset (get the reset button element)

The :reset selector is equivalent to the property selector $(‘input[type=reset]’)

4.7, :button (take button element)

The :button selector is equivalent to the property selector $(‘input[type=button]’)

4.8, :file (get upload domain element)

$(‘input[type=file]’) = $(‘input[type=file]’

4.9, :hidden (take a hidden element)

$(‘input[type=hidden]’) is the same as the property selector