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

相关推荐