学习了jQuery的选择器,就可以针对选择的HMTL标记或是元素添加事件处理,事件包括按键,鼠标,单击按钮等。
下面为常见的DOM事件:
鼠标事件 |
键盘事件 |
表单事件 |
文档/窗口事件 |
click |
keypress |
submit |
load |
dblclick |
keydown |
change |
resize |
mouseenter |
keyup |
focus |
scroll |
mouseleave |
|
blur |
unload |
jQuery事件处理的语法
在jQuery中,大部分的DOM事件都有对应的jQuery事件,比如为所有<p>标记添加单击事件处理:
$("p").click();
下一步添加单击事件的处理函数,你必须传一个回调函数给单击事件:
$("p").click(function(){
// action goes here!!
});
常见的jQuery事件
$(document).ready()
文档准备好事件,在文档完全载入后执行。
click()
用户单击某个HTML元素后调用,比如下面的例子中用户点击<p>标记部分后隐藏该标记的内容:
$("p").click(function(){
$(this).hide();
});
dblclick()
双击某个HTML标记时调用,比如下面代码在双击<p>元素时隐藏其内容:
$("p").dblclick(function(){
$(this).hide();
});
mouseenter()
在鼠标进入某个HTML元素时触发,例如:
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
mouseleave()
在鼠标进入离开某个HTML元素时触发,例如:
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
mousedown()
在按下鼠标左键时触发,例如:
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
mouseup()
在某个元素上释放鼠标左键时触发,例如:
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
hover()
在鼠标指针放在某个元素之上时触发,为mouseenter和mouseleave的组合,它的第一个回调函数中鼠标进入时调用,第二个回调函数在鼠标离开时执行,例如:
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
focus()
当某个表单输入域获得焦点时调用,例如:
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
blur()
当某个表单输入域失去焦点时调用,例如:
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
分享到:
相关推荐
Chapter 4: DOM Manipulation with jQuery 43 Chapter 5: An Introduction to Events59 Chapter 6: More Events 71 Chapter 7: Animation 83 Chapter 8: Ajax with jQuery 103 Chapter 9: Writing a jQuery ...
Query经典入门教程Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery使用户能更方便...
PPT课件,从入门到深入,讲述jQuery的各种便捷用法,提高我们的开发效率。 jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。 ...
使用jQuery能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。...
教程名称: 【动力节点】jquery高清视频教程_Java 小白入门到精通jQuery是优秀的Javascript框架,能使用户更方便地处理HTML Documents、events、实现动画效果,并且方便地为网站提供Ajax交互。本套Java视频...
jQuery是优秀的JavaScript框架,能使用户更方便地处理HTML Documents、events、实现动画效果,并且方便地为网站提供Ajax交互。本视频教程循序渐进地对jQuery的各种选择器、函数和方法调用进行了详细的讲解,更结合了...
jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。
开发周期短,上手快,入门低,但是进阶难一般常用的jquery特效 jquery焦点图 jquery选项卡 jquery滚动条 jquery下拉广告,jquery图片延时加载等,jquery代码,放大镜特效,jquery广告代码,jquery导航,jquery在线客服...
jQuery是继prototype之后又一个优秀的Javascrīpt框架。...jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。
我们已经预装了您入门所需的所有工具。 您可以安全地删除此README.md文件,或为您自己的项目进行更改。 不过,请至少阅读一次! 它包含有关Gitpod和我们使用的扩展的一些重要信息。 Gitpod提醒 要在Gitpod中运行...
开发周期短,上手快,入门低,但是进阶难一般常用的jquery特效 jquery焦点图 jquery选项卡 jquery滚动条 jquery下拉广告,jquery图片延时加载等,jquery代码,放大镜特效,jquery广告代码,jquery导航,jquery在线客服...
开发周期短,上手快,入门低,但是进阶难一般常用的jquery特效 jquery焦点图 jquery选项卡 jquery滚动条 jquery下拉广告,jquery图片延时加载等,jquery代码,放大镜特效,jquery广告代码,jquery导航,jquery在线客服...
我们已经预装了您入门所需的所有工具。 您可以安全地删除此README.md文件,或为您自己的项目进行更改。 不过,请至少阅读一次! 它包含有关Gitpod和我们使用的扩展的一些重要信息。Gitpod提醒要在Gitpod中运行前端...
我们已经预装了您入门所需的所有工具。 您可以安全地删除此README.md文件,或为您自己的项目进行更改。 不过,请至少阅读一次! 它包含有关Gitpod和我们使用的扩展的一些重要信息。Gitpod提醒要在Gitpod中运行前端...
我们已经预装了您入门所需的所有工具。您可以安全地删除此README.md文件,或为您自己的项目进行更改。不过,请至少阅读一次!它包含有关Gitpod和我们使用的扩展的一些重要信息。 Gitpod提醒要在Gitpod中运行前端(仅...
入门 下载或。 在您的网页中: < script src =" jquery.js " > </ script > < script src =" dist/dom-outliner.min.js " > </ script > < script > jQuery ( function ( $ ) { $...
jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。...
Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+...jQuery使用户能更方便地处理HTML documents、events、实..
开发周期短,上手快,入门低,但是进阶难一般常用的jquery特效 jquery焦点图 jquery选项卡 jquery滚动条 jquery下拉广告,jquery图片延时加载等,jquery代码,放大镜特效,jquery广告代码,jquery导航,jquery在线客服...
in action系列的又一经典,介绍JQuery框架的入门和提升。 JQuery: jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的Jörn Zaefferer,罗马尼亚的Stefan...