事件
页面载入
1.ready(fn)
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数
$(document).ready(function(){
// 在这里写你的代码...
});
// 下面是简写
$(function($) {
// 你可以在这里继续使用$作为别名...
});
2.事件处理 on(events,fn)
在选择元素上绑定一个或多个事件的事件处理函数
// 给p标签添加点击事件监听
$("p").on("click", function(){
alert( $(this).text() );
});
// 第二种写法 等效于上面
$("p").click(function(){
alert( $(this).text() );
});
3.off(events,[fn])
在选择元素上移除一个或多个事件的事件处理函数
// 移除p标签绑定的所有事件监听
$("p").off()
// 移除p标签绑定的click事件监听
$("p").off( "click")
4.bind(events,fn)
为每个匹配元素的特定事件绑定事件处理函数
// 移除p标签绑定的所有事件监听
$("p").bind("click", function(){
alert( $(this).text() );
});
// 同时绑定多个事件类型
$('#foo').bind('mouseenter mouseleave', function() {
alert();
});
5.unbind(type,fn]])bind()
的反向操作,从每一个匹配的元素中删除绑定的事件
// 把所有段落的所有事件取消绑定
$("p").unbind()
// 将段落的click事件取消绑定
$("p").unbind( "click" )
6.one(type,[data],fn)
为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数
// 当所有段落被第一次点击的时候,显示所有其文本
$("p").one("click", function(){
alert( $(this).text() );
});
事件委派
1.delegate(selector,[type],[data],fn)
指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数
<div style="background-color:red">
<p>这是一个段落。</p>
<button>请点击这里</button>
</div>
// 当点击button时,隐藏或显示 p 元素
$("div").delegate("button", "click", function () {
$("p").slideToggle();
});
2.undelegate([selector,[type],fn])
删除由 delegate() 方法添加的一个或多个事件处理程序
// 从p元素删除由 delegate() 方法添加的所有事件处理器
$("p").undelegate();
// 从p元素删除由 delegate() 方法添加的所有click事件处理器
$("p").undelegate( "click" )
事件切换
1.hover([over,]out)
一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法
over
:鼠标移到元素上要触发的函数
out
:鼠标移出元素要触发的函数
// 鼠标悬停的表格加上特定的类
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
事件
1.blur([[data],fn])
当元素失去焦点时触发 blur 事件
// 鼠标悬停的表格加上特定的类
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
2.change([[data],fn])
当元素的值发生改变时,会发生 change 事件
// 触发被选元素的 change 事件
$(selector).change();
3.click([[data],fn])
触发每一个匹配元素的click事件
// 触发页面内所有段落的点击事件
$("p").click();
4.dblclick([[data],fn])
当双击元素时,会发生 dblclick 事件
// 给页面上每个段落的双击事件绑上 "Hello World!" 警告框
$("p").dblclick( function () { alert("Hello World!"); });
5.error([[data],fn])
当元素遇到错误(没有正确载入)时,发生 error 事件
// 在服务器端记录JavaScript错误日志:
$(window).error(function(msg, url, line){
jQuery.post("js_error_log.php", { msg: msg, url: url, line: line });
});
6.focus([[data],fn])
当元素获得焦点时,触发 focus 事件
// 当页面加载后将 id 为 'login' 的元素设置焦点:
$(document).ready(function(){
$("#login").focus();
});
7.focusin([data],fn)
当元素获得焦点时,触发 focusin 事件
<p><input type="text" /> <span>focusout fire</span></p>
<p><input type="password" /> <span>focusout fire</span></p>
// 获得焦点后会触发动画
$("p").focusin(function() {
$(this).find("span").css('display','inline').fadeOut(1000);
});
8.focusout([data],fn)
当元素失去焦点时触发 focusout 事件
// 获得焦点后会触发动画
$("p").focusout(function() {
$(this).find("span").css('display','inline').fadeOut(1000);
});
9.keydown([[data],fn])
当键盘或按钮被按下时,发生 keydown 事件
// 在页面内对键盘按键做出回应,可以使用如下代码
$(window).keydown(function(event){
switch(event.keyCode) {
// ...
// 不同的按键可以做不同的事情
// 不同的浏览器的keycode不同
// 更多详细信息: http://unixpapa.com/js/key.html
// ...
}
});
10.keypress([[data],fn])
当键盘或按钮被按下时,发生 keypress 事件
// 计算在输入域中的按键次数
$("input").keydown(function(){
$("span").text(i+=1);
});
11.keyup([[data],fn])
当按钮被松开时,发生 keyup 事件。它发生在当前获得焦点的元素上
// 当按下按键时,改变文本域的颜色
$("input").keyup(function(){
$("input").css("background-color","#D6D6FF");
});
12.mousedown([[data],fn])
当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件
// 当按下鼠标按钮时,隐藏或显示元素
$("button").mousedown(function(){
$("p").slideToggle();
});
13.mouseenter([[data],fn])
当鼠标指针穿过元素时,会发生 mouseenter 事件
// 当鼠标指针进入(穿过)元素时,改变元素的背景色
$("p").mouseenter(function(){
$("p").css("background-color","yellow");
});
14.mouseleave([[data],fn])
当鼠标指针离开元素时,会发生 mouseleave 事件
// 当鼠标指针离开元素时,改变元素的背景色$("p").mouseleave(function(){ $("p").css("background-color","#E9E9E4");});// 当鼠标指针离开元素时,改变元素的背景色
$("p").mouseleave(function(){
$("p").css("background-color","#E9E9E4");
});
15.mousemove([[data],fn])
当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件
事件坐标
event.clientX, event.clientY
相对于视口的左上角event.pageX,event.pageY
相对于页面的左上角event.offsetX,event.offsetY
相对于事件元素的左上角
// 获得鼠标指针在页面中的位置
$(document).mousemove(function(e){
$("span").text(e.pageX + ", " + e.pageY);
});
16.mouseout([[data],fn])
当鼠标指针从元素上移开时,发生 mouseout 事件
// 当鼠标从元素上移开时,改变元素的背景色:
$("p").mouseout(function(){
$("p").css("background-color","#E9E9E4");
});
17.mouseover([[data],fn])
当鼠标指针位于元素上方时,会发生 mouseover 事件
// 当鼠标指针位于元素上方时时,改变元素的背景色
$("p").mouseover(function(){
$("p").css("background-color","yellow");
});
18.mouseup([[data],fn])
当在元素上放松鼠标按钮时,会发生 mouseup 事件
// 当松开鼠标按钮时,隐藏或显示元素
$("button").mouseup(function(){
$("p").slideToggle();
});
19.resize([[data],fn])
当调整浏览器窗口的大小时,发生 resize 事件
// 改变页面窗口的大小时弹出警告窗
$(window).resize(function(){
alert("Stop it!");
});
20.scroll([[data],fn])
当用户滚动指定的元素时,会发生 scroll 事件
// 当页面滚动条变化时,执行的函数:
$(window).scroll( function() {
alert("Stop it!");
});
21.select([[data],fn])
当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件
// 触发所有input元素的select事件:
$("input").select();
22.submit([[data],fn])
当提交表单时,会发生 submit 事件
// 提交本页的第一个表单:
$("form:first").submit();
// 阻止表单提交:
$("form").submit( function () {
return false;
} );
23.unload([[data],fn])
在当用户离开页面时,会发生 unload 事件
点击某个离开页面的链接
在地址栏中键入了新的 URL
使用前进或后退按钮
关闭浏览器
重新加载页面
// 页面卸载的时候弹出一个警告框:
$(window).unload( function () { alert("Bye now!"); } );
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注三水点靠木的更多内容!
详解jQuery的核心函数和事件处理
- Author -
1900's 88 keys- Original Sources -
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@