Deep understanding of events and animations in jquery _jquery

First of all, using jquery events and animations is much more convenient than using native JS, and of course, the most important thing is to consider browser compatibility.

Event:

Based on native JS, commonly used events have blur,focus,hover,mouseout,mouseover,mouseleave,ready,change,select,submit and so on, no longer repeat.

Event Bindings:

Bind the event using the bind (Type,[data],func ()) method after the document has finished loading.

Composite event:

Hover (ENTER-FUNC,LEAVE-FUNC) is the equivalent of bind ("MouseOver") and bind ("MouseLeave").

Toggle () simulates the display and hidden event toggle (Show-func,hide-func) In the case of mouse links.

Event bubbling:

In the study of JS elevation (c), it was mentioned that most of the browser event processing mechanism is event bubbling, that is, the incident is progressive. If an inline element is bound to an event and the parent element of the same type is bound to an event of the same kind, then when the event processes the inline element, the parent element's event is also triggered, and jquery uses a method to prevent the event from bubbling, using event objects. Stoppropagation ().

Even if you can block event bubbling, you can also block the default behavior of the event, such as anchor element A, when we bind a click event for a, he not only implements the event function we bind, but also jumps to the specified href, so to prevent this jump behavior, Need to use Event.preventdefault () to implement. This method is often used in the form validation process, and when the validated field is not passed, use Event.preventdefault () to block the form's submit.

Of course, for blocking event bubbling and blocking the default behavior, we can also use return False when we want to know that return false also blocks bubbling and default behavior, so use caution.

Event object:

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

Type property to get the types of the events.

Preventdefault () method, blocking default behavior

Stoppropagation () method to prevent event bubbling

Target property, gets the element that the event triggers

Pagex,pagey property, gets the coordinates of the cursor relative to the page

Matakey property, Get Crtl key

Event Removal:

Unbind (Type,func-name)

The first parameter is the type that removes the event, the second is the variable name that removes the event, if there are no arguments, all events for that element are deleted, and if the type is provided, then the event of all types of that element is deleted, and if the second argument is set, the specified event is deleted.

Event Simulation:

Trigger (), which uses this function to trigger the specified event when entering the page (the type of the event can be customized), trigger () has a parameter, the first is type, and the second is [data], which is optional and is used to pass data. I think trigger () is actually the process of invoking an event on the.

Animation:

The animations in jquery are very handy to use. Jquer All animation effects can add a time parameter.

Show () and Hide ():

Display and hide elements, hide () is equivalent to Display:none, and show () restores him (previous display properties, after restoration). You can animate by setting parameters, Show (), hide () receive keywords and time values (ms), keywords slow (0.6s), fast (. 2s), nomal (. 4s), and he changes the height, width, and opacity of the element at the same time.

FadeIn () and fadeout ():

Change element opacity, fadeIn () Increase opacity, fadeout () reduce opacity until display:none.

Slidedown and Slideup ()

Changes the height of the element, the Slidedown () element extends from top to bottom, and the slideup () element shrinks from the bottom up.

Animate ()

You can use animate () to customize animations when the above method implements animations that do not satisfy us.

Animate (Params,speed,callback)

Params: Contains mappings for styles, such as {left: "100px", Heiget: "100px"}

Speed: Event required for animation implementation (MS)

Callback: The function that is executed when the animation completes.

Like the above written params chestnuts, when the left and the height of the change at the same time, if you do not want to change at the same time, the use of chain writing separately. Note that CSS () is not an animation, to change the animation after the completion of the style, you need to write CSS () into the callback.

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

Deferred operation: Animate (). Delay (time).

Other animations:

Toggle () Show and hide

Slidetoggle () Changes the height of the display and hide.

Fadeto (TIME,OP) changes the opacity of an element to OP by a specified time

Fadetoggle () Change the display and concealment of opacity.

The above in-depth understanding of jquery in the event and animation is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud habitat community.