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