jQuery 学习笔记 基础篇六 jQuery事件与应用

一、页面加载时触发ready()事件

　　用途：ready()事件类似于onLoad()事件，但前者只要页面的DOM结构加载后便触发，而后者必须在页面全部元素加载成功才触发。ready()可以写多个，按顺序执行

　　注解：$(document).ready(function(){})等价于 $(function(){})

　　例子：1、$(document).ready(function(){$("#top").html("我背加载了")});

　　        2、<div id="tip"></div>  <input id="btntest type="button" value="点我一下"/>

　　　　　　$(function(){$("#btntest").bind("click",function(){$("#tip").html("我被点了")})})

二、使用bind()方法绑定元素的事件

　　用途：bind()方法绑定元素的事件非常方便，绑定前，需要知道被绑定的元素名，绑定的事件名称，事件中执行的函数内容就可以了

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

　　注解：参数event为事件名称，多个事件名称用空格隔开，function为事件执行的函数

　　例子： 绑定按钮的单击事件，单击按钮时，该按钮变为不可用

　　　　　　$(function(){

　　　　　　　　$("#btntest").bind("click",function(){　　　　　　　　                

　　　　　　$(this).attr("disabled","true");

　　　　　　　　})

　　　　　　});

　　　　　　　　绑定2个的时候，即：点击或者移开鼠标 都不能用 

　　　　　　$(function(){$("#btntest").bind("click mouseout", function () {})});

三、使用hover()方法切换事件

　　用途：hover()方法的功能是当鼠标移到所选元素上时，执行方法中的第一个函数，当鼠标移出时，执行方法中的第二个函数，实现事件的切换效果

　　格式：$(selector).hover(over,out);

　　注解：over参数为移到所选元素上触发的函数，out参数为移出元素时触发的函数

　　例子：$(function(){$("div").hover(function(){$(this).addClass("orange");},function() 

              {$(this).removeClass("orange")})});

四、使用toggle()方法绑定多个函数

　　用途：toggle()方法可以在元素的click事件中绑定两个或两个以上的函数，同时，它还可以实现元素

　　　　  的隐藏也显示的切换

　　格式：$(selector).toggle(fun1(),fun2(),funN(),...)

　　注解：fun1,fun2就是多个函数名字

　　例子：每次点击<div>元素时候，显示不同内容

　　　　 $(function(){

　　　　　　$("div").toggle(

　　　　　　function(){　$(this).html("苹果"); },

　　　　　　function(){  $(this).html("荔枝");},　　

　　　　　　function(){　$(this).html("香蕉");}

　　　　　　　　)

　　　　　　　　});

五、使用unbind()方法移除元素绑定的事件

　　用途：unbind()方法可以移除元素已绑定的事件

　　格式：$(selector).unbind(event,fun)

　　注解：其中参数event表示需要移除的事件名称，多个事件名用空格隔开，fun参数为事件执行时调

　　用的函数名称

　　例子：点击按钮时，使用unbind()方法移除<div>元素中已绑定的“dbclick”事件

　　　　　　$("#btntest").bind("click",function(){

　　　　　　　　$("div").unbind("dbclick");

　　　　　　　　$(this).attr("disabled","true");  });