jQuery入门基础(三):事件

//绑定事件

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

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

//切换事件——有两个或以上的事件同时绑定于同一个元素时,之间的切换

hover(over,out) //用函数实现,over是鼠标停留在元素上时执行,out是鼠标移出元素时执行

toggle(function) //各个函数之间用, 隔开,轮流执行

toggle(speed,callback) //可写入show()/hide()的方法

$(function(){
    $("div").hover(
       function(){
         $("this").append("当鼠标在元素上时添加的内容")
       },
      function(){
        $("b").remove()
      }
)
})    
$(function(){
       $("#btn").toggle(
         function(){
             $("div").css("background-color","red");
         },
          function(){
             $("div").css("background-color","yellow");
         },
        function(){
             $("div").css("background-color","green");
         },
) 
})        

$(function(){
   $("#btn").click(function(){ $(
"div").toggle(1000);
}) })

//移除事件

.unbind()

$(function(){
     $("#btn").click(function(){
    $("#div").unbind();
}) })

//一次性事件

.one()// 当使用one()方法时,内的事件之运行一次

$(function(){
  $("p").one("click",function(){
  $(this).animate({fontSize:"+=6px"});
  }) })

//手动触发制定事件

.trigger()

$(selector).trigger(event,[param1,param2,...])

//其中event参数必需,是指定元素要触发的事件。可以使自定义事件(使用 bind() 函数来附加),或者任何标准事件。后面的参数可选,是指传递到事件处理程序的额外参数。额外的参数对自定义事件特别有用。

$(function (){
    //jQuery代码
    $("div").bind("append-content",function(){
        $(this).append("<b>那是我逝去的青春</b>");
    });
    $("div").trigger("append-content");
    
});

 //焦点事件

.focus() //元素获得焦点

.blur() //元素失去焦点

$(function(){
  $("input").focus(function(){
    $("input").css("background-color","red");
  })
  $("input").blur(function(){
    $("input").css("background-color","grren");
}) })

//改变事件,当元素的值发生变化时,发生改变事件

change() //该事件仅适用于文本域(text field),以及 textarea 和 select 元素。change() 函数触发 change 事件,或规定当发生 change 事件时运行的函数。

$(function(){
  $(".field").change(function(){
    $(this).css("background-color","green");
}) })

 

posted on 2016-08-30 20:54  Thelma  阅读(208)  评论(0编辑  收藏  举报

导航