jQuery对于事件的操作

1. 页面加载事件

       页面加载事件ready()，这个我们经常用到，它相当于js中的onload() 事件，它俩的区别在于ready()只要页面的DOM结构加载后便触发，而onload()必须在页面全部元素(包括图片等)加载成功才触发。

      用法：$(document).ready(function(){

                        //codeArea

                  });

       简单用法：$(function(){

                       //codeArea

                  });

     2.绑定事件

      所谓的绑定事件就是在元素发生特定事件时让他去执行某个方法，绑定事件的方法为 bind("事件","方法")；

      用法：$("#btnClick").bind("click",function(){
                         $(this).attr("disabled","true");
                 });

               //上面的代码就是将按钮在点击后置灰

    

      常用的事件有——blur() 元素失去焦点      change()用户改变域的内容   click()单击事件  focus()获得焦点  load（fn）某个页面或图像加载完毕。mousedown(fn)等。

    3.  切换事件

     切换事件换言之就是一个元素上面绑定了多个事件，通过此事件来调度事件的执行。他有两个方法分别是hover()方法与 toggle()方法

    区别：hover() 方法  只能绑定两个方法，他是这样执行的 当鼠标移入选定的元素执行第一个方法，当鼠标移出选定元素执行第二个方法。

              toggle() 方法  可以绑定两个或两个以上的方法，他会挨个去执行。

 hover ()用法：

$("#bindTest").hover(function(){
        $(this).css("background","green");
    },function (){
        $(this).css("background","red");
    });//鼠标划入划出颜色交替

 toggle()用法：

$("#btn").toggle(
        function(){
            $("div").css("background-color","green");
        },
        function(){
            $("div").css("background-color","red");
        },
        function(){
            $("div").css("background-color","yellow");
        }
    );
});//给按钮绑定，点击一下换一个背景颜色

  4.移除事件

     

    绑定事件时bind()，因此移除事件就是unbind()

    语法形式：$(selector).unbind(event,function)
    用法：$("div").click(function(){
               alert("你点击了");
              });                                            //div上有一个点击事件，点击就弹框。
             $("#btn").click(function(){
                $("div").unbind();//把div的事件移除
             });

    5.一次性事件

    

     一次性事件换言之就是只执行一次呗。语法形式：$(selector).one(event,[data],function)

  用法：

 $("p").one("click",function(){
	$(this).animate({fontSize:"+=6px"});
     });//点击一下P元素字体变大，只执行一次

  6.手动触发事件

所谓的手动触发事件个人理解就是自己定义事件，然后手动触发（PS:擦，这Tm不是废话么）

其语法形式：$(selector).trigger(event,[param1,param2,...])

用法：

<pre name="code" class="plain" style="line-height: 22px;"><pre name="code" class="plain" style="color: rgb(51, 51, 51);font-size:18px; line-height: 22px;"><pre name="code" class="plain">     $("div").bind("dd",function(){
	    $(this).append("<b>新加的内容</b>");
       });     <span style="color: rgb(255, 102, 102);">//以上代码是指给div绑定了一个追加文字的事件，事件名称我们自己定义为"dd";</span>
	//任务 
	$("div").trigger("dd");

              <span style="color: rgb(255, 0, 0);">//此处让他执行这个事件</span>

  

    7.焦点事件

    焦点事件比较简单，两个方法一个focus()一个blur(); 

          focus()获得焦点执行，blur()失去焦点执行。

        用法：

 $("input").focus(function(){//获得焦点
        $("input").css("background-color","#FFFFCC");
    });
    $("input").blur(function(){//失去焦点
        $("input").css("background-color","#D6D6FF");
    });

 

     8 change改变事件

   

    从字面就可知道方法是change()方法，它主要是在如下拉框等发生变化的时候执行此方法。

     用法：

    <span style="font-size:14px;"> $("#dd").change(function(){
        alert("改变了");
     });         
</span>

九层之台，始于累土

用心      点滴      积累