JQuery learning notes (4) Selector

Basic

I,*

Match All elements

It will match all the different page elements,

$ (", El | jquery) returns el | all elements in jquery. If el | jquery is empty, all child elements in the document are returned.

Ii.. class

Match All elements by Style Class

An element may have many style classes, but an element is returned if there is a match.

Var sh = $ (". ff"); if the full-text match is applied, all elements of the ff style are returned.

Iii. element

Query by given element prefix

$ ("Div") Search for all div elements

Iv. # id

T finding elements by id is equivalent to document. getElementById (id)

$ ("# Id ")

5. selector1, selector2, selectorN

Multiple selectors are used in combination. If one of them is satisfied, the return value is in the same set.

Hierarchical

 I. ancestor descendant

Ancestor: ancestor node Selector

Descendant: the selector of the child node

First, find all the elements that match the ancetor, and then return the child elements that match the descendant

$ (". Ff label"); find all nodes whose child nodes have applied the ff style are label nodes.

Ii. parent> child

Parent: parent element Selector

Child: child node Selector

The difference between one and two: ancestor descendant is used to find all descendant elements, while parent> child is used to find all child elements, not the child node.

Iii. prev + next

Prev: Selector of the previous Node

Next: the next choiceAnd returns the next element.

$ ("Label + input") First, locate all label elements and return all peer inputs following the label.

Iv. prev ~ Next

Prev: Selector of the previous Node

Next: All trailing node elements that meet the conditions

Simple 

I.: animated

Match all the elements that are executing the animation effect

$ ("Div: animated") Find the div of the animation being executed

$ ("Div: not (animated)") Find the div that is not executing the animation

$ ("# Run"). click (function (){
$ ("Div: not (: animated)"). animate ({left: "+ = 20"}, 1000 );
});

Explanation: Find the jquery object with the id "run", register the click event, find the divs that are not executing the animation, and execute an animation with the right offset of 20 for a second.

 

Ii. eq (index)

Index: the sequence number starts from 0.

$ ("Li: eq (0)") is equivalent to $ ("li: first ")

When the index is out of the array range, an undefind is returned.

Iii. even

The meaning of an even number, starting from 0.

$ ("Li: even") returns nodes 0, 2, 4, and 6.

$ ("Input: even") returns the even number of all input values.

<Input type = "text"/>

<Input type = "button" value = "feature"/>
<Input type = "button" value = "2"/>
<Input type = "button" value = "3"/>

① $ ("Input: button: even ")

Result: [<input type = "button" value = "feature"/>, <input type = "button" value = "3"/>]
② $ ("Input: even: button ")

Result: [<input type = "button" value = "2"/>]

Conclusion: The execution sequence of selector is a general sequence from left to right.

Iv.: first

Returns the first element.

Equivalent to $ ("li: eq (0 )")

V.: gt (index)

Match an element greater than index (excluding index). index starts from 0.

$ ("Tr: gt (1)") starts with the third element.

Vi. header

Matches h1, h2, h3... similar elements

$ (": Header" ).css ("backgroundColor", "black ");
$ (": Header" ).css ("color", "white ");

Note: All javascript is the same. In CSS, background-color is the same as backgroundColor in js.
VII.: last

Opposite: first

$ ("Li: last") last element

8: lt (index)

To match all elements smaller than the given index value, refer to: gt (index)

9.: not (selector)

Removes all elements that match the given selector.

$ (: Not (# ff) removes all elements whose IDs are ff.

10. odd

In contrast to even, all elements with odd numbers are obtained.

$ (Li: odd)

 

 

InternalCapacity

I,: Contains (string)

Match the elements that contain the given text

$ (Div: contains ('dide') Match: <div> first </div> <div> second </div>

Ii. empty

Match All null elements that do not contain child and text elements

$ (Div: empty) only matches <div> </div>

Iii. has (selector)

Has all child elements that match the selector

$ (Div: has ('P') matches nodes with p elements in sub-elements

4. parent

Match All elements with child elements and text

$ (Div: parent) matches all non-empty div elements

Visibility 

I.: hidden

Non-displayed