Introduction to commonly used selectors in jQuery

Level selector:

$ ('Div p'); // select all p elements under the div.

$ ('Div> p'region.css ('border', '1px solid red'); // select only the direct child element under the div.

// Adjacent Elements

$ ('Div ~ P;.css ('border', '1px solid red'); equivalent to $ ('div '). nextAll ('P'); // indicates

All p sibling Elements

$ ('Div ~ * 'Salary .css ('border', '1px solid red'); // It indicates all the sibling elements behind the div.

$ ('Div into p'salary .css ('border', '1px solid red'); equivalent to $ ('div '). next ('P') // This method indicates

Only find the first sibling element next to it, and the element is p.

Methods To obtain sibling elements:

Next (); // The first sibling element (next) next to the current element)

NextAll (); // All sibling elements after the current element

Prev (); // The sibling element adjacent to the current element (previous one)

PrevAll (); // All sibling elements before the current element

Siblings (); // All sibling elements of the current element

Basic filter selector:

$ ('P: first ') is equivalent to $ ('P'). first. Obtain the first p element of all P elements.

$ ('P: last') and $ ('P'). last ()

$ ('P: eq (2) ') locate the index 2 element in all p elements

$ ('P: even') Select All odd p tags

$ ('P: odd') select all even p tags

$ ('P: not(.tst)'hangzhou.css (); select all the p elements that do not apply the. tst style. Do not followed by a selector name.

$ ('P: gt (1) ') select all p elements whose index value is greater than 1.

$ ('P: lt (3) ') select all p elements whose index values are less than 3.

$ (': Header') selects elements for all h1-h6 on the page. (In this case, there must be no space in the middle .)

Attribute filter selector:

$ ("Div [id]") Select the <div>

$ ("Div [title = test]") Select <div> whose title attribute is "test". No getElementsByName is specified in jQuery.

For encapsulation, use $ ("input [name = abc]")

$ ("Div [title! = Test] ") Select the <div>

You can also choose to start with "name ^ = value", end with "name $ = value", and include "name * = value ".

Composite. [Attribute 1 = a] [attribute 2 = B]…] (*)

Form object attribute selector (filter ):

$ ("# Form1: enabled") select all enabled elements in the form whose id is form1

$ ("# Form1: disabled") select all the disabled elements in the form whose id is form1

$ ("Input: checked") selects all the selected elements (Radio and CheckBox), which cannot contain spaces.

$ ("Select: selected") select all selected option elements (drop-down list)

Form filter selector:

$ ('# Form1: enabled'); // This indicates a tag with the id of form1 that can be enabled.

$ ('# Form1: enabled'); // indicates all enabled elements that can be enabled and whose id is form1.

$ ('Input: checked ')

$ ('Input: disabled ')

$ ('Select: selected ')

$ (": Input") selects all <input>, <textarea>, <select>, and <button> elements. Unlike $ ("input,

$ ("Input") only obtains <input>

$ (": Text") selects all single-line text boxes, which is equivalent

$ ("Input [type = text]"), $ ('input [type = text] '), $ (': text ');

$ (": Password") select all password boxes.

Content Filter selector:

: Contains (text): filter out elements that contain the given text.

: Empty contains elements without child elements or with empty content.

: Has (selecttor)

: Parent obtains elements with child elements.

Visibility filter:

: Hidden

Select all invisible elements including: (if you write: hidden, it will contain head \ title \ script \ style ....)

1. form Element type = "hidden"

2. Set the display: none of css

3. the height and width are clearly set to 0.

4. The parent element is hidden, so the child element is also hidden.

Visibility: the value of "hidden" and "opacity" is 0. Because it still occupies space, it is not considered as "hidden ".

JQuery is not the same, before 1.3.2)

: Visible

Select all visible elements

Child element filter selector:

The difference between first-child and first: first can only select the first element, while first-child can select the first element of each child element.

Last-child:

Only-child: matches only one child element in the current parent element.

Nth-child: Compared with eq (), the eq () value matches one, And nth-child () matches one child element for each parent element.

Nth-child (index), index starts from 1

Nth-child (even)

Nth-child (odd)

Nth-child (3n), select an element multiple of 3

Nth-child (3n + 1) must satisfy the element of 3 plus 1.

Note:

1. The object selected through the jQuery selector is itself a jQuery object. The selector has an implicit iteration function, for example:

$ ('P'). click (function (){

Alert (this. innerText );

});

The click event is commented for all p.

2. no matter how many elements are selected in the selector, one element returned is a collection object. If no corresponding element is found, the length value of the collection object is 0. If an element is selected, the element of this length is the index value of the selected element. Therefore, this attribute is used to determine whether an element exists. For example:

Iif ($ ('# div'). length> 0) // checks whether an element exists.

3. In the event, this indicates the object of the element of the currently triggered event, but here this is the dom object rather than the jQuery object. To execute methods or attributes in jQuery, convert this to jQuery object.

Conversion Method: $ (this );