jQuery 事件方法
事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件。
触发实例:
$("button#demo").click()
上面的例子将触发 id="demo" 的 button 元素的 click 事件。
绑定实例:
$("button#demo").click(function(){$("img").hide()})
上面的例子会在点击 id="demo" 的按钮时隐藏所有图像。
方法 | 描述 |
---|---|
bind() | 向匹配元素附加一个或更多事件处理器 |
blur() | 触发、或将函数绑定到指定元素的 blur 事件 |
change() | 触发、或将函数绑定到指定元素的 change 事件 |
click() | 触发、或将函数绑定到指定元素的 click 事件 |
dblclick() | 触发、或将函数绑定到指定元素的 double click 事件 |
delegate() | 向匹配元素的当前或未来的子元素附加一个或多个事件处理器 |
die() | 移除所有通过 live() 函数添加的事件处理程序。 |
error() | 触发、或将函数绑定到指定元素的 error 事件 |
event.isDefaultPrevented() | 返回 event 对象上是否调用了 event.preventDefault()。 |
event.pageX | 相对于文档左边缘的鼠标位置。 |
event.pageY | 相对于文档上边缘的鼠标位置。 |
event.preventDefault() | 阻止事件的默认动作。 |
event.result | 包含由被指定事件触发的事件处理器返回的最后一个值。 |
event.target | 触发该事件的 DOM 元素。 |
event.timeStamp | 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。 |
event.type | 描述事件的类型。 |
event.which | 指示按了哪个键或按钮。 |
focus() | 触发、或将函数绑定到指定元素的 focus 事件 |
keydown() | 触发、或将函数绑定到指定元素的 key down 事件 |
keypress() | 触发、或将函数绑定到指定元素的 key press 事件 |
keyup() | 触发、或将函数绑定到指定元素的 key up 事件 |
live() | 为当前或未来的匹配元素添加一个或多个事件处理器 |
load() | 触发、或将函数绑定到指定元素的 load 事件 |
mousedown() | 触发、或将函数绑定到指定元素的 mouse down 事件 |
mouseenter() | 触发、或将函数绑定到指定元素的 mouse enter 事件 |
mouseleave() | 触发、或将函数绑定到指定元素的 mouse leave 事件 |
mousemove() | 触发、或将函数绑定到指定元素的 mouse move 事件 |
mouseout() | 触发、或将函数绑定到指定元素的 mouse out 事件 |
mouseover() | 触发、或将函数绑定到指定元素的 mouse over 事件 |
mouseup() | 触发、或将函数绑定到指定元素的 mouse up 事件 |
one() | 向匹配元素添加事件处理器。每个元素只能触发一次该处理器。 |
ready() | 文档就绪事件(当 HTML 文档就绪可用时) |
resize() | 触发、或将函数绑定到指定元素的 resize 事件 |
scroll() | 触发、或将函数绑定到指定元素的 scroll 事件 |
select() | 触发、或将函数绑定到指定元素的 select 事件 |
submit() | 触发、或将函数绑定到指定元素的 submit 事件 |
toggle() | 绑定两个或多个事件处理器函数,当发生轮流的 click 事件时执行。 |
trigger() | 所有匹配元素的指定事件 |
triggerHandler() | 第一个被匹配元素的指定事件 |
unbind() | 从匹配元素移除一个被添加的事件处理器 |
undelegate() | 从匹配元素移除一个被添加的事件处理器,现在或将来 |
unload() | 触发、或将函数绑定到指定元素的 unload 事件 |
参阅
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").one("click",function(){
$(this).animate({fontSize:"+=6px"});
});
$("button#sub").click(function(){
alert("帐号:"+$(":input#zh").val()+"密码:"+$(":input#mm").val());
});
$("p").mouseover(function(){
$("p").css("background-color","yellow");
});
$("p").mouseout(function(){
$("p").css("background-color","#E9E9E4");
});
$(":input").select(function(){
$(":input").after("输入的内容不能为空!");
});
$("button#chage").click(function(){
alert("error");
$("button").toggle(function(){
$("body").css("background-color","green");},
function(){
$("body").css("background-color","red");},
function(){
$("body").css("background-color","yellow");}
);
});
});
</script>
<p>这是一个无人知道的秘密</p>
<form name="input" action="" method="get">帐号:
<input id="zh" type="text" value="" size=20></input><br />密码:
<input id="mm" type="text" value="" size=20></input><br />
<button id="sub" value="submit">确定</button>
</form>
<button id="chage">改变背景颜色</button>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").one("click",function(){
$(this).animate({fontSize:"+=6px"});
});
$("button#sub").click(function(){
alert("帐号:"+$(":input#zh").val()+"密码:"+$(":input#mm").val());
});
$("p").mouseover(function(){
$("p").css("background-color","yellow");
});
$("p").mouseout(function(){
$("p").css("background-color","#E9E9E4");
});
$(":input").select(function(){
$(":input").after("输入的内容不能为空!");
});
$("button#chage").click(function(){
alert("error");
$("button").toggle(function(){
$("body").css("background-color","green");},
function(){
$("body").css("background-color","red");},
function(){
$("body").css("background-color","yellow");}
);
});
});
</script>
<p>这是一个无人知道的秘密</p>
<form name="input" action="" method="get">帐号:
<input id="zh" type="text" value="" size=20></input><br />密码:
<input id="mm" type="text" value="" size=20></input><br />
<button id="sub" value="submit">确定</button>
</form>
<button id="chage">改变背景颜色</button>
</body>
</html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("img").error(function(){
$("img").replaceWith("<p><b>图片未加载!</b></p>");
});
$("button").click(function(){
$("img").error();
});
$(document).mousemove(function(e){
$("span").text( "x:"+e.pageX+" y:"+e.pageY);
});
$("button").bind("click",function(){
$("p:first").hide();
});
$("button").dblclick(function(){
$("p").slideToggle();
});
$("input").keydown(function(e){
$("div").html("Key:" +e.which);
});
//$(document).keypress(function(){
// $("span").text(i+=1);
//});
});
</script>
</head>
<body>
<img src="gg.jpg" />
<p>如果上面的图像没有正确地加载,会被替换为一段 "图片未加载" 的文本。</p>
<button>触发图像的 error 事件</button>
<p>指针位于:<span></span></p>
请随意键入一些字符:<input type="text" />
<p>当您在上面的框中键入文本时,下面的 div 会显示键位序号。</p>
<div />
<p>按键次数:<span>0</span></p>
</body>
</html>