Detailed explanation of jQuery selector_jquery

The $() function is used as a selector function in many JavaScript libraries, in jQuery it is.

　$("#id") gets the element by id, which is used to replace the document.getElementById() function.

　$("tagName") obtains elements through tag names and is used to replace the document.getElementsByTagName() function.

The basic syntax of jQuery is: $(selector).action(), selector is the selector.

Classification of jQuery selectors

jQuery’s selectors can basically be divided into four categories:

Basic selector (basic)

Level selector (level)

Filter selector(filter)

Form selector (form)

Some categories can be divided into specific subcategories.

Basic Selector

* matches all elements. Example: $("*") selects all elements.

#id matches elements based on the given id (only one element is returned at most). Example: $("#lastname") selects the element with id="lastname".

.class matches elements based on the given class name. Example: $(".intro") selects all elements with class="intro".

element matches elements based on the given element name. Example: $("p") selects all

elements.

　.class.class Example: $(".intro.demo") selects all elements with class="demo".(Intersection).

　selector1, selector2, …, selectorN, combine the elements matched by each selector and return them together. (Union).

Except for the #id selector which returns a single element, other selectors return collections of elements.

This is because the id should be unique in the HTML specification, so elements with repeated ids are not considered.

If multiple elements have the same id, only the first element can be obtained by taking this id. That is, the length attribute of the obtained jQuery object is 1.

If the element to be matched does not exist, an empty jQuery object will be returned.

Basic selectors can be combined, separated by commas, and the result is the union of the results of all conditions.

When not separated by commas, it should be the intersection where all conditions are met.

Level Selector

　$(“ancestor descendant”) selects all descendant descendant elements in the ancestor element, including direct child elements and deeper nested descendant elements.

Example: $("div span") selects all elements in

.

Note: The selector scans the entire page and returns a collection. All elements that meet the selection conditions will be included. Therefore, the under multiple

will be selected.

$("parent>child") selects the child element under the parent element, that is, only the direct child elements are selected. Other descendant elements are not included.

Example: $("div>span") selects the child element whose element name is under the

element.

　$("prev next") selects the next element (same level) immediately after the prev element.

Example: $(“.one div”) selects the next div element with class one.

　$("prev siblings") selects all siblings elements after the prev element (same level).

Example: $("#two~div") selects all

sibling elements after the element with id two.

Equivalent method:

　$("prev next") is equivalent to the method $("prev").next("next"); selects the next element immediately after the prev element.

$("prev~sublings") is equivalent to the method $("prev").nextAll("sublings"), which selects all sublings elements of the same level after the prev element.

And the $("prev").sublings("next") method selects all next elements that are the same generation as prev, regardless of the front and rear positions.

Filter Selector

The general category of filter selectors is divided into six subcategories:

Basic filtering; content filtering; visibility filtering; attribute filtering; sub-element filtering; form object attribute filtering.

Basic filtering

GT and lt are greaterthan and lessthan respectively.

Content Filtering

Visibility filtering

Attribute filtering

Attribute filtering is identified by square brackets.

Note that when multiple attribute filter selectors are connected together, the intersection of the results is taken.

Child element filtering

In the previous basic filter selector, the index is calculated from 0. Here, the index of the sub-element filter selector is calculated from 1.

Form object attribute filtering

Form Selector