JQuery----2

One, jquery event application

Ready (): Similar to onload (), but it is only triggered when the page DOM structure is loaded, and onload () must have all the elements of the page loaded successfully.

// $ (document). Ready (function () {}); equivalent to $ (function () {});
Set the content of the ID tip
$ (document). Ready (function() {   $ ("#tip"). HTML ("I'm Loaded!"). ");})

Bind (): Bind an event to an element

// bind () Demo $ ("button"). Bind (' click ',function() {    $this. attr ("Disabled", "true");});

Delete event: Unbind (Event,fun), event name, multiple spaces separated, fun is the function called when the event is executed, and if there are no arguments, all event handlers for the specified element are deleted

Focus, Defocus: hover (over,out); Over is the function that is triggered when the mouse moves in, out is the function that is triggered when the mouse moves out

Hide, Show: Toggle (), the method can give the element click event binding two or more than two functions, but also to implement the hidden and switching elements

//each time you click on a DIV element to display different content$(function(){    $("Div"). Toggle (function(){            $( This). HTML ("Apple"); },         function(){             $( This). HTML ("banana"); }    )});//implement the hiding and display of buttons$(function{    $("button"). Bind ("click",function(){          $("Div"). Toggle (); })});

View Code

　　

Single event: one (Event,fun) that binds an element to an event that only executes once

Manually trigger the specified event: trigger, where event can be an element's own event or a custom event, which must be able to execute

<style>. color {color:red; }        </style> <div> Local tyrants, let's make a friend </div> <script>//triggered when the page is finished loading$(function () {                //where Change-color is a custom event$ ("div"). Bind ("Change-color",function () {                    $( This). addclass ("Color");                }); //Binding Custom Events$ ("div"). Trigger ("Change-color"));        }); </script>

View Code

Focus of the text box is lost Focus: Focus, Blur

Focus: Triggered when an element gets focus, such as clicking a text box

Blur: Triggered when an element loses focus, such as clicking anywhere except the text box

(function() {    // input Box Focus event    $ ("input"). Bind ("Focus",function {         $ ("div"). html ("Please enter your name");    });     // the Defocus event    of the input box $ ("input"). Bind ("blur",function() {         if($ (this). Val (). length = = 0 )              $ ("div"). html ("Your name cannot be empty!") );    });});

View Code

Change event for drop-down box: event triggered when the value of an element changes, as in the drop-down list box

$ (function() {                // bind Change Event                $ ("select"). Bind ("change",function  () {                   if($ (this). val () = = ' Apple ')                        $ (this). CSS (" Background-color "," Red ");                    Else                         $ (this). CSS ("Background-color", "green");                } );

View Code

Live (): jquery1.9 is no longer supported, the 1.7 version is deprecated, same as the bind() method, the method live() and the executable event that can bind the element, in addition to this same function, the live() method can also bind the dynamic element

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

View Code

Second, the animation

Showing: $ (selector). Show (Speed,[callback])

Hidden: $ (selector). Hide (Speed,[callback])

Speed: Sets the hidden or displayed velocity value, which can be ' slow ', ' fast ', or millisecond value

Callback: The name of the function called after the execution of the action is hidden or displayed

$(function(){     $("H4"). Bind ("click",function(){          if($ ("#hidval"). val () = = 0){               //Display UL label$ ("ul"). Show (); $("#hidval"). Val (1); }Else{               //Hide UL Tags$ ("ul"). Hide (); $("#hidval"). Val (0); }     });});</script>

View Code

         $(function(){                   $("H4"). Bind ("click",function(){                             if($ ("input"). val () = = 0){                                   $("UL"). Show (3000,function(){                                         $("Input"). Val (1);                             }); }Else{                                    $("ul"). Hide (3000,function(){                                           $("Input"). Val (0);                             });          }                    }); });</script>

View Code

Show hidden two in Oneness: $ (selector). Toggle (Speed,[callback]);

The element is displayed when the method is called and the element is hidden, and is displayed

$ (function() {       $ ("H4"). Bind ("click",function() {              $ ("ul"). Toggle (3000 ,function() {                    $ ("span"). HTML () = = "Shadow"? $ ("span"). HTML ("display"): $ ("span"). HTML ("Shadow");              });       });});

Toggle () Demo

Swipe up/down:

$ (selector). Slideup (Speed,[callback]), slide the element up, apply only to the displayed element

$ (selector). Slidedown (Speed,[callback]), slide the element down, which applies only to elements that are hidden

 $ (function   () {$ ( "button"). Bind (" Click ", function   () { if  ($ ("hidden"). val () = = 0) {$ ( "ul"). Slideup (1000,function   () {$ ( "hidden"). Val (1);                });  else  {$ ( "UL"). SLI                                Dedown (1000,function   () {                        $ ( "hidden"). Val (0

slideup, Slidedown usage

Swipe up and down two in the same:

$ (selector). Slidetoggle (Speed,[callback]), call this method, and if the element has been slid upward, it will slide down automatically, and vice versa

$ (function() {    $ ("H4"). Bind ("click",function() {        //  Slidetoggle () Use        $ ("ul"). Slidetoggle (+,function() {            $ ("span"). HTML () = = " Downward "? $ ("span"). HTML ("Slide Up"): $ ("span"). HTML ("downward");}     );});

View Code

　　

JQuery----2