jquery Learning Notes-jquery events and applications

1. Trigger the Ready () event when the page loads

The Ready () event is similar to the OnLoad () event, but the former is triggered as soon as the page's DOM structure is loaded, and the latter must be loaded successfully on all elements of the page, which can write multiple and execute sequentially. In addition, the following notation is equal:

$ (document). Ready (function () {}) is equivalent to $ (function () {});

2. Binding an element's events using the Bind () method

The bind () method binds the element's events very conveniently, before binding, needs to know the binding element name, the binding event name, the event executes the function content to be able, it's binding the following type:

$ (selector). bind (Event,[data] function)

The argument event is the event name, and multiple event names are separated by a space, function for the event execution.

        <input id= "btntest " type=" button " value=" Click or move Out is not available " />                 <script type= "Text/javascript" >             $ (function  ()  {                 $ ("#btntest"). Bind ("Click mouseout",  function  ()  {                     $ (This). attr ("Disabled",  "true");                 })              });         </script> 

3. Switching events using the hover () method

The function of the hover () method is that when the mouse moves over the selected element, executes the first function in the method, when the mouse moves out, executes the second function in the method, implements the actual effect of the event, and invokes the format as follows:

$ (selector). Hover (over,out);

The over parameter is the function that is moved to the trigger on the selected element, and the out parameter is the functions that are triggered when the element is moved out.

        <div> Don't go! You are local tyrants </div>                 <script type= "Text/javascript" >             $ (function  ()  {                 $ ("div"). Hover (                 function  ()  {                     $ (This). addclass ("Orange");                 },                 function  ()  {                     $ (This). Removeclass ("Orange")                  })              });        </script>

4. Use the Toggle () method to bind multiple functions

The toggle () method can bind two or more than two functions in the Click event of an element, and it can also implement a toggle between hiding and displaying the element, and the invocation format for binding multiple functions is as follows:

$ (selector). Toggle (Fun1 (), fun2 (), Funn (),...)

Where Fun1,fun2 is the name of multiple functions

        <input id= " Btntest " type=" button " value=" Point Me " />        < div> I am a dynamic display of </div>                 <script type= "Text/javascript" >            $ (document). Ready (function () {        $ ("#btntest"). Toggle (                 function () {$ (" Div "). Hide ()},                 Function () {$ ("div"). Show ()}        );     });         </script> 

5. Use the Unbind () method to remove an element-bound event

The Unbind () method removes the event that the element is bound to, and its invocation format is as follows:

$ (selector). Unbind (Event,fun)

Where the parameter event represents the event name that needs to be removed, multiple event names are separated by spaces, and the fun parameter is the function name that is called when the event executes.

If no parameters are specified, the Unbind () method removes all event handlers for the specified element.

<input id= "btntest"  type= "button"  value= "Remove event"  />         <div> local tyrants, let's make a friend </div>                 <script type= "Text/javascript" >             $ (function  ()  {                 $ ("div"). Bind ("click",                 function  ()  {                     $ ( This). Removeclass ("BackColor"). AddClass ("color");                 }). bind ("DblClick", function  ()  {                     $ (This). Removeclass ("Color"). AddClass (" BackColor ");                 })                 $ ("#btntest"). Bind ("click", function  ()  {                      $ ("div"). Unbind ("DblClick");                     $ (This). attr ("Disabled",  "true");                 });             });         </script>

6. Use the One () method to bind an element's one-time event

The one () method can bind an element to any valid event, but the event that this method binds is only fired once, and its invocation format is as follows:

$ (selector). One (Event,[data],fun)

The parameter event is the name of the events, and data is what is carried when the event is triggered, and fun is the function that is executed when the event is triggered.

         <div> Click on me for a moment </div>                 <script type= "Text/javascript" >            $ (function  ()  {                 var inti =  0;                $ ("Div "). One (" click ", function  ()  {                     intI++;                     $ (this). CSS ("Font-size",  intI  +  "px");                 }) &NBSP;&NBSP;&Nbsp;         });         </script>

7. The trigger () method can manually trigger an element-specific event, which can be either an element's own event or a custom event, in short, the event must be able to execute, and its invocation format is:

$ (selector). Trigger (event)

Where the event parameter is the name of the events that need to be triggered manually

        <div> local tyrants, let's make a friend </div>                 <script type= "Text/javascript" >            $ (function  ()  {                 $ ("div"). Bind (" Change-color ", function  ()  {                     $ (This). addclass ("color");                 });                 $ ("div"). Trigger ("Change-color");             });         </script>

8. Focus and Blur events for text boxes

The focus event is triggered when the element gets focus, such as when a text box is clicked, and the Blur event is triggered when the element loses focus.

If you click any element except the text box, the event will be triggered.

<input id= "Txtest"  type= "text"  value= ""  />         <div></div>                 <script type= "Text/javascript" >             $ (function  ()  {                 $ ("input")                  .bind ("Focus", function  ()  {                     $ ("div"). HTML (" Please enter your name! ");                 })                  $ ("Input"). Bind (" Blur ",  function  ()  {                     if  (This). Val (). length == 0)                          $ ( "DIV"). html ("Your name can't be empty!"). ");                 })              });         </script>

9. Change event for drop-down list box

When the value of an element changes, the change event is triggered, such as when you select an option in the drop-down list box.

         <select id= "Seltest" >             <option value= "Grapes" > Grapes </option>             <option value= "Apple" > Apple </option>             <option value= "Litchi" > Litchi </ option>            <option value= "Xiang Jiao" > Incense </option>        </select>                 <script type= "Text/javascript" >            $ (function  ()  {                 $ ("#seltest"). Bind (" Change ", &NBSP;FUNCTION&NBSP; ()  {                     if  (This). Val ()  ==  "Apple")                          $ (This). CSS ("Background-color",  "Red");                     else                         $ (this). CSS (" Background-color ", " green ");                 })             });         </script>

10. Invoke the event of the Live () method binding element

As with the bind () method, the Live () method and the executable event that can bind the element, in addition to the same functionality, can also bind dynamic elements, that is, element events that are added using code, in the following format:

$ (selector). Live (Event,[data],fun)

The parameter event is the name of the events, and data is what is carried when the event is triggered, and fun is the function that is executed when the event is triggered.

        <script type= " Text/javascript ">            $ (function  ()  {                $ ("# Btntest "). Live (" Click mouseout ", function  ()  {                     $ (This). attr ("Disabled",  " True ");                 });                 $ ("Body"). Append ("<input id= ' btntest '  type= ' button '  value= ' Click or move out will not be available '  />");             });         </ Script> 

This article is from the "theYllwRvrNo98" blog, make sure to keep this source http://yellowriver.blog.51cto.com/8753974/1675136

jquery Learning Notes-jquery events and applications