JQuery Selector Detailed _jquery

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

$ ("#id") gets the element by ID to replace the document.getElementById () function.

$ ("TagName") gets the element using the label name to replace the document.getElementsByTagName () function.

The basic syntax for jquery is: $ (selector). Action (), selector is the selector.

The classification of the jquery selector

The jquery selector can be divided into four main categories:

Base selector (Basic)

Hierarchy selector (level)

Filtering selector (filter)

Form selector (form)

Some categories can also be categorized into specific subcategories.

Basic Selector

* Match all elements. Example: $ ("*") Select all elements.

#id根据给定的id匹配元素 (a maximum of one element is returned). Example: $ ("#lastname") Select the element of id= "LastName".

. class matches the element based on the given class name. Example: $ (". Intro") selects all elements of class= "Intro".

Element matches elements based on the given element name. Example: $ ("P") Select all <p> elements.

. class.class Example: $ (". Intro.demo") selects all elements that class= "demo". (intersection).

Selector1, Selector2, ..., Selectorn, the elements that match each selector are merged and returned together. (and set).

In addition to the #id selector returning a single element, the other selectors return a collection of elements.

This is because the ID inside the HTML specification should be unique, so the elements of the duplicate ID are not considered.

If multiple elements have the same ID, taking this ID will only get the first element. The length property of the jquery object that gets is 1.

If the element to be matched does not exist, an empty jquery object is returned.

The base selector can be combined, separated by commas, and the result takes the set of the results of all the conditions.

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

Hierarchy Selector

$ ("ancestor descendant") selects all descendant descendant elements in the ancestor element, including direct child elements and deeply nested descendant elements.

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

Note: The selector is full page scan, returns a collection, and all elements that match the selection criteria are included. So <span> under multiple <div> will be selected.

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

Example: $ ("Div>span") Select the element name under <div> element is a child element of <span>.

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

Example: $ (". One+div") selects the next DIV element with class one.

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

Example: $ ("#two ~div") selects all <div> sibling elements after the element with ID two.

Equivalence method:

$ ("Prev+next") is equivalent to method $ ("prev"). Next ("Next"), and a next element immediately after the prev element is selected.

$ ("prev~sublings") is equivalent to method $ ("prev"). Nextall ("Sublings"), select all the prev elements for all siblings after the sublings element.

The $ ("prev"). Sublings ("Next") method selects all next elements of the Prev sibling, regardless of the position before and after.

Filter Selector

Filter selector This large class is divided into six subclasses:

Basic filtration, content filtering, visibility filtering, attribute filtering, child element filtering, Form object property filtering.

Basic Filtration

GT and LT are GreaterThan and LessThan respectively.

Content filtering

Visibility filtering

Attribute filtering

Attribute filtering is identified by square brackets.

Note that multiple attribute filter selectors are joined together to take the intersection of the results.

child element filtering

The first basic filter selector inside the index is calculated from 0, where the child element filter Selector index is starting from 1.

Form object property Filtering

Form Selector