`
zpball
  • 浏览: 919434 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jQuery事件总结

阅读更多

1.绑定事件
(1)
$("p").bind("click", function(e){});
(2)
$("p").click(function() {})

2.删除事件

(1)删除特定事件
$("div").unbind("click");

(2)删除所有事件
$("div").unbind();

3.触发事件

(1)trigger方法 触发特定元素事件
$("div").trigger('click');


(2)triggerHandler方法 与trigger方法相似,但不触发浏览器默认事件,如focus事件,使用此方法,将会阻止焦点到元素上
$("input").triggerHandler("focus");


4.特殊事件
(1)one(string event,function data)
此事件只执行一次则被删除
$("p").one("click", function(){
  alert("test");
});

(2)hover(over, out)
切换mouseover与mouseout事件

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

可用unbind mouseover与mouseout方法来删除此事件
(3)toggle(oldclick,newclick)
切换执行click事件

  
 $("li").toggle(
      function () {
        $(this).css("list-style-type", "disc")
               .css("color", "blue");
      },
      function () {
        $(this).css({"list-style-type":"", "color":""});
      }
    );

可用unbind click方法来删除此事件

5.     1.2.3版本新增功能
(1)事件命名空间(便于管理)

实际使用方面:
1.当不需要全部事件,删除特定2个以上的事件.

示例:
 $("div").bind("click.plugin",function() {} );
  $("div").bind("mouseover.plugin", function(){});
  $("div").bind("dblclick", function(){});
  $("button").click(function() {$("div").unbind(".plugin");  })
在事件名称后面加命名空间,在删除事件时,只需要指定命名空间即可.以上代码执行以后,dbclick仍然存在.

(2)相同事件名称,不同命名的事件执行方法

示例:
$("div").bind("click", function(){ alert("hello"); });
  $("div").bind("click.plugin", function(){ alert("goodbye"); });
  $("div").trigger("click!"); // alert("hello") only
以上trigger方法则根据事件名称来执行事件.

分享到:
评论

相关推荐

    jquery总结学习资料JQuery总结,jquery总结学习资料JQuery总结,jquery总结学习资料JQuery总结

    - **轻量级**:尽管功能强大,但jQuery的核心库体积小,加载速度快。 - **跨浏览器兼容**:jQuery兼容多种主流浏览器,包括IE 6.0+、Firefox 1.5+、Safari 2.0+、Opera 9.0+。 - **CSS和XPath选择器支持**:...

    漂亮的jQuery事件日历插件calendar.js

    **jQuery事件日历插件calendar.js详解** 在网页设计中,日历插件是一个非常实用的元素,尤其在处理日期相关的交互时。"漂亮的jQuery事件日历插件calendar.js"正是这样一个工具,它能帮助开发者轻松地在网页上集成...

    jquery总结学习资料JQuery总结

    **jQuery 总结** 在实际开发中,jQuery 可以极大地提高工作效率,减少代码量,使得动态交互和界面美化变得更加简单。然而,随着 ES6 和现代前端框架的崛起,如 React 和 Vue,jQuery 在某些场景下可能不再是首选。...

    jQuery1.4.1 小结

    **jQuery1.4.1 小结** jQuery 是一个广泛使用的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。在本文中,我们将深入探讨jQuery 1.4.1版本的一些核心特性、改进和常用API。 #...

    jquery效果事件

    三、jQuery事件 1. 基本事件绑定:jQuery提供了`.on()`方法来绑定事件。例如,`$("#myButton").on("click", function() { ... })`表示当id为"myButton"的元素被点击时,执行匿名函数内的代码。 2. 鼠标事件:常见...

    jquery监听鼠标滚轮事件+js监听滚轮事件

    总结,无论使用jQuery还是原生JavaScript,监听鼠标滚轮事件都能为网页带来更丰富的交互体验。在实际项目中,开发者可以根据需求选择合适的方法,同时注意浏览器兼容性和性能优化。在测试过程中,确保在多种浏览器和...

    JQuery绑定事件

    总结来说,jQuery绑定事件是其强大功能的一个体现,它让事件处理变得简单、直观,同时也提供了丰富的选择来满足各种复杂的交互需求。在实际项目中,熟练掌握jQuery的事件绑定不仅能提高开发效率,还能为用户提供更...

    jquery事件绑定例子

    通过查看并运行这些例子,你可以更直观地理解jQuery事件绑定的工作原理,并学习如何将它们应用到自己的项目中。 总结来说,jQuery的事件绑定功能是其强大功能的一部分,它使开发者能够轻松响应用户交互,提供更加...

    jquery 学习笔记总结

    **jQuery 学习笔记总结** jQuery 是一个广泛使用的 JavaScript 库,它简化了网页文档对象模型(DOM)操作、事件处理、动画制作以及Ajax交互。本篇笔记将深入探讨 jQuery 的核心概念,包括选择器、常用方法以及在...

    为jQuery添加自定义事件机制

    总结,为jQuery添加自定义事件机制是通过`$.fn.extend`扩展jQuery功能,使用`on`和`off`来绑定和解除事件,通过`trigger`来触发事件,并可以传递参数。这种机制极大地丰富了jQuery的事件处理能力,使得开发者能够...

    jQuery为动态生成的select元素添加事件的方法

    8. 总结:通过使用jQuery的事件委托技术,开发者可以有效地为动态生成的元素添加事件处理器。这种方式不仅节省了资源,还提高了代码的效率和可维护性。在实际开发中,这种方法被广泛应用于各种需要动态内容更新的...

    jquery技巧总结(转)

    **jQuery 技巧总结** jQuery 是一款非常流行的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画制作和Ajax交互等任务。自2006年发布以来,jQuery 已经成为 web 开发不可或缺的一部分。这篇总结将探讨一些...

    jQuery带事件记录的多功能日历

    总结起来,这款jQuery带事件记录的多功能日历插件,以其高效的时间管理、精致的界面设计和灵活的可配置性,成为网页开发中的一个强大工具。它不仅让日历变得更加实用,还提升了用户的互动体验,对于那些需要进行日程...

    JQuery个人总结(很全面)

    目录: 1.选择网页元素 2.改变结果集 3.链式操作 4.元素的操作:取值和赋值 5.元素的操作:移动 6.元素的操作:复制、删除和创建 7.工具方法 8.事件操作 9.特殊效果

    鼠标双击或触摸双击事件检测jQuery插件

    本文将深入探讨一个针对鼠标双击和触摸屏双击事件检测的jQuery插件——jQuery-doubleTap。 **一、插件简介** jQuery-doubleTap是一款专门用于检测鼠标双击和移动设备触摸屏双击事件的插件。它通过优化"click"和...

    jquery技巧总结

    **jQuery技巧总结** jQuery是一款广泛应用于前端开发的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。本篇文章将深入探讨jQuery的核心技巧,帮助开发者更高效地利用这一强大的工具。 ###...

    WEB开发 之 jQuery 事件.docx

    总结jQuery事件处理的最佳实践: 1. **将所有jQuery代码置于事件处理函数内**:这有助于保持代码的模块化,只在特定事件触发时执行相关逻辑。 2. **将所有事件处理函数置于文档就绪事件处理器中**:使用`$(document...

    Jquery演示 jquerydemo jquery常用

    总结,jQuery不仅简化了JavaScript编程,还提供了丰富的功能和强大的性能。通过学习和实践jQuery,你可以构建更具交互性的网页应用,提升用户体验。这个"jQuerydemo"压缩包中的案例,将会是你学习和探索jQuery的宝贵...

Global site tag (gtag.js) - Google Analytics