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事件

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值