您的位置:首页 > Web前端 > JQuery

如何直接通过jquery为获取的对象添加事件?

2014-04-30 09:11 169 查看
jquery已经为我们提供了各种事件处理方法,我们无需在html元素上直接写事件,而可以直接为通过jquery获取的对象添加事件。

  如:

  $("#msg").click(function(){alert("good")}) //为元素添加了单击事件

  $("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})

  //为三个不同的p元素单击事件分别设定不同的处理

  jQuery中几个自定义的事件:

  (1)hover(fn1,fn2):一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。

  //当鼠标放在表格的某行上时将class置为over,离开时置为out。

  $("tr").hover(function(){

  $(this).addClass("over");

  },

  function(){

  $(this).addClass("out");

  });

  (2)ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

  $(document).ready(function(){alert("Load Success")})

  //页面加载完毕提示“Load Success”,相当于onload事件。与$(fn)等价

  (3)toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。

  //每次点击时轮换添加和删除名为selected的class。

  $("p").toggle(function(){

  $(this).addClass("selected");

  },function(){

  $(this).removeClass("selected");

  });

  (4)trigger(eventtype): 在每一个匹配的元素上触发某类事件。

  例如:

  $("p").trigger("click"); //触发所有p元素的click事件

  (5)bind(eventtype,fn),unbind(eventtype): 事件的绑定与反绑定

  从每一个匹配的元素中(添加)删除绑定的事件。

  例如:

  $("p").bind("click", function(){alert($(this).text());}); //为每个p元素添加单击事件

  $("p").unbind(); //删除所有p元素上的所有事件

  $("p").unbind("click") //删除所有p元素上的单击事件

本文来自: 51模板集(www.51mubanji.com)
详细出处参考:http://www.51mubanji.com/cmskf/jQueryjc/375.html
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐