Sharp jQuery 2nd learning notes chapter 4 and chapter 5, jquery learning notes Chapter 5

Sharp jQuery 2nd learning notes chapter 4 and chapter 5, jquery learning notes Chapter 5
In Chapter 4th, events and animations in jQuery: the window. onload method is usually used in event JavaScript in jQuery 1.7.1, and the $ (document). ready () method is used in jQuery.1. execution timeWindow. the onload method is executed only after all elements of the webpage are loaded. $ (document ). the ready () method can be called when DOM is fully ready because $ (document ). the event is registered in the ready () method and will be executed as long as the DOM is ready. Therefore, it is possible that the associated file of the element has not been downloaded, and the width and height of the sample piece may be invalid. To solve this problem, use another jQuery method ----- load. The load () method binds a handler to the onload event of the element.

$ (Window). load (function () {// write code });

It is equivalent:

Window. onload = function () {// write code };

2. Multiple UseThe windows. onload () method cannot save multiple function references, while $ (document). ready () can 3. Simplified Form

$ (Document). ready (function () {// write code });

Abbreviation:

$ (Function () {// write code });

$ (Document) can also be abbreviated as $ (). When $ () does not contain a parameter, the default parameter is document. Therefore, it can be abbreviated:

$().ready(function(){     // coding});

The three methods are the same. Function event binding uses the bind () method to bind specific events to matching elements. Call format:

bind(type [,datd] ,fn);

The first parameter is the event type, including blur, focus, load, resize, scroll, and so on. Of course, it can also be a custom name. The second parameter is an optional parameter and serves as the event. the third parameter of the additional data object passed to the event object is used to bind the processing function:

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

Merging events jQuery has two merging events: hover (), toggle (), similar to ready (), hover (), and toggle (). They are all jQuery custom methods. 1. hover () the hover (enter, leave) method is used to simulate a cursor hover event. When the cursor moves to an element, it triggers the specified first function, removes the element, and triggers the specified second function. 2. toggle () method toggle (fn1, fn2, fn3 .....), removed from jQuery1.9 to simulate continuous Mouse clicking events, trigger the first function for 1st clicks, trigger the second function for 2nd clicks, trigger the third function for 3rd clicks, and so on, repeated call event bubbling Stop event bubblingYou can use event. stopPropagation () to stop event bubbling. Block default behaviorElements in a webpage have their own default behaviors. For example, clicking a hyperlink jumps and clicking the submit button will submit the form. Sometimes you need to prevent the default event. jQuery provides preventDefault () to prevent the default event. preventDefault () Note: Allow get is used for access. Relevant elements can be accessed through event. relatedTarget access 6. event. pageX and event. pageY, used to obtain the x and y coordinates of the cursor relative to the page. If the page has a scroll bar, add the width and height of the scroll bar 7, event. which: Get the left (1), middle (2), right-click (3) of the mouse in the mouse event, and get the keyboard buttons 8 and event in the keyboard event. metaKey, which is used to obtain the <ctrl> key for more attributes in a keyboard event. Access: Keys () method, syntax structure:

unbind([type],[data]);

The first parameter is the event type, and the second parameter is the function to be removed (1) If there is no parameter, delete all binding events (2) if the event type is provided as the parameter, delete only binding events of this type (3) if all events are passed, only the specific event handler function will be deleted. Note: For events that only need to be triggered once, they will be unbound, jQuery provides the one () method, which can bind a processing function to the element. After a trigger, the structure of the one () method is deleted immediately. The structure of the one () method is similar to that of the bind () method, the usage method is similar to the bind () method. The syntax structure is as follows:

one(type [,data] ,fn);

Simulation operation 1. Commonly used simulation using the trigger () method to complete the simulation operation:

$ ("# Btn "). trigger ("click"); // trigger the click event with the id btn. // You can also simplify it: $ ("# btn "). click ();

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

$ ('# Btn '). bind ("myClick", function () {$ ('# test '). append ("<p> my custom events </p>") ;}); $ ('# btn '). trigger ("myClick ");

3. Data Transmission

$ ('# Btn '). bind ("myClick", function (event, message1, message2) {$ ('# test '). append ("<p>" + message1 + message2 + "</p>") ;}; $ ('# btn '). trigger ("myClick", ["my custom", "Event"]);

4. After the trigger event of the default trigger () method is executed, the default operations of the browser are also performed.

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

Not only triggers events bound to the input, but also enables the input element to get focus. The triggerHandler () method can only trigger events without executing the default browser operations.

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

Only the binding event is triggered, and the focus is not obtained by the input element. Other usage 1. bind multiple event types

$(function(){     $("div").bind("mouseout mouseover",function(){          //do something      });};

2. Add an event namespace for ease of 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>") ;}); $ ('click '). click (function () {$ ('div '). unbind (". plugin ");});});

Add a namespace after the Bound event. You only need to specify the namespace When deleting the plug-in. After you click <button>, the in namespace is deleted, instead of the dbclick event in the plugin space, it still exists. 3. It has the same event name and 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> ") ;}); $ ('click '). click (function () {$ ('div '). trigger ("click! "); // Note the exclamation point });});

After you click the <div> element, the click Event and click are triggered simultaneously. plugin event. If only <button> is clicked, only the click event is triggered instead of the click event. plugin event, pay attention to trigger ("click! ") The exclamation point is used to match all the click methods in a namespace that do not contain the following code:

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

Animation in jQuery 1. show () and hide () Methods(1) When the show () method and the hide () method call the hide () method, the display style of the element is changed to "none". After hiding the element, you can use show () method: Set the display style of the element to the previous display status (2) show () method and the hide () method to make the element appear slowly when the show () method is called, you can specify a speed parameter for the show () method. For example, the speed keyword "slow"

$(“element”).show("slow");

The element is displayed slowly within 400 ms, and normal (200 ms), fast (ms), or a number (in milliseconds) can be specified)

$(function(){    $("#panel h5.head").toggle(function(){        $(this).next().show("slow");    },function(){        $(this).next().hide(1000);    });});

2. fadeIn () and fadeOut () MethodsFadeIn (), fadeOut () only changes the opacity of the element. fadeOut () will reduce the opacity of the element within the specified time until the element completely disappears (display: none), fadeIn () on the contrary.

$(function(){    $("#panel h5.head").toggle(function(){        $(this).next().fadeOut();    },function(){        $(this).next().fadeIn();    });});

You can also use keywords and specified time parameters, in milliseconds 3. slideUp () and slideDown () MethodsThe two methods only change the height of an element. If the display of an element is none, slideDown () will display the element from top to bottom, and slideUp () is the opposite.

$(function(){    $("#panel h5.head").toggle(function(){        $(this).next().slideDown();    },function(){        $(this).next().slideUp();    });});

You can also use keywords and specified time parameters to customize the animation method, in milliseconds, animate ()

animate(params, speed, callback);

(1) params: A ing containing style attributes and values, for example: {property: "value", property: "value1 ",....} (2) speed: speed parameter; optional (3) callback: function executed when the animation is completed; Optional: 1. Custom simple animation

<div 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 moves Px to the right and only moves once. 2. The animation is accumulated and subtracted.

$(function(){    $("#panels").click(function(){        $(this).animate({left:"+=500px"},3000);    });});

3. Multiple Animations (1) execute multiple animations at the same time

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

This is an animation that is executed at the same time (2) execute multiple animations in sequence and split them apart.

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

Chain writing:

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

4. Integrated Animation

$ (Function () {$ ("# panels" ).css ("opacity", "0.5"); // Set opacity $ ("# panels "). click (function () {$ (this ). animate ({left: "400px", height: "200px", opacity: "1"}, 3000 ). animate ({top: "200px", width: "200px"}, 3000 ). fadeOut ("slow ");});});

5. If you want to change the CSS style at the final completion of the animation callback function, instead of writing the css () method at the position of the fadeOut () method, you must use the callback function, because the css () method is not added to the animation queue

$ (Function () {$ ("# panels" ).css ("opacity", "0.5"); // Set opacity $ ("# panels "). click (function () {$ (this ). animate ({left: "400px", height: "200px", opacity: "1"}, 3000 ). animate ({top: "200px", width: "200px"}, 3000, function () {detail (this).css ("border ", "5px solid blue ");});});});

Note: callback functions are suitable for all jQuery animation effects.

Stop the animation and determine whether it is in the animation state 1. Stop the animation of the element.Use the stop () method

stop([clearQueue],[gotoEnd]);

All parameters are optional. The boolean value clearQueue indicates whether to clear the animation queue, and gotoEnd indicates to directly jump the animation being executed to the final state. If you directly use the stop () method, the animation being executed will be stopped immediately. If there is still an animation waiting for execution, the next animation will be executed in the current state. 2. Determine whether the element is in the animation state.

if(!$("element").is(":animate")){    //do something}

3. Delayed AnimationYou can use the delay () method to delay the animation.

$ (Function () {$ ("# panels" ).css ("opacity", "0.5"); // Set opacity $ ("# panels "). click (function () {$ (this ). animate ({left: "400px", height: "200px", opacity: "1"}, 3000 ). delay (1000) // 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 ()You can switch the visible state of an element.

$("#panel h5.head").click(function(){    $(this).next().toggle();});

It is equivalent:

$(function(){    $("#panel h5.head").toggle(function(){        $(this).next().show("slow");    },function(){        $(this).next().hide(1000);    });});

2. slideToggle () methodSwitch Matching Element visibility through height change 3. fadeTo () methodAdjust the opacity of an element to the specified value progressively, and only adjust the opacity of the element, 4. fadeToggle () methodYou can change the visibility of an element by changing the opacity of the element. Only chapter 5th of the opacity of the element is adjusted. jQuery's operations on the form and table and more applications are mostly used in this chapter, no notes