一、jquery事件应用

　　ready()：类似onLoad()，但ready()只要页面DOM结构加载后触发，而onLoad()必须页面全部元素加载成功才触发

//$(document).ready(function(){});等价于$(function(){}); //设置id为tip的内容 $(document).ready(function(){   $("#tip") .html("我被加载了！");})

　　bind()：给元素绑定事件

//bind()演示$("button").bind('click',function(){    $this.attr("disabled","true");});

　　删除事件：unbind(event,fun)，event为事件名称，多个以空格隔开，fun为事件执行时调用的函数，若没有任何参数则删除指定元素的所有事件处理函数

　　聚焦、失焦：hover(over,out);over为鼠标移入时触发的函数，out为鼠标移出时触发的函数

　　隐藏、显示：toggle()，该方法可以给元素点击事件绑定两个或两个以上的函数，还可以实现元素的隐藏与切换

//每次点击div元素显示不同内容$(function(){    $("div").toggle(        function(){            $(this).html("苹果");        },         function(){             $(this).html("香蕉");         }    )});//实现按钮的隐藏和显示$(function{    $("button").bind("click",function(){          $("div").toggle();     })});

　　

　　一次性事件：one(event,fun)，给元素绑定只会执行一次的事件

　　手动触发指定事件：trigger(event)，其中event可以是元素自身事件，也可是自定义事件，该事件必须能执行

        
      
       土豪，咱们交个朋友吧
      
                

　　文本框的聚焦失焦：focus、blur

　　　　focus：在元素获取焦点时触发，如单击文本框

　　　　blur：在元素失去焦点时触发，如单击除文本框的任何位置

(function(){    //输入框的聚焦事件    $("input").bind("focus",function{         $("div").html("请输入您的姓名");    });    //输入框的失焦事件    $("input").bind("blur",function(){         if($(this).val().length == 0)              $("div").html("您的名称不能为空!");    });});

　　下拉框的change事件：当一个元素的值发生改变时触发的事件，如在下拉列表框中

$(function(){                //绑定change事件                $("select").bind("change",function(){                   if($(this).val() == '苹果')                        $(this).css("background-color","red");                   else                        $(this).css("background-color","green");                });});

　　live()：jquery1.9之后不再支持，1.7版本开始不推荐使用，与bind()方法相同，live()方法与可以绑定元素的可执行事件，除此相同功能之外，live()方法还可以绑定动态元素

$(function () {                $("input").live("click", function () {                    $(this).attr("disabled", "true");                })                $("input").live("mouseout",function(){                    $(this).attr("disabled","true");                });                $("body").append("");});

 

二、动画

　　显示：$(selector).show(speed,[callback])

　　隐藏：$(selector).hide(speed,[callback])

speed：设置隐藏或显示的速度值，可为‘slow’、‘fast’或毫秒值

callback：为隐藏或显示动作执行完成后调用的函数名

我喜欢吃的水果
     
      
            
       
苹果
            
       
甘桔
            
       
梨
     
      

我爱吃水果
      
       
       
苹果
       
       
西瓜
       
       
梨
      

     显示隐藏二合一：$(selector).toggle(speed,[callback]);

元素处于显示状态调用该方法则影藏该元素，处于隐藏状态则显示

$(function(){       $("h4").bind("click",function(){              $("ul").toggle(3000,function(){                    $("span").html() == "影藏" ?　$("span").html("显示") : $("span").html("影藏");              });       });});

　　上下滑动：

　　$(selector).slideUp(speed,[callback])，向上滑动元素，仅适用于显示的元素

　　$(selector).slideDown(speed,[callback])，向下滑动元素，该函数仅适用于被隐藏的元素

$(function(){        $("button").bind("click",function(){                if($("hidden").val() == 0){                        $("ul").slideUp(1000,function(){                                $("hidden").val(1);                        });                }else{                        $("ul").slideDown(1000,function(){                                $("hidden").val(0);                        });                }        });});

　　上下滑动二合一：

　　$(selector).slideToggle(speed,[callback])，调用该方法，若元素已向上滑，则自动向下滑，反之亦然

$(function(){    $("h4").bind("click",function(){        //slideToggle()的用法        $("ul").slideToggle(1000,function(){            $("span").html() == "向下滑" ? $("span").html("向上滑") : $("span").html("向下滑");        });    });});

　　淡入淡出：

　　$(selector).fadeIn(speed,[callback])，淡入隐藏

　　$(selector).fadeOut(speed,[callback])，淡出显示

//演示fadeIn和fadeOut用法$(function(){    $("h4").bind("click",function(){        if($("hidden").val() == 0){            $("ul").fadeIn(3000,function(){                $("hidden").val(1)            });        }else{            $("ul").fadeOut(3000,function(){                $("hidden").val(0);            });        }    });});

　　淡入淡出透明度：

　　$(selector).fadeTo(speed,opacity,[callback])，opacity为指定不透明度，在0.0~1.0之间，可选参数callback为效果完成后的回调函数名

$(function(){    $("span").each(function(index){        switch(index){            case 0:                $(this).fadeTo(0,0.2);                break            case 1:                $(this).fadeTo(0,0.4);                break;            case 2:                $(this).fadeTo(0,0.6);                break;        }    });});

anima()应用：

　　制作放大动作效果：$(selector).animate({params},speed,[callback])，params为制作动画效果的CSS属性名与值

$(function(){    $("span").animate({width:"80px",height:"80px"},3000,function(){        $("#divTest").html("我粗来啦！");    });});

　　制作移动动画：在移动动画之前需将被移动的元素position设置为absolute或relative

　　停止动画：stop()停止的效果包括滑动、淡入淡出、自定义动画

$("selector").stop([clearQueue],[goToEnd])，clearQueue为是否停止正在执行的动画，后者为是否完成正在执行的动画，默认为false

　　动画延时：delay()

　　$(selector).delay(duration)，duration为延时的时间，单位毫秒，当超过毫秒值时动画继续执行