JQ selector learning fragment (corresponding to the JavaScript part), jq Selector

JQ selector learning fragment (corresponding to the JavaScript part), jq Selector

$ () Is used as a selector function in most JavaScript class libraries.

$ ("# Id") obtains elements by id, which is used to replace the document. getElementById () function. Red function (JavaScript)

$ ("TagName") obtains elements by Tag name, which is used to replace the document. getElementsByTagName () function.

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

JQuery selector Classification

JQuery selectors can be divided into four categories:

Basic Selector)

Level Selector)

Filter)

Form Selector)

I. basic Selector)

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

# Id matches the element based on the given id (only one element is returned). Example: $ ("# IdName") Select the id = "IdName" element.

. Class matches the element according to the given class name. Example: $ (". ClassName") select all the elements of class = "ClassName.

Element matches the element according to the given element name. Example: $ ("p") select all <p> elements.

. Class. class Example: $ (". ClassName. MyClass") select all elements with class = "MyClass". (intersection ).

Selector1, selector2 ,..., SelectorN, which combines the elements matched by each selector and returns them together. (union ).

Except that the # id selector returns a single element, all other selector returns an element set.

This is because the id in the HTML specification should be unique, so the elements of duplicate IDs are not considered.

If the IDs of multiple elements are the same, only the first element can be obtained using 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 is returned.

The basic selector can be combined and separated by commas. The result is the union of the results of all conditions.

When they are not separated by commas, they must be the intersection where all conditions are met.

2. level Selector)

$ ("Div span") selects all span descendant elements in the dia element, including direct child elements and deeper nested descendant elements. (That is, in div, whether or not multiple layers of nesting)

For example, $ ("div span") selects all <span> elements in <div>.

Note: The selector is a full-page scan and returns a set. All elements that meet the selection criteria are included. Therefore, multiple <div> <span> are selected.

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

For example, $ ("div> span") selects the child element whose element name is <span> under <div>.

$ ("Prev + next") selects the next element (at the same level) next to the prev element ).

For example, $ (". one + div") selects the next div element whose class is one.

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

Example: $ ("# two ~ Select all <div> sibling elements after the element whose id is two.

Equivalent method:

$ ("Prev + next") is equivalent to method $ ("prev"). next ("next"); select a next element followed by the prev element.

$ ("Prev ~ Sublings) is equivalent to method $ ("prev"). nextAll ("sublings"). All sublings elements of the same level after the prev element are selected.

The $ ("prev"). sublings ("next") method selects all the next elements of the prev peer, regardless of the front and back positions.

Iii. Partial filter Selector

Basic filter selector rules:

Basic filter Selector

 

Selector	Description	Return	Example
: First	Select 1st Elements	Single element	$ ("Div: first") select all <div> Elements The first <div> element in
: Last	Select the last element	Single element	$ ("Div: last") select all <div> Elements Last <div> element in
: Not (selector)	Remove all and given selectors Matched element	Set Element	$ ("Input: not (. myClass)") the selected class is not <Input> element of myClass
: Even	The selected index (starting from 0) is an even number. All elements	Set Element	$ ("Input: even") the selected index is an even number. <Input> element
: Odd	The selected index (starting from 0) is an odd number. All elements	Set Element	$ ("Input: odd") the selected index is odd <Input> element
: Eq (index)	Select an index (starting from 0) equal Index Element	Single element	$ ("Input: eq (1)") Select an index equal to 1 <Input> element
: Gt (index)	Select an index (starting from 0) greater Index Element	Set Element	$ ("Input: gt (1)") Select <Input> element
: Lt (index)	The selected index (starting from 0) is smaller Index Element	Set Element	$ ("Input: lt (1)") Select <Input> element
: Header	Select All title elements, that is <H1> to	Set Element	$ (": Header") select all the title elements on the page
: Animated	Select All elements	Set Element	$ ("Div: animated") Select the animation currently being executed <Div> element

 

 

Write it here now! Will be updated gradually ~~