Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home Web Front-end JS Tutorial Jquery: powerful selectors

Jquery: powerful selectors

高洛峰
高洛峰
Dec 17, 2016 pm 04:01 PM

Jquery selectors are divided into basic selectors, hierarchical selectors, filter selectors and form selectors. These four selectors are introduced one by one below.

1. Basic selectors

Most of them are basic selectors. Basic selectors include id selector, class selector, label selector, compound selector and "*" selector.

$("#id") Selects all elements whose attribute id is equal to "id".

$(".class_1") Selects all elements whose attribute class is "class_1".

$("p") selects all

elements.

$("div,span,p.myClass") selects a group of elements of all

, and

tags whose attribute class is "myClass".

$("*") selects all elements.

2. Hierarchical Selector

If you want to obtain specific elements based on the hierarchical relationship between elements, you can choose to use a hierarchical selector.

$("div p") selects all

elements in

. This selector retrieves all descendant elements, not the next level elements (i.e. child elements).

$("div>p") selects all tags in

as

child elements.

$(".class_1+div") Selects the next

sibling element whose attribute class is "class_1".

$(".class_1").next("div") The effect is the same as above.

$(".class_1~div") selects all

sibling elements behind the element whose attribute class is "class_1".

$(".class_1").nextAll("div") The effect is the same as above.

$(".class_1").siblings("div") The difference from the above two selectors is that this selector has no distinction between before and after. It selects all

elements of the same generation.

3. Filter selectors

Filter selectors all start with a colon (:). Filter selectors can be divided into basic filtering, content filtering, visibility filtering, attribute filtering, sub-element filtering and form object attribute filtering selectors. .

1. Basic filter selector

$("div:first") selects the first

element among all
elements.

$("div:last") selects the last

element among all
elements.

$("input:not(.class_1)") Selects elements whose attribute class is not "class_1".

$("input:even") selects the element whose index is even.

$("input:odd") selects the element whose index is odd.

$("input:eq(1)") Selects the element with index equal to 1.

$("input:gt(1)") Selects elements with index greater than 1. (Note: greater than 1, not including 1)

$("input:lt(1)") Selects elements with index less than 1. (Note: less than 1, not including 1)

$(":header") selects all

,

,

... in the web page.

$("div:animated") selects the

element that is being animated.

$(":focus") selects the currently focused element.

2. Content filter selector

$("div:contains('I')") Selects the

element containing the text "I".

$("div:empty") selects

empty elements that do not contain child elements (including text elements).

$("div:has(p)") selects the

element containing the

element.

$("div:parent") selects

elements that have child elements (including text elements).

3. Visibility filter selector

$(":hidden") selects all invisible elements, $("input:hidden") selects all invisible elements.

$("div:visible") selects all visible

elements.

4. Attribute filter selector

$("div[id]") selects the

element with the attribute id.

$("div[title=text]") Selects the

element whose attribute title is "text".

$("div[title!=text]") Selects

elements whose attribute title is not equal to "text". (Note:
elements without the attribute title will also be selected)

$("div[title^=text]") Selects the

element whose attribute title starts with "text".

$("div[title$=text]") selects the

element whose attribute title ends with "text".

$("div[title*=text]") Selects the

element whose attribute title contains "text".

$('div[title|="text"]') Selects the

element whose attribute title is equal to "text" or prefixed with "text". (Note: The prefix means that the string is followed by a ‘-’).

$('div[title~="text"]') Selects elements whose attribute title contains the character "text" in the space-separated value.

$("div[id][title$='text']") Selects the

element that has the attribute id and the attribute title ends with "text".

5. Child element filter selector

$("div.one:nth-child(2)") Selects the second child element under the

parent element with attribute class "one".

$("div.one:first-child(2)") Selects the first child element under the

parent element with attribute class "one".

$("div.one:last-child(2)") Selects the last child element under the

parent element with attribute class "one".

$("div.one:first-child(2)") If there is only one child element under the

parent element with attribute class "one", select this child element.

6. Form object attribute filter selector

$("#form1 input:enabled") selects the elements available in the form.

$("#form1 input:disabled") selects the elements that are not available in the form.

$("input:checked") Select the selected check box.

$("select:selected") Select the selected item in the drop-down box.

(Note: Set the attribute disabled in the element to "disabled" to make this element unavailable)

4. Form selector

$(":input") selects all ,