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

jQuery事件方法(2)

 
阅读更多

1.one():为被选元素附加一个或多个事件处理程序,并规定当事件发生时运行的函数。

当使用 one() 方法时,每个元素只能运行一次事件处理器函数

 

$("p").one("click",function(){
  $(this).animate({fontSize:"+=6px"});
});//当点击 p 元素时,增加该元素的文本大小:

 2.ready():当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件。

$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").slideToggle();
  });
});

 3.resize() :当调整浏览器窗口的大小时,发生 resize 事件。

$(window).resize(function() {
  $('span').text(x+=1);
});

 4.scroll():当用户滚动指定的元素时,会发生 scroll 事件。

$("div").scroll(function() {
  $("span").text(x+=1);
});

 5.select():当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件。

$("input").select(function(){
  $("input").after(" Text marked!");
});

 6.submit():当提交表单时,会发生 submit 事件。

$("form").submit(function(e){
  alert("Submitted");
});

 7.toggle():用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。

 

 

$("p").toggle(
  function(){
  $("body").css("background-color","green");},
  function(){
  $("body").css("background-color","red");},
  function(){
  $("body").css("background-color","yellow");}
);

 8.trigger():触发被选元素的指定事件类型。

$(document).ready(function(){
  $("input").select(function(){
    $("input").after("文本被选中!");
  });
  $("button").click(function(){
    $("input").trigger("select");
  });
});

triggerHandler() 方法触发被选元素的指定事件类型。但不会执行浏览器默认动作,也不会产生事件冒泡。

triggerHandler() 方法与 trigger() 方法类似。不同的是它不会触发事件(比如表单提交)的默认行为,而且只影响第一个匹配元素。

9.unbind() :移除被选元素的事件处理程序,该方法能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行。

$(document).ready(function(){
  $("p").click(function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("p").unbind();
  });
});

 10.unload():当用户离开页面时,会发生 unload 事件,只应用于 window 对象。

      具体来说,当发生以下情况时,会发出 unload 事件:

  • 点击某个离开页面的链接
  • 在地址栏中键入了新的 URL
  • 使用前进或后退按钮
  • 关闭浏览器
  • 重新加载页面
$(window).unload(function(){
  alert("Goodbye!");
});

 

 

 

分享到:
评论

相关推荐

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

    4. jQuery的`.on()`方法:在jQuery 1.7及更高版本中,推荐使用`.on()`方法来进行事件委托。这个方法可以将一个或多个事件处理器绑定到指定的选择器匹配的元素上。当事件发生时,它会在选定的元素内查找事件委托的...

    jquery鼠标滚轮事件

    在jQuery中,通常我们使用`.on()`方法来绑定这些事件。 ```javascript $(document).on('mousewheel', function(event) { // 在这里处理滚轮事件 }); ``` 或者针对特定元素: ```javascript $('#myElement').on('...

    jQuery事件及绑定.pptx

    jQuery事件基础 1、jQuery事件概述 jQuery对JavaScript操作DOM事件进行了封装,形成了更好的事件处理机制; 包括常用事件、事件绑定与解绑等。jQuery事件处理方法是jQuery的核心函数。 常用事件方法(教材P263表A-4...

    jquery效果事件

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

    JQuery绑定事件

    在JavaScript原生语法中,为元素添加事件监听器通常涉及到`addEventListener`或`attachEvent`方法,而jQuery提供了一套统一且便捷的API来处理这一任务。 首先,我们需要了解什么是事件。在Web开发中,事件是用户与...

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

    这个例子和jQuery版本相似,只是使用了原生的事件监听方法。注意,对于不支持`event.preventDefault()`的老版本IE,还需要设置`event.returnValue = false`来阻止默认行为。 总结,无论使用jQuery还是原生...

    jquery快速学三(事件与动画)

    通过以上对jQuery事件处理和动画效果的讲解,相信你已经对这两个主题有了全面的理解。结合实际的HTML文档,不断练习和探索,你将能熟练运用jQuery,提升网页交互体验。在实践中,不断学习,持续进步,是成为优秀的...

    jquery的几种使用方法

    2. **事件处理**:jQuery提供了简洁的事件绑定机制。例如,`$("button").click(function() {...})`用于监听按钮的点击事件。此外,还有`.on()`方法可处理动态添加的元素的事件,以及`.off()`用于取消事件绑定。 3. ...

    JQuery事件Demo

    **jQuery事件Demo详解** 在Web开发中,JavaScript的事件处理是构建交互式用户界面的关键技术。jQuery库大大简化了这一过程,提供了丰富的API和方法来处理DOM(文档对象模型)中的事件。本篇文章将深入探讨jQuery...

    为jQuery添加自定义事件机制

    为了实现更复杂的事件机制,可以利用jQuery的`proxy`方法来改变事件处理函数的上下文(`this`关键字指向的对象)。同时,可以使用`off`方法移除已绑定的事件,以避免内存泄漏。 ```javascript var handler = ...

    jquery监听DIV的事件

    在jQuery中,我们可以使用`.on()`方法来监听DOM元素的事件。例如,如果我们想要监听一个ID为"myDiv"的DIV元素的点击事件,我们可以这样写: ```javascript $("#myDiv").on("click", function() { // 当用户点击这...

    jQuery事件函数共4页.pdf.zip

    《jQuery事件函数共4页.pdf》是一份详细探讨jQuery事件处理的资料,它涵盖了JavaScript库jQuery中的关键事件处理概念和函数。jQuery简化了DOM(文档对象模型)事件处理,使得在网页交互中添加、移除和触发事件变得...

    jquery鼠标滚轮事件支持插件

    开发者只需在项目中引入插件的JavaScript文件,然后就可以通过jQuery选择器和事件绑定方法来监听和处理滚轮事件。 “jquery-mousewheel-master”是这个插件的源代码仓库,其中包含了插件的主文件和其他相关资源。...

    jQuery 事件

    jQuery 事件 jQuery 是为事件处理特别设计的。 什么是事件? 页面对不同访问者的响应叫做事件。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。 实例: 在元素上移动鼠标。 选取单选按钮 点击元素 ...

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

    在这款日历插件中,jQuery扮演了核心的角色,为事件记录、日历展示等功能提供了便利的API和方法。 日历插件的事件记录功能是其核心亮点。用户可以方便地在任何日期上添加事件,无论是会议、约会还是简单的待办事项...

    jquery.common通用方法

    2. 事件处理:通用方法中通常会包含对常见事件的处理,如点击事件、滚动事件、表单提交事件等。这些方法可以帮助开发者更简单地绑定和解绑事件,以及处理事件触发时的逻辑。 3. 数据操作:为了方便数据的存储和读取...

    Struts2+jquery

    例如,当用户触发一个按钮点击事件时,可以使用jQuery发送一个POST请求到Struts2 Action,Action处理请求后返回结果,jQuery再将结果显示在页面上。 Ajax是Asynchronous JavaScript and XML的缩写,虽然现代Ajax...

    jQuery实现给input绑定回车事件的方法

    接下来,我们详细讲解如何利用jQuery给input元素绑定回车事件的两种方法,以及相关的知识点。 ### 知识点一:jQuery基础 在了解如何使用jQuery给input元素绑定回车事件之前,需要对jQuery有一个基本的认识。jQuery...

    jquery例子大全 jquery demo

    jQuery 改进了JavaScript的事件处理方式,如 `.on()` 方法用于绑定事件监听器,`.off()` 移除事件监听器,`.trigger()` 触发事件。`.delegate()` 和 `.live()`(在jQuery 1.7后被 `.on()` 替代)则支持事件代理,...

Global site tag (gtag.js) - Google Analytics