JavaScript -------------------- in jQuery, the difference between. bind (). live (). delegate (). on () and three ways to write an animation for a light rod event, bindlivedelegate

JavaScript -------------------- in jQuery, the difference between. bind (). live (). delegate (). on () and three ways to write an animation for a light rod event, bindlivedelegate

 

Bind (type, [data], fn) binds an event handler function to a specific event of each matching element.

$("a").bind("click",function(){alert("ok");});

Live (type, [data], fn) attaches an event handler function to all matching elements, even if the element is added later

$("a").live("click",function(){alert("ok");});

Delegate (selector, [type], [data], fn) adds one or more event handlers to the specified Element (child element of the selected element, and specify the function to run when these events occur

$("#container").delegate("a","click",function(){alert("ok");})

On (events, [selector], [data], fn) binds one or more event handlers to the selected element.

Differences:

. Bind () is directly bound to the element

. Live () is bound to the element by means of bubbling. More suitable for the list type, bind to the document DOM node. And. bind () support dynamic data.

. Delegate () is a more precise small range of event proxy, with better performance than. live ()

. On () is the latest version 1.9 that integrates the previous three methods of binding new events.

Certificate ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

I. Write the effect of a light rod in three ways

(1): js batch register this statement

When registering an event through a loop, this must be used in the method body of the anonymous function to represent the current object, and the array name [I] (Object Name) cannot be used ).

Two Methods for setting styles in js:

1. this. style. attribute name = "attribute value ";

If the property name is:

Background-color ---------> backgroundColor

Font-size ----------> fontSize

2.this.style.css Text = "property name: attribute value; font-size: 50px"

Eg:

1 <script type = "text/javascript" src = "jq/jQuery1.11.1.js"> </script> 2 <script type = "text/javascript"> 3 // use a js stick effect 4/* $ (function () {5 var hu = document. getElementsByTagName ("li"); 6 for (var I = 0; I 
 

(2) Two methods of using jq:
1 <script type = "text/javascript" src = "jq/jQuery1.11.1.js"> </script> 2 <script type = "text/javascript"> 3 // use a js stick effect 4/* $ (function () {5 var hu = document. getElementsByTagName ("li"); 6 for (var I = 0; I 
 
 
 
Ii. Animation
1.
(1) show () sets the element display style to the previous display status (block, inline); hide () sets the display style to none, causing hiding.
You can add parameters fast, slow, normal, and an integer in milliseconds ).
(2) Change fadeOut () to transparency to disappear. fadeIn () is opposite.
(3) slideDown () is displayed downward, and slideUp () is hidden upward.
(4) animation (params, speed, callback) custom. params is a style such as {property1: "value1", property2: "value2 "}
Speed. Optional. The number of functions executed after the callback animation is executed. Optional.
Eg:
$ ('Input '). bind ('click', function () {if ($ (this ). is (': visible') {// if the content is displayed $ (this ). hide ();} else {$ (this ). show ();}})
2. Switch the visible state of the element (toggle ())
 
1 # panel 2 {3 position: relative; 4 width: 100px; 5 height: 300px; 6 border: 1px solid #0050D0; 7 background: #96e555; 8 cursor: pointer; 9} 10 html code: 11 <div id = "panel"> </div> 12 jQuery code: 13 $ ("# panel "). click (function () {14 $ (this ). animate ({left: "+ = 500px"}, 3000) // move the value from the left. Execute 15. animate ({height: "-= 100px"}, 2000) // cumulatively reduces the height and then executes 16. animate ({opacity: "0.5"}, 3000) // The transparency is reduced to 0.517. fadeOut ("slow", function () {// all animations can carry the callback function 18 callback (this).css ("display", "block"); // display, the css method is not added to the animation queue, so 19 $ (this) in callback ). animate ({opacity: "1"}, 3000); // change transparency 20}); 21 });
 
 

 
(1) + = and-= can cumulatively change the attribute value. If you write a number directly, it will change once.
(2) left in animate is from left, top is from top;
(3) the css () method is executed immediately instead of being added to the animation queue.
(4) Place multiple attributes in the animation to execute these animations at the same time.
3. Stop the animation and determine whether the animation is in progress.
(1) stop [clearQueue] [gotoEnd]); optional parameter, true or false; clearQueue indicates whether to clear the animation queue that has not been executed; gotoEnd indicates
Whether to directly jump to the end of the current animation. If you use stop () directly, stop the animation that is currently in progress, and the subsequent Animation continues.
(2) hover (enter, leave) is a mouse hover event. enter and execute enter to execute leave. The following example prevents the animation effect from being different from that of the mouse:
If you want to stop multiple animations at enter, you can set the clearQueue parameter to true, such as stop (true)
Stop (false, true) allows the current animation to go directly to the final state.
Stop (true, true) allows the current animation to go directly to the final state and clears the animation queue.
(3) Determine whether the animation is in the animation status
(4) delay animation delay (1000) delay of 1 second.

Simple Animation:
 
<Script type = "text/javascript" src = "jq/jQuery1.11.1.js"> </script> <script type = "text/javascript"> // simple animation $ (function () {// $ ("img "). show (5000, playDog); // $ ("img "). fadeIn (5000, playDog); $ ("img "). slideDown (5000, playDog);}); function playDog () {alert ("will is power ");} </script>