This is the third day of my participation in the More Text Challenge in August. For more details, see more Text Challenge

Node operation

this

This represents the object in JS that triggers the event

There are three in jquery that do not require double quotes

$(thisThe $()documentThe $()window)
Copy the code
// Click which p to change which P background color
$("p").click(function() {$(this).css("background-color"."red");
})
Copy the code

parent()

Parent (): The parent node selects only the parent, not the grandfather or great-grandfather

// Click which P to change the background color of its parent node
$("p").click(function() {$(this).parent().css("background-color"."blue");
})
Copy the code

siblings()

Siblings (): siblings.

// Click which p to make its sibling background color change
$("p").click(function() {$(this).siblings().css("background-color"."red");
})
Copy the code

children()

// Click which div to make its son color change
$("div").click(function() {$(this).children().css("background-color"."red");
})
Copy the code

Uncommon node operations

Next (): Selects the next sibling node

NextAll (): All the following brothers

Prev (): Selects the last brother

PrevAll (): All the previous brothers

Parents (): the ancestor node. You can also pass an argument specifying the parent node

Find (): all descendant nodes are selected and can be specified by passing arguments

Consecutive runs:

$("p").click(function() {$(this).css("background-color"."red")
.siblings().css("background-color"."green")
.parent().css("background-color"."purple")
.siblings().css("background-color"."yellow");
})
Copy the code

The problem of serial numbers

Eq (): the rank of the large queue of selected elements, not directly related to the rank of siblings.

Eq (): The sequence number varies according to the selected element.

index()

Index (): indicates the rank of siblings, regardless of sibling type. As long as the same parent node is siblings.

each()

Each (): indicates each. It is used to loop through each matched element. Take one argument: anonymous function

The function also has a “this”, which represents the object it traverses.

The argument to each() is a function that takes an argument, I, to iterate over the ordinal number of the object.

The animate () function

An overview of the

Animate () : Accepts two parameters

The first argument is: JSON

The second parameter is the time to complete the animation, in ms.

Animate is an endpoint based animation

The DOM structure:

<p></p>
<p></p>
<p></p>
<p></p>
Copy the code

Code:

// Move all p elements to 500
$("p").animate({"left": 500}, 2000);
Copy the code

Results:

Properties that can participate in the animation

All numeric properties can be animated

width

height

border

Cannot participate in animation properties

background-color

background-position

Some complex properties of Css3 (Transform)

Border-radius can participate in animation

For example:

// backgroundColor, backgroundPosition are not allowed to participate in the animation
$("p").animate({
"width": 200."height": 200."border-radius": "50%"."backgroundColor": "blue"."left": 500
}, 2000);
Copy the code

The execution order of the animation

  • Different animate animate for the same element are performed in the binding order.

  • The order of animate execution for different elements is simultaneous

  • The animate () and CSS ()

CSS (): Instant

Animate (): Takes time.

For example:

// Change the background color of the box after the box is finished
$("#box").animate({"left": 500}, 2000).css("background-color"."red");
Copy the code

The callback function

Asynchronous statements: Statements that take time, such as animate, will execute immediately if they are followed by other JS code and will not be executed until after the animate function completes.

All asynchronous statements have a callback function, and what to do after the asynchronous statement is executed is written in the callback function.

For example: make a meat dish. The first step is to defrost the meat.

Put the meat in the microwave oven for thawing takes 10min, during which we can also wash vegetables, pick vegetables, boil water, wait until the microwave ding (after ding is the callback function), take out the meat, start to do meat, do meat is to write in the callback function.

Animate (), show(1000), hide(1000), slideDown(), slideUp(), fadeIn(), and fadeOut() are all asynchronous statements

Animate ({}, time, callBack)

First argument: JSON time: the event that completes the animation callBack: the callBack functionCopy the code

For example:

// Let the color change after the box is finished
$("#box").animate({"left": 500}, 2000.function() {$(this).css("background-color"."red");
})
Copy the code

For example, fadeIn can also write callbacks

For example:

$("#box1").fadeIn(2000.function() {$(this).css("background-color"."red");
})
Copy the code

delay()

Delay (): indicates delay and can only be written before the animation. The parameter is the time to delay.

animate(),show(1000),hide(1000),slideDown(),slideUp(),fadeIn(),fadeOut()

For example:

// The point-level BTN makes the box delay for 2 seconds before executing the animation
$("#btn").click(function() {$("#box").delay(2000).animate({"left": 500}, 2000.function() {$(this).css("background-color"."blue"); })})Copy the code

Use delay() to control the entry order of elements

stop()

Stop (): stops the animation of the moving element immediately.

It takes two arguments, both of which are booleans and the default is false

The first parameter: whether to clear the current animation queue

Second parameter: whether to complete the current animation immediately

Stop (false,false) Equivalent to stop() means to immediately go to the next animation and immediately stop the current animation

Stop (false, true) means to go to the next animation immediately, immediately stop and complete the current animation

Stop (true, true) clears the current animation queue and immediately stops and completes the current animation

Stop (true, false) Is equivalent to stop(true), which clears the animation queue and stops the current animation immediately

Prevent animation accumulation

There can be multiple animation events on an element, especially in the inadvertently caused animation accumulation, at this time we need to prevent (also called anti-rogue)

For example, a team in Fuyang received an order to go to Guangzhou. On the way to Guangzhou, they received another order to return to Fuyang. At this point the teammate has two strategies:

① : Perform the new task immediately and abandon the original task

This can be done using stop(true)

/ / to go to guangzhou
$("#btn2").click(function() {$("#box").stop(true).animate({"left": 1000}, 2000);
})
/ / back to fuyang
$("#btn1").click(function() {$("#box").stop(true).animate({"left": 50}, 2000);
})
Copy the code

② : Accept new tasks only when the element is not moving

Is (): Indicates whether the element has a certain state

Is (” :animated “) returns true if the element moves and false if it does not

Breathing wheel diagram

An overview of the

Carousel

Breath Wheel variant layout key: all pictures are stacked together.

Jquery’s ability to select elements is great, but we’re used to saving the elements we use in advance to variables. Usually we select an element with an ID. Usually we say $box.

Left and right buttons anti-rogue strategy: when the picture movement, do not carry out any operation. is()

Dot anti-rogue policy: immediately respond to new events. stop(true)