1. Load DOM
1.1.window Event
Window.onload=function () {} .... Timing: All other resources are loaded and then executed
$ (function () {}) ... : Just wait for the label to complete, you can perform
Difference: The former can only parse the last one in an HTML page, and the second is n
Window.onload () = function () {
}
$ (function () {
$ ("li"). Bind ("click", Function () {
$ (this). CSS (" Background "," Red ");
}
); $ (function () {
$ ("div"). Bind ("click", Function () {
$ (this). CSS ("Background", "Red");
});
The first part--Events
2. Mouse events
2.1 Methods of common mouse events
Click (): Clicking Event, triggering, or binding function to the click event of the specified element
MouseOver (): A mouseover event that triggers or binds a function to a specified element
Mouseout (): event that triggers or binds a function to the mouseout of the specified element
Classic Light Bar Effect:
$ (function () {
$ ("input"). Click (function () {
$ ("Li"). MouseOver (function () {
$ (this). CSS ("Background", "Green")
. Mouseout (function () {
//this.style.background = "";
This.style.cssText = "background:;}";});
3. Keyboard events
3.1 Ways to use keyboard events
KeyDown (): KeyDown event that triggers or binds a function to a specified element when a key is pressed
KeyUp (): KeyUp event that triggers or binds a function to a specified element when the key is released
KeyPress (): KeyPress event that produces a printable word characters, triggers, or binds a function to a specified element
$ (function () {
$ ("P input"). KeyUp (function () {
$ ("#events"). Append ("KeyUp");
KeyDown (function () {
$ ("#events"). Append ("KeyDown");
KeyPress (function () {
$ ("#events"). Append ("KeyPress");
$ (document). KeyDown (function (event) {
if (Event.keycode = = ' ") {
//press ENTER
alert (" Confirm to submit? ");
}
});
});
4. Form Events
4.1 Ways to use form events
Focus (): Focuses event that gets the focal point, triggers, or binds the function to the specified element
Blur (): Blur event that loses focus, triggers, or binds a function to a specified element
$ (function () {
//Add Border style
$ ("input") to the text box. focus (function () {
$ (this). AddClass ("MyClass");
}). Blur (function () {
$ (this). Removeclass ("MyClass");});
5. Binding Events and Removal events
5.1 Binding Events
Grammar:
Bind (TYPE,[DATA],FN), where data is not required
Type: Event types, including blur, Focus, click, Mouseout, and other underlying events, and also custom events
fn: The handler function to bind
$ (function () { //Give Li binding Click event, and Style modification
$ ("li"). Bind ("click", Function () {
$ (this). CSS ("Background", " Red ");
});
5.2 Binding multiple events at the same time
$ (function () {
$ ("li"). bind {
mouseover:function () {
$ (this). CSS ("Background", "pink");
}, Mouseout:function () {
$ (this). CSS ("Background", "Gray");}});
5.3 Removing events and simultaneously removing multiple events
Unbind ([TYPE],[FN]) is the exact opposite of the binding event, which means that all events are removed if the method has no arguments
Unbind if you want to remove multiple spaces, just add a space between 22
$ (function () {
$ ("Li"). Unbind ("click"); $ ("Li"). Unbind ("MouseOver mouseout");
5.4 Some other ways to bind and remove
1.live () Unbind ()
2.on () after the jQuery1.7 version of the method off ()
3.delegate () undelegate ()
6. Compound Events
6.1 Hover () method
Grammar:
Hover (Enter,leave); This method is equivalent to the combination of mouseover and mouseout events
$ ("Li"). Hover (function () {
$ ("li"). CSS ("Background", "Gray");
}, Function () {
$ ("li"). CSS ("Background" , "green");
6.2 Toggle () method
Grammar:
Toggle (fn1,fn2,......, FnN); This method is used to simulate the mouse continuous click event, one mouse click to execute a FN, from the beginning in order, Tolgge () used by the hidden field belongs to
Display, which does not occupy a position in the browser, is occupied by the same visibility as it
$ ("body"). Toggle (function () {
$ ("li"). CSS ("Background", "Gray");
}, Function () {
$ ("li"). CSS (" Background "," green ");
}, Function () {
$ (" li "). CSS (" Background "," Blue ");
});
Next look at part two--animation
1. Control element Display and hide
Grammar:
$ (select). Show ([Speed],[callback]);
Relative to the show () method is the Hide () method, which controls element shadowing.
Grammar:
$ (select). Hide ([speed],[callback]); In addition to controlling the hidden elements, you can also define the effects of hidden elements, such as the hidden speed
Note: In most cases, the hide () method is always used with the show () method
2. Control element Transparency
2.1 Control Element Fade in
Grammar:
$ (select). FadeIn ([Speed],[callback]);
The opposite of the show () method is the Fadeout () method, which controls the fading of elements.
3. Change the height of the element
3.1 Methods Slideup () and Slidedown ()
Slidedown () extends the element from top to bottom, and the Slideup () method is reversed, and the element is shortened from bottom to hidden.
$ (function () {
$ ("#btnshow"). Click (function () {
$ ("img"). Show (1000);
});
$ ("#btnhide"). Click (function () {
$ ("img"). Hide (1000);
};
});
$ (function () {
$ ("#btnin"). Click (function () {
$ ("img"). FadeIn (5000);
});
$ ("#btnout"). Click (function () {
$ ("img"). fadeout (5000);
}
); $ (function () {
$ ("#btnup"). Click (function () {
$ ("img"). Slideup (5000);
});
$ ("#btndown"). Click (function () {
$ ("img"). Slidedown (5000);
});
The 4.animate () method is used to customize the animation
When we need more control over animations, using the Animate () method can be more flexible because it replaces all other methods
$ (function () {
$ (' [Type=button] '). Bind ("click", Function () {
//Two effects are executed in parallel, not queued:
$ ("div").
Animate ({"font-size": "50px"}, 3000)
. Animate ({"width": "300px"}, {queue:false, duration:3000});
});
4.1 Animate () method replaces some other methods
Replace the show () method
//$ ("img"). Show (1000);
$ ("img"). Animate ({height: "show", Width: "Show", Opacity: "Show"},1000);
Replace the FadeIn () method
$ ("img"). FadeIn (5000);
$ ("img"). Animate ({opacity: "show"},5000);
Replace the Slidedown () method $ ("img"). Slidedown (5000);
$ ("img"). Animate ({height: "show"}, 5000);
These animations are a shorthand for a specific style built into the animate () method that can be "show", "Hide", "toggle", or a custom value
$ ("div"). Click (function () {$ (this). Next (). Toggle (), $ (this). Next (). Fadeto (600,0.2), $ (this). Next () Fadetoggle (); (this). Next (). Slidetoggle (); });
The above jquery in the event and animation of the summary of sharing 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.