jQuery事件方法(2)

最新推荐文章于 2026-08-21 17:54:30 发布

原创最新推荐文章于 2026-08-21 17:54:30 发布 · 189 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

jQuery

本文详细介绍了jQuery中的各种事件处理方法，包括one(), ready(), resize(), scroll(), select(), submit(), toggle(), trigger(), triggerHandler(), unbind() 和 unload()等。通过具体的示例代码展示了如何使用这些事件来增强网页的交互性和功能性。

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

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

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

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

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

３．resize() ：当调整浏览器窗口的大小时，发生 resize 事件。

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

４．scroll()：当用户滚动指定的元素时，会发生 scroll 事件。

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

５．select()：当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。

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

６．submit()：当提交表单时，会发生 submit 事件。

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

７．toggle()：用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

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

８．trigger()：触发被选元素的指定事件类型。

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

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

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

９．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!");
});

标签

#javascript #ViewUI