Sharp jquery 2nd Edition study notes 4, 5 chapters

The 4th chapter, events and animations in jqueryNote: The jquery version used is 1.7.1The Window.onload method is commonly used in event JavaScript in jquery, using the $ (document) in jquery. Ready () method. 1. Timing of ImplementationThe Window.onload method executes after all elements of the Web page have been loaded, and $ (document). The Ready () method can be called because the DOM is fully ready to be invoked due to the registration of an event within the (document) method, as long as the DOM is in place to be executed. Therefore, it is possible that the element's associated file has not been downloaded yet, and the width of the case may not be valid. To work around this problem, use the other method of jquery-----The Load () method. The load () method binds a handler function on the onload event of the element.

$ (window). Load (function() {     // write Code });

Equivalent to:

function () {     // write code };

2. Multiple useThe Windows.onload () method cannot hold multiple function references, while $ (document). Ready () can 3. Abbreviated Form

$ (document). Ready (function() {     // write Code });

Shorthand:

$ (function() {     // write Code });

$ (document) can also be abbreviated to $ (), when $ () without parameters, the default parameter is document, so you can also shorthand:

$ (). Ready (function() {     //  Coding});

3 ways are the same. function event bindings use the Bind () method to bind a specific event to a matching element, calling the format:

Bind (Type [, DATD], FN);

The first parameter is the event type, including: Blur, focus, load, resize, scroll, and so on, and of course the custom name the second parameter is an optional parameter, Additional data objects that are passed to the event object as the Event.data property value The third parameter is the handler used for the binding:

$ ("#panel h5.head"). Bind ("click",function() {     //  Coding});

Synthetic events jquery has two synthetic events---hover (), toggle (), like Ready (), hover (), and toggle () are jquery custom Method 1, hover () method hover (Enter,leave) Used to simulate a cursor hover event when the cursor moves to the element, triggering the specified first function, moving out of the element, triggering the specified second function 2, toggle () method Toggle (Fn1,fn2,fn3 ...),removed from jQuery1.9Used to simulate the mouse continuous click event, the 1th click triggers the first function, the 2nd click Triggers the second function, the 3rd click triggers the third one, and so on, repeatedly invokes the event bubbling Stop event bubblingUse Event.stoppropagation () to stop event bubbling block default behaviorThe elements in the Web page have their own default behavior, such as clicking the hyperlink jumps, clicking the Submit button, the form is submitted, and sometimes blocking the event default behavior. jquery provides the Preventdefault () method to block the default behavior Event.preventdefault ()Note:To stop bubbling and default behavior on the event object, you can return false in the event handler, which is a shorthand way to invoke both Stoppropagation and Preventdefault on the event object. Event object property 1, Event.type, gets the event's Type 2, Event.preventdefault (), blocks the default behavior of 3, event.stoppropagation (), blocks event bubbling 4, Event.target, gets the element that triggered the event 5, Event.relatedtarget, in the standard DOM, elements of Mouseout and mouseout can be accessed through event.target, and related elements can be accessed through Event.relatedtarget 6, Event.pagex and Event.pagey, used to get the x-coordinate and y-coordinate of the cursor relative to the page, if the page has scroll bars, plus the width of the scroll bar 7, Event.which, in the mouse event to get the left (1), Medium (2), right (3), Get keyboard keys in keyboard events 8, Event.metakey, keyboard events get <ctrl> keys more property access: Http://docs.jquery.com/Events/jQuery.Event Remove event 1, Remove the previously registered events on the button element using the Unbind () method, the syntax structure:

Unbind ([Type],[data]);

The first parameter is the event type, the second argument is the function to remove (1) If there are no arguments, delete all bound events (2) If the event type is supplied as a parameter, only the binding event of that type is removed (3) If all passes, only this particular event handler is deletedNote:For cases where only one trigger is needed and then unbound, jquery provides a one () method, which can be used to bind the element to the handler, and immediately after the trigger, the structure of the once () method is similar to the bind () method, and the method is similar to the bind () method, with the syntax structure:

One (type [, data], FN);

Simulation operation 1, common simulation using the trigger () method to complete the simulation operation:

$ ("#btn"). Trigger ("click");     // trigger the Click event with ID btn // You can also simplify:$ ("#btn"). Click ();

2. Triggering the custom Event trigger () method can trigger not only events with the same name supported by the browser, but also events with custom names:

$ (' #btn '). Bind ("Myclick",function() {    $ (' #test '). Append ("<p> My custom events </p>") ;}); $ (' #btn '). Trigger ("Myclick");

3. Transmitting data

$ (' #btn '). Bind ("Myclick",function(event,message1,message2) {    $ (' #test '). Append ("<p > "+message1+message2+" </p> ");}); $ (' #btn '). Trigger ("Myclick", ["My Custom", "event"]);

4. The default action trigger () method is executed after the event is triggered and the browser default action is also performed

$ (' input '). Trigger ("focus");

Not only does it trigger events bound on input, it also causes the INPUT element to focus using the Triggerhandler () method to trigger only events without performing a browser default action

$ (' input '). Triggerhandler ("Focus");

Only triggers binding events, not input elements get focus other usages 1, binding multiple event types

$ (function() {     $ ("div"). Bind ("Mouseout mouseover",function() {          //      });};

2. Add event namespaces for easy management

 $ (function   () {$ ( ' div '). Bind (" Click.plugin ", function   () {$ ( ' body ').    Append ("<p>click event </p>" );    }); $ ( ' div '). bind ("Mouseover.plugin", function   () {$ ( ' body '). Append ("<p>mouseover event </p>" );    }); $ ( ' div '). bind ("Dbclick", function   () {$    ( ' body '). Append ("<p>dbclick event </p>"  ' button '). Click (function   () {$ (     ' div '). Unbind (". Plugin" ); });});

Add a namespace after the bound event, delete only need to specify the namespace, click <button> after the plugin namespace is deleted, and no longer plugin Dbclick event in the space still exists 3, the same event name, different namespace execution methods

$ (function() {    $ (' div '). bind ("click",function() {        $ (' body '). Append (" <p>click event </p> ");    });    $ (' div '). bind ("Click.plugin",function() {        $ (' body '). Append ("<p> Click.plugin event </p> ");    });    $ (' button '). Click (function() {        $ (// Note exclamation     });});

When you click the <div> element, both the click event and the Click.plugin event are triggered, and only the Click event is triggered by clicking <button> only, and the Click.plugin event is not triggered, note trigger ("click!") The next exclamation point is to match all of the click methods that do not contain namespaces if both are to be triggered, change to the following code:

$ ("div"). Trigger ("click");

Animations in jquery 1. Show () method and Hide () method(1) The show () method and the Hide () method call the Hide () method to change the display style of the element to the "none" element after it is hidden, you can use the show () method to set the appearance style of the element to the previous displayed state (2) The show () Method and Hide ( ) method to make the element move and you want the element to appear slowly when you call the show () method, you can specify a speed parameter for the show () method, for example, the speed keyword "slow"

$ ("element"). Show ("slow");

Elements are displayed slowly within 600ms, as well as normal (400ms), Fast (200ms), and you can specify a number (in milliseconds)

$ (function() {    $ ("#panel h5.head"). Toggle (function() {        $ (this ). Next (). Show ("Slow");    },function() {        $ (this). Next (). Hide ()     ;});

2. FadeIn () method and Fadeout () methodFadeIn (), FadeOut () only changes the opacity of the element, and FadeOut () decreases the opacity of the element for a specified time until the element disappears completely (Display:none), and FadeIn () is reversed.

$ (function() {    $ ("#panel h5.head"). Toggle (function() {        $ (this  ). Next (). FadeOut ();    },function() {        $ (this). Next (). FadeIn ();    } );

You can also use keywords and specify time parameters, in milliseconds 3. Slideup () method and Slidedown () methodThese two methods only change the height of the element, and if the display of an element is None,slidedown () the element will be extended from top to bottom, slideup () just opposite

$ (function() {    $ ("#panel h5.head"). Toggle (function() {        $ (this  ). Next (). Slidedown ();    },function() {        $ (this). Next (). Slideup ();    } );

Same as you can use keywords and specify time parameters, per millisecond Custom animation method animate ()

Animate (params, speed, callback);

(1) Params: A mapping that contains style attributes and values, for example: {property: ' Value ': ' Value1 ',....} (2) Speed: Velocity parameter, Optional (3) callback: function executed when the animation is complete, optional 1, custom simple animation

<id= "Panels"></div>

#panels {    position: relative;     width: 100px;     height: 100px;     Border: 1px solid #0050d0;     background: #96e555;     cursor: pointer;}

$ (function() {    $ ("#panels"). Click (function() {        $ (this). Animate ({left: "500px"},3000);})    ;

Within three seconds, the div shifts to the right 500px, moving only once. 2, accumulate, subtract animation

$ (function() {    $ ("#panels"). Click (function() {        $(This ). Animate ({left: "+=500px"},3000);    } );

3. Multiple animations (1) Simultaneous execution of multiple animations

$ (function() {    $ ("#panels"). Click (function() {        $ (this). Animate ({left: "500px", Width: "200px", Height: "200px"},3000);    } );

This is a simultaneous animation (2) perform multiple animations sequentially to disassemble multiple animations

$ (function() {    $ ("#panels"). Click (function() {        $(This ). Animate ({left: "500px"},3000);        $ (this). Animate ({width: "200px"},3000);        $ (this). Animate ({height: "200px"},3000);     });

Chained notation:

$ (function() {    $ ("#panels"). Click (function() {        $ (this). Animate ({left: "500px"},3000)                . Animate ({width:"200px"},3000)                . Animate ({height:"200px "},3000);     });

4. Comprehensive animation

$ (function() {    $ ("#panels"). CSS ("opacity", "0.5");   Sets the opacity    $ ("#panels"). Click (function() {        $ (this). Animate ({left : "400px", Height: "200px", Opacity: "1"},3000)                . Animate ({top:"200px", Width: "200px"},3000)                . FadeOut ("slow");})    ;

5, Animation callback function if you want to change the CSS style at the end, rather than fade out, you need to use a callback function instead of writing the CSS () method to the location of the fadeout () method, because the CSS () method does not join the animation queue

$ (function() {    $ ("#panels"). CSS ("opacity", "0.5");   Sets the opacity    $ ("#panels"). Click (function() {        $ (this). Animate ({left : "400px", Height: "200px", Opacity: "1"},3000)                . Animate ({top:"200px", Width: "200px"},3000,  function() {                    $ (this). CSS ("Border", "5px solid Blue");     });

Note:The callback callback function is suitable for all animation effects of jquery

Stop animation and determine whether it is in an animated state 1, stop the animation of the elementUsing the Stop () method

Stop ([clearqueue],[gotoend]);

Parameters are optional, Boolean clearqueue indicates whether to empty the animation queue, Gotoend indicates that the animation is being executed directly to the end state if you use the Stop () method directly, the animation being executed is immediately stopped, and if there are animations waiting to be executed, Continue with the next animation in the current state 2. Determine if the element is in an animated state

if (!$ ("element"). Is (": Animate")) {    //dosomething}

3. Delay AnimationUse the delay () method to delay the operation of an animation

$ (function() {    $ ("#panels"). CSS ("opacity", "0.5");   Sets the opacity    $ ("#panels"). Click (function() {        $ (this). Animate ({left : "400px", Height: "200px", Opacity: "1"},3000)                . Delay (+)     //  delay is the next animation                . Animate ({top: "200px", Width: "200px"},3000)     ;});

Other animation methods 1, Toggle (Speed,[callback]) Method 2, Slidetoggle (Speed,[easing],[callback]), 3, FadeTo (Speed,opacity,[callback]); 4, Fadetoggle (Speed,[easing],[callback]); 1, toggle ()The visible state of the switchable element

$ ("#panel h5.head"). Click (function() {    $ (this). Next (). Toggle ();});

Equivalent to:

$ (function() {    $ ("#panel h5.head"). Toggle (function() {        $ (this ). Next (). Show ("Slow");    },function() {        $ (this). Next ( ). Hide (+);    } );

2. Slidetoggle () methodToggle matching element Visibility with a high level of change 3. FadeTo () methodAdjusts the opacity of the element incrementally to the specified value, adjusting only the opacity of the element, 4. Fadetoggle () methodToggle element Visibility through element opacity, only adjust element opacity 5th chapter, jquery on Forms, table operations and more applications this chapter is mostly using the method described above, no notes

Sharp jquery 2nd Edition study notes 4, 5 chapters