"Learning Notes" sharp jquery (iii) events and animations

Source: Internet
Author: User
Tags custom name

I. jquery events

1, loading events

// equivalent to $ (function () {:}) $ (window). Load (function () {...})    // equivalent to Window.onload = FN

2, basic event binding

Bind (TYPE,[.DATA],FN)//multiple events can be bound: Bind ("MouseOver mouseout", fn)Unbind (TYPE,FN) //Unbind One (TYPE,[.DATA],FN)//bound events are executed only once
//Shorthand binding
Click (FN)/dblclick (FN) mouseover ( fn)/mouseout (FN)MouseEnter (FN)/mouseleave (FN)//Excludes child elements inside the element being moved out
Scroll (FN)

Common form Events
Focus (FN)/blur (FN)
KeyUp (FN)/keydown (FN) //press and Panasonic keys
KeyPress (FN) //When a key value is pressed
Change (FN) //trigger when the value of the form text field (input:text,textarea,select) changes
//Synthetic event hover (fn1,fn2)//equivalent to bind ("MouseEnter") and bind ("MouseLeave")Toggle (Fn1,fn2,fn3 ...)//Successive click events, call multiple functions in turnstrigger (type)//triggers the event for type, which executes the browser default action, type can be a custom nameTriggerhandler (Type)//binds a type event and blocks browser default actions

3, the namespace of the event

Bind ("click.name", FN); Bind ("mouseover.name"  , FN), bind ("click", FN); Unbind (". Name" );     // namespace to unbind trigger ("click! ");   // matches a Click that does not contain a namespace, that is, the third

4,event Event Object

Bind (Type,function (Event){....})//Add Event object parameters, recommended to be named event or E, can be arbitrarily named in principle//event PropertyEvent. TypeEvent. TargetEvent. relatedtarget//related elements that trigger eventsEvent. pagex/Event. pagey//Relative to the X and Y coordinates of the page
Event. which//Keyboard Event: Returns the Ascall code of the key, click event: 1 (left) 2 (medium) 3 (right). Compatible and mouse events with KeyCode and charcode integrated in JQ
Event . KeyCode //Return the Ascall code of the key, it is recommended to use which//Event method, two simultaneous use, equivalent to adding "return false;"Event. Stoppropagation ();//Stop bubblingEvent. Preventdefault ();//prevent browser events from default behavior

Note:in jquery, when you get and set similar disabled and checked properties, use the Prop () method instead of attr (), only the True/false value.

Second, jquery animation

/**params: The effect of the final style or value of the animation, such as {left: "+=500px"},left will accumulate *speed: animation time, Unit Ms. slow for 600,normal for 400,fast *callback: callback function executed after animation is completed*/Animate (params, Speed,callback); $div. Animate (). Animate () ...//performing animations sequentially. Stop ([clearqueue],[goend])//Two Boolean parameter optional, no parameter stops the current animation only. Delay ()//deferred execution//Animation ShorthandHide ()/show ()//equivalent to CSS ("display": "None/block/inline")Slideup ()/slidedown ()//stretch hidden by height up and downFadeIn ()/fadeout ()//fade in and outFadeTo (Speed,0~1)//progressively adjust to specified transparency//Combo AnimationsToggle () Slidetoggle () Fadetoggle ()

Animate (params,500), commonly used params
{scrolltop: "-=50"}
{height: "+=50"}  

"Learning Notes" sharp jquery (iii) events and animations

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.