jquery Learning Notes-----events and animations

First, ready mechanism

$ (document). Ready ( function () {} )

$ (). Ready ( function () {} )

$ ( function () {} )

The Ready function of jquery executes when the DOM is finished and can be used multiple times

$ (selector). Load ( function () {} ) This method is equivalent to the OnLoad method of JS itself

such as $ (window). Load (function () {}) equals Window.onload=function () {}

-----------------------------------------------------------------------------------

Second, event binding

$ (selector). bind ( type[,date],fn )

Event binding function, type without an on prefix, and can also be multiple events, separated by a space, date will be passed as the value of Event.date to the event object, FN is the listener function

Some simplified event-binding functions:

$ (selector). Click ( function () {} )

The time to support this notation is mouseover, mouseout, etc.

Custom events for Juqery:

$ (selector). Hover ( enterfun,leavefun )

Enterfun function that executes when the mouse is moved into an element, leavefun the function that is executed when the mouse leaves the element

$ (selector). Toggle ( fun1,fun2,..., funn )

When you click Selector, the functions in toggle are called sequentially

If the toggle method does not have parameters, the elements that call the toggle method switch between visible and invisible

such as: $ (selector). Toggle ()//Assuming that the initial is visible, then the $ (selector) is hidden. Toggle ()//call again, the element becomes visible

Iii. properties of the event object

Event.type () Get event type

Event.preventdefault () block default event behavior

Event.stoppropagation () block events continue to bubble up

Event.target () Gets the event element

Event.pagex/y () gets the x/y coordinates of the mouse relative to the page and, if there is a scroll bar, the distance of the scrollbar

Event.which () mouse events get the left, middle, and right mouse buttons, left, middle, and right to return 1, 2, 3, keyboard events get keyboard keys

Iv. Removal of events

$ (selector). Unbind ( [type][,date] )

The first parameter is the event type, the second parameter is the listener function to remove, and if there are no parameters, all events of all types are deleted, and only the type event is deleted if there is only the type parameter

$ (selector). One ( type,[date],fn )

The function used to trigger an event, that is, the event can only be triggered once and will not be valid later

V. Automatic triggering of events

$ (selector). Trigger ( Type[,date])

Used to automatically trigger a class of events, especially useful for triggering custom events

$ (selector). Triggerhandler ( type[,date])

The event triggered by the above function executes the browser's default action, and the event that the function fires does not

Vi. animations in jquery

Hide (), show ()

The Hide method changes the display property of the element to none

The Show method changes the display property of an element to block or inline (depending on the Diaplay property of the element before hide)

The Hide () and show () methods can also take a parameter that represents time, so that the fade and fade effects can be achieved, with the parameter being a number, in milliseconds, or "slow", "normal", "fast", and three constants

The Hide () and show () methods reduce the height, width, and transparency of the element at the same time

FadeIn (), FadeOut ()

These two functions are similar to the Hide (), show () method usage, except that the two functions change only the transparency of the element

Slideup (), Slidedown ()

Similar to the Hide (), show () method usage, except that the height of the element is changed

Note: Any animation in jquery can be specified in 3 speed parameters, namely "slow", "normal", "fast", the length of time is 0.4,0.6,0.2 seconds, use the speed keyword to enclose the quotation marks, you can use the number, in milliseconds, then do not add quotation marks

Animate ( Params[,speed][,callback] )

Custom animation functions, parameter descriptions are as follows:

Params: A mapping that contains style attributes and values, such as {property1: "value1", Property2: "value2",...} if + = or-= is present before value, such as {width: ' +=400px '}, is to animate on the basis of its original value.

Speed: Velocity parameters, optional

Callback: Callback function when the animation is complete, optional

When multiple animate (or other animation functions) are applied to the same element, an animation queue is generated, that is, each animate executes sequentially

Stop ( [queue] [, Gotoend] )

Queue: Boolean type, True when empty after the animation queue is emptied

Gotoend: Boolean type, true when jumping to the end state of an animation being performed

When you use the Stop () method, the animation that is being executed is stopped immediately

Toggle ()

The toggle () method is used to toggle the visible state of an element if it is visible when the element is hidden, and if the element is hidden, it is tangent to the visible

FadeTO ( speed,opacity )

You can adjust the transparency of an element to a specified value in a progressive way

jquery Learning Notes-----events and animations