Chapter 4 (Events and Animation in JQuery)
1. Event Binds: Bind (Type [, Data], FN)
TYPE: Event type, including Blur , Focus, Load, Resize,
Scroll, Unload, Click, DbClick, Mousedown
, Mouseup, Mouseover, Mouseout,
MouseEnter, MouseEleave, Change, Select,
Submit, KeyDown, Keypress, Keyup and Error
DATA: Optional parameters, as an EVENT, DATA attribute value passed to an additional data object for an event object.
2. Synthesis event: (1) Hover (Enter, Leave); analog mouse hover event When the cursor is moving, it is triggered, which is equivalent to MOUSEOVER; it triggers (Leave) when removing the mouse, which is equivalent to the mouseout. Triggering the second function, you need to trigger with Tigger (“mouseeleave”).
(2) Toggle () method
Toggle (fn1, fn2 …. fn); analog mouse continuously click event, triggering one time until the last one
3. Event bubbling: The event will be in the outer element by the inner layer of the Tower of the DOM until the top of the DOM is triggered.
4. Stop incident bubbling: (1) Return False;
(2) stopPropagation ();
5. Block the default behavior: (1) preventdefault () method;
(2) Return False;
6. Event capture: take the event In contrast, the event capture begins to trigger by the top back.
7. Attributes of event objects:
(1) Event.Type (): Take the type of event
(2) Event.preventdefault (): Prevent the default event behavior
(3) Event.stoppropagation (): Block Event Bubbing
(4 Event.Target (): Take the element of the trigger event to avoid different standards of W3C, IE, Safari browser
(5) Event.relatedTARGET ()
(6) Event. Pagex () and Event.pagey (): Take the cursor relative to the coordinate
(7) Event.Which (): Get the button of the mouse or keyboard
(8) Event.metakey (): Different
(9): point to the original event object
8. Remove event: unbind (type [, data]);
9.one (Type [, DATA], FN);
Note: One Like BIND usage; only One can only trigger once, Bind can be multiple times
10.trigger (); not only can trigger the browser supports the event with the same name, can also trigger custom events
(1) to transfer data: trigger (type [, data]); an array pass
(2) the default action:
For example: $ ( “input”) trigger ( “focus”);
11.show () and hide (): simultaneously edit multiple element style properties (height, width, opacity)
(1) call hide ( time), to set the attribute display element: when none, calling show (), element attributes to: display: Block or (inline)
(2) when the show () and hide () without any parameter, hidden or displayed when an immediate effect matching element
12.fadein () and fadeOut (): the only change the opacity of the element, without changing its height and width
(1) fadeout () decreases within a specified period of time the opacity of the element, known elements disappeared completely (display: none), fadein () is the opposite
13.slideUp () and slideDown (): only change the height of the element
(1) If the display: none; the slideUp () extending from top to bottom display, slideDown () to the next by curtail Hide
14 custom animation method animate ()
(1) syntax structure: animate (params, speed, callback); [..
params: parameter elements, optional
callba: mapping a style attribute and the value
CK: Function executed when the animation is completed, optional
(2) Custom Simple Animation: Setting Properties POSITION: Relative or (Absolute) to affect the “TOP “,” Left “,” Bottom “,” Right “style properties.
(3) accumulation, accumulating animation: (+ =) or (- =) means In the current position, it is accumulated or accumulated
15. Stopping animation and animation status
(1) Animation of stopping element:
(2) visible state of switching elements: Toggle () is the same as HIDE () and show () usage, Interchangeable.
(3) Switching the visibility of matching elements by highly changed: slidetoggle () Same as slideup (), slidedown () can be replaced with each other.
SLIDETogGLE (Speed, [Callback])
(4) Put the elements The opacity is adjusted to the designated value in progress:
Fadeto (Speed, Opacity, [Callback])