jquery事件方法(1)

1 .bind()

为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数

$("button").bind("click",function(){
  $("p").slideToggle();
});//运行结果为当点击<button>按钮时,隐藏<p>元素,再点击时,出现<p>元素

 替代语法:

$(selector).bind({event:function, event:function, ...})

 2.blur()

当元素失去焦点时发生 blur 事件。

$("input").blur(function(){
  $("input").css("background-color","#D6D6FF");
});//点击<input>,又点击之外区域,则失去焦点,改变颜色

 3.change()

当元素的值发生改变时,会发生 change 事件

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".field").change(function(){
    $(this).css("background-color","#FFFFCC");
  });
});
</script>
</head>
<body>
<p>在某个域被使用或改变时,它会改变颜色。</p>
Enter your name: <input class="field" type="text" />
<p>Car:
<select class="field" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</p>
</body>
</html>//当下拉框的选项发生变化时,<input>改变颜色

 4.click()点击事件.

5.dbclick(),双击触发事件

6.delegate()

 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

$("div").delegate("button","click",function(){
  $("p").slideToggle();
});

 为<button>添加了一个click事件,点击<p>隐藏或消失,再新建<button>也会存在绑定的click事件

7.live()

为当前或未来的匹配元素添加一个或多个事件处理器

$("button").live("click",function(){
  $("p").slideToggle();
});//像<button>元素添加了个点击事件,复制后或新建的<button>仍存在点击事件

 8.die()

移除所有通过 live() 函数添加的事件处理程序。

$("p").die();

 9.error()

当元素遇到错误(没有正确载入)时,发生 error 事件

$("img").error(function(){
  $("img").replaceWith("
Missing image!
");
});//图片未加载,显示MIssing image

 10.focus()

当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。当元素获得焦点时,发生 focus 事件。

$("input").focus(function(){
  $("input").css("background-color","#FFFFCC");
});

 11.keydown()

当按下按键时,发生绑定事件

$("input").keydown(function(){
  $("span").text(i+=1);
});//在<inputs>中输入一个字符就会触发一次.keydown事件 

12.keypree()

keypress 事件与 keydown 事件类似。当按钮被按下时,会发生该事件。它发生在当前获得焦点的元素上。

不过,与 keydown 事件不同,每插入一个字符,就会发生 keypress 事件。

$("input").keydown(function(){
  $("span").text(i+=1);
});//在<inputs>中输入完成一次并按下回车后会执行一次keydown事件

猜你喜欢

转载自18633917479.iteye.com/blog/2369744