JavaScript--------------------jquery. Bind (). Live (). Delegate () on () and three ways to write the light bar event animation

Bind (TYPE,[DATA],FN) binds event handlers for specific events 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 in the

$ ("a"). Live ("Click", Function () {alert ("OK");});

Delegate (SELECTOR,[TYPE],[DATA],FN) The specified element (which belongs to the child element of the selected element) adds one or more event handlers and specifies the function to run when these events occur

$ ("#container"). Delegate ("A", "click", Function () {alert ("OK");})

On (EVENTS,[SELECTOR],[DATA],FN) an event handler that is bound to one or more events on the selection element

Difference:

. Bind () is directly bound on the element

. Live () is bound to an element by bubbling way. More appropriate for the list type, bound to the document DOM node. and. Bind () have the advantage of supporting dynamic data.

. Delegate () is a more precise, small-scale use of event proxies with better performance. Live ()

. On () is the latest 1.9 version of the new event binding mechanism that incorporates the previous three ways

--------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------

I. Write the wand effect in three different ways

(1): JS Bulk Register this statement

When registering an event by looping, in the method body of the anonymous function, this must be used to represent the current object, and the array name [i] (object name) cannot be used.

JS to set the style of the two scenarios:

1.This.style. Property name = "attribute value";

If the property name:

Background-color--------->backgroundcolor

Font-size---------->fontsize

2.this.style.csstext= "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  //the effect of the light bar with JS4         /*$ (function () {5 var hu=document.getelementsbytagname ("Li");6 For (Var i=0;i7 hu[i].onmouseover=function () {8 //js mode design style one this.style. Property Name = property value. 9 //this.style.background= "Red";Ten //this.style.fontsize= "40px"; One //Way Two: this.style.csstext= "Property Name: Property value" A this.style.csstext= "background:pink;font-size:50px;"; -                  }; -                   the hu[i].onmouseout=function () { - //Mode one: - this.style.background= ""; - this.style.fontsize= "20px"; + //Mode two: - //this.style.csstext= "background:;font-size:20px;"; +                  }; A              }

(2) Two ways of using JQ:

1<script type= "Text/javascript" src= "Jq/jquery1.11.1.js" ></script>2<script type= "Text/javascript" >3  //the effect of the light bar with JS4         /*$ (function () {5 var hu=document.getelementsbytagname ("Li");6 For (Var i=0;i7 hu[i].onmouseover=function () {8 //js mode design style one this.style. Property Name = property value. 9 //this.style.background= "Red";Ten //this.style.fontsize= "40px"; One //Way Two: this.style.csstext= "Property Name: Property value" A this.style.csstext= "background:pink;font-size:50px;"; -                  }; -                   the hu[i].onmouseout=function () { - //Mode one: - this.style.background= ""; - this.style.fontsize= "20px"; + //Mode two: - //this.style.csstext= "background:;font-size:20px;"; +                  }; A              }

Two: Animation

1.

(1) Show () sets the element display style to the previous display state (block,inline); Hide () sets the display style to none, resulting in hidden.

You can add parameter Fast,slow,normal, time Integer (milliseconds).

(2) FadeOut () change to transparency to disappear, fadeIn () opposite.

(3) Slidedown () down shows that Slideup () is hidden up.

(4) animate (Params,speed,callback) Custom animation, params as style as {property1: "value1", Property2: "Value2"}

Speed, optional, callback the function that the animation executes after execution, optional.

eg

$ (' input '). Bind (' click ', function () {if (') ' (') ' (') ' (') ' (') ' (': ') ' {//If the content is displayed as $ (this). Hide ();      } else {$ (this). Show (); }     })

2. Toggle element Visible State (toggle ())

1 #panel2 {3 position:relative;4 width:100px;5 height:300px;6 border:1px solid #0050D0;7Background: #96e555;8 Cursor:pointer;9 }Ten HTML code: One<div id= "Panel" ></div> A jquery Code: -$ ("#panel"). Click (function () { -$( This). Animate ({left: "+=500px"}, 3000)//accumulate from left to move, first execute the. Animate ({height: "-=100px"}, 2000)//cumulative decrease in height, after execution -. Animate ({opacity: "0.5"}, 3000)//reduced transparency to 0.5 -. FadeOut ("Slow",function() {//animations can have callback functions -$( This). CSS ("Display", "block");//Display, CSS methods are not added to the animation queue, so in callback +$( This). Animate ({opacity: "1"}, 3000);//Change Transparency -     }); +});

(1) + = and-= can be accumulated to change the value of the attribute, if the direct write number is changed once.

(2) left in animate is from top to bottom;

(3) The CSS () method is not added to the animation queue, but is executed immediately.

(4) Putting multiple attributes into animate will perform these animations at the same time.

3, stop the animation and determine if the animation is being animated

(1) stop[clearqueue][gotoend]); optional parameter, true or false;clearqueue whether to empty an animation queue that is not executed; Gotoend represents

Whether to jump directly to the end state of the current animation. If you use Stop () directly to stop the animation that is currently in progress, the subsequent animation continues.

(2) hover (enter,leave) is a mouse hover event, enter execute enter, go out to perform leave; The following example prevents the animation from being inconsistent with the mouse:

If you have more than one animation and want to stop at enter, you can set the parameter clearqueue to true, such as Stop (true)

Stop (false,true) lets the current animation go directly to the end state.

Stop (true,true) lets the current animation go directly to the end state and empties the animation queue.

(3) Determine if you are in an animated state

(4) Delay animation delay (1000) for 1 seconds.

Simple animations:

<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 (playdog);        });         function Playdog () {            alert ("would is Power");        } </script>  
JavaScript--------------------jquery. Bind (). Live (). Delegate () on () and three ways to write the light bar event animation