JQuery beginners (3): jquery beginners

JQuery beginners (3): jquery beginners

3. Events and animations

 

A. Events

Aa. DOM Loading

1. Why use jQuery to load the DOM method?

Use the javascript window. the onload () method is required to load the DOM by waiting until all resources on the requested page are loaded to add event behavior to the DOM element. jquery only needs to load the DOM element, bind the event immediately

2. Form:

$ (Function (){

// Your implementation Logic

});

 

AB. Event binding

Bind event binding method (eventType [, data], function (){...})

Form:

$ (Function (){

$ ("# Id"). bind ("click", function (){

$ (This). next (). show ();

});

});

Ac. Event Merging

Jquery has two merging events: hover () and toggle ()

1. hover (enter, leave) simulates cursor hover

Form:

$ (Function (){

$ (". Class"). hover (function (){

// Hover the cursor over the class cascade style to respond

$ (This). next (). show ();

}, Function (){

// The cursor leaves the referenced class cascade style to respond

$ (This). next (). hide ();

});

});

The above case explains: When the cursor is hovering over the referenced class cascade style, a peer element behind it is displayed; otherwise, it is hidden.

2. toggle (fn1, fn2,...) simulates Mouse clicking events

Form:

$ (Function (){

$ ("Button"). toggle (function (){

Alert ("click the mouse for the first time !");

}, Function (){

Alert ("second mouse click !");

}, Function (){

Alert ("third mouse click !");

});

});

After three mouse clicks, click again to enter the next event. That is, the fourth click will call the first function...

Ad. Properties of the event object

1. Get event. type of event type

$ ("Input"). click (function (event ){

Alert (event. type); // because this is a click event, the Code outputs the click

});

2. event. preventDefault () // block default events

$ (Function (){

$ ("# Sumbit"). click (function (event ){

Event. preventDefault (); // prevents form Element submission

});

});

...

AE. Event Removal

Unbind (eventType [, data])

$ (Function (){

$ ("# Button"). bind ("click", fn1 = function (){

Alert ("bind the fn1 click event to the DOM element whose id is button ");

}). Bind ("click", fn2 = function (){

Alert ("bind the fn2 click event to the DOM element with the id value of button ");

});

$ ("# Button"). unbind ("click", fn1); // remove the fn1 click event with the id value of buttonde

});

Af. Operation Simulation (trigger ())

1. Common Simulation

For example:

Scenario: The click event is triggered immediately after the page is loaded.

$ (Function (){

$ ("# Button"). trigger ("click"); // when the page DOM is loaded, the click event is triggered immediately on the element whose id is "button ".

});

2. Start a Custom Event

$ (Function (){

// 1. Custom events

$ ("# Button"). bind ("iClick", function (){

});

// 2. trigger a Custom Event

$ ("# Button"). trigger ("iClick ");

});

3. PASS Parameters (tigger (type [, data [))

Ag. Other usage

Bind multiple event types

$ (Function (){

$ ("Div"). bind ("mouseover mouseout", function (){

$ (This). toggleClass ("over ");

Alert ("move the cursor in or out of the div label, and its style will change ");

});

});

...

 

B. Animation

The jquery animation method provides a variety of visual effects to provide users with a rich visual experience;

To achieve good animation effects, html must be in the standard mode:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

Ba. Show () and hide ()

1. show () // display the animation

$ ("Tag"). show ();

$ ("Tag"). show (speed); // specify the display speed: slow, normal, fast, or specify a speed.

2. hide () // hide an animation

See show () Usage

 

Bb. FadeIn () and fadeOut (), slideUp () and slideDown ()

$ (Function (){

$ ("Tag"). fadeIn (); // the transparency of tag elements increases (fade in)

$ ("Tag"). fadeOut (); // the transparency of the tag element will decrease (fade out)

});

2. slideUp () and slideDown () change the height of an element.

$ (Function (){

$ ("Tag"). fadeIn (); // The height of the tag element increases.

$ ("Tag"). fadeOut (); // The height of the tag element is getting lower and lower.

});

Bc. Custom Animation method animate ()

Animate (params, speed, callbackFunction)

1. Custom simple animation

$ (Function (){

$ ("# Id"). click (function (){

$ (This). animate ({left: "500px"}, 1000); // each time you click it, the element moves 500 pixels to the right.

});

});

$ (Function (){

$ ("# Id"). click (function (){

$ (This). animate ({left: "+ = 500px"}, 1000); // each click, this element accumulates 500 pixels at the current position

});

2. Multiple animations

2.1 execute multiple animations at the same time

$ (Function (){

$ ("# Id"). click (function (){

$ (This). animate ({left: "500px", height: "200px"}, 1000 );

});

2.2 execute multiple animations in sequence

$ (Function (){

$ ("# Id"). click (function (){

$ (This). animate ({left: "500px", height: "200px"}, 1000)

. Animate ({height: "200px"}, 1000 );

});

Be. animation status operation

1. Stop the animation of the element.

Stop ([clearQueue] [, gotoEnd])

$ ("# Id"). stop ();

$ ("# Id"). stop (true); // clear all animation queues

$ ("# Id"). stop (true, true); // stop the current animation and reach its final state, and clear the queue

2. Determine whether the element is animated.

$ ("# Id"). is (": animate ")

3. Delayed Animation

Delay ([speed])

 

Bf other animation Methods

1. toggle ()

2. slideToggle ()

3. fadeTo ()

Adjust the opacity of an element to a specified value progressively.

$ ("# Id"). fadeTo (600, 0.2 );

4. fadeToggle ()

 

Bh. Summary

 

(Unfinished ...)