Deep understanding of events and animations in JQuery and deep understanding of jquery events

Deep understanding of events and animations in JQuery and deep understanding of jquery events

First, it is much easier to use JQuery events and animations than to use native js. Of course, the most important thing is to consider browser compatibility.

Event:

Based on native js, common events include blur, focus, hover, mouseout, mouseover, mouseleave, ready, change, select, submit, and so on.

Event binding:

After the document is loaded, bind the event using the bind (type, [data], func () method.

Merging events:

Hover (enter-func, leave-func) is equivalent to bind ("mouseover") and bind ("mouseleave ").

Toggle () simulates the display and hide events toggle (show-func, hide-func) when the mouse is connected ).

Event bubbling:

When studying js elevation (3), we mentioned that most browser event processing mechanisms are event bubbling, that is, events occur step by step. If an embedded element is bound to an event and its parent element is bound to an event of the same type, when the event processes embedded elements, the event of the parent element is also triggered. JQuery can use a method to prevent event bubbles and use event (event object ). stopPropagation ().

This feature prevents event bubbles and the default behavior of events, such as anchor a. When we bind a click event to, it not only implements the Bound event function, but also redirects to the specified href. To prevent this jump, you need to use event. preventDefault. This method is also often used in Form Verification. When the verification field fails, use event. preventDefault () to block the form submit.

Of course, we can also use return false to prevent event bubbling and prevent default behavior. When we want to know that return false both blocks bubble and default behavior, we should use it with caution.

Event object:

The parameter event written in the callback function is an event object.

Type attribute to obtain the event type.

PreventDefault () method to prevent default behavior

StopPropagation () method to prevent event bubbles

Target attribute to obtain the event-triggered Elements

PageX and pageY properties to obtain the coordinates of the cursor relative to the page

MataKey attribute, get the crtl button

Event removal:

Unbind (type, func-name)

The first parameter is the type of the event to be removed, and the second parameter is the variable name of the event to be removed. If no parameter exists, all events of the element are deleted. If type is provided, delete all types of events of this element. If the second parameter is set, delete the specified event.

Event Simulation:

Trigger (). When you use this function to access the page, a specified event is triggered (the event type can be customized). trigger () has a connection parameter, and the first is type, the second is [data], which is optional and used to transmit data. I think trigger () is actually the process of calling events.

Animation:

It is very convenient to use animations in Jquery. Time parameters can be added for all animation effects of jquer.

Show () and hide ():

Show and hide elements. hide () is equivalent to display: none, while show () restores an element (what is the previous display attribute, or after it is restored ). You can set parameters to achieve animation effects, show (), hide () receive keywords and time values (MS), keywords are slow (0.6 s), fast (. 2 s), nomal (. 4 s), it will change the height, width, and opacity of the element at the same time.

FadeIn () and fadeOut ():

Change the opacity of the element. fadeIn () increases the opacity, and fadeOut () reduces the opacity until display: none.

SlideDown and SlideUp ()

Change the height of an element. The slideDown () element extends from top to bottom, and the slideUp () element shrinks from bottom to top.

Animate ()

When the animation implemented by the preceding method cannot satisfy us, you can use animate () to customize the animation.

Animate (params, speed, callback)

Params: Contains style ing, such as {left: "100px", heiget: "100px "}

Speed: events required for animation implementation (MS)

Callback: The function executed when the animation is completed.

As described in the preceding section, the left and height changes at the same time. If you do not want to change them at the same time, use the chained Method for separate writing. Note that css () is not an animation. To change the style after the animation is executed, you need to write css () to callback.

Determines whether the element is in the animation state is (": animated ").

Delayed operation: animate (). delay (time ).

Other animations:

Toggle () display and hide

SlideToggle () changes the height of display and hide.

FadeTo (time, op) changes the opacity of an element to op by specifying the time

FadeToggle () changes the opacity display and hiding.

The above in-depth understanding of the events and animations in JQuery is all the content shared by Alibaba Cloud xiaobian. I hope you can give us a reference and support our guests.