jQuery 入门教程(四): Events

学习了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");
});

时间: 2024-12-09 03:01:34

jQuery 入门教程(四): Events的相关文章

BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)

上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert),进度条(progress bar)等,能够很好减少前端工程师的代码量,实现更加丰富充实的页面. Bootstrap作为一套良好的前端工具,要实现现代的动态页面效果,javascript插件是必不可少的.它提供了12个基于JQuery类库的插件,包括模态窗口(Modals),滚动监控(Scrolls

jQuery 入门教程(一): 概述

jQuery是一套跨浏览器的JavaScript函式库,简化HTML与JavaScript之间的操作,下面为摘自Wikepedia上的jQuery说明: jQuery 是开源软件,使用MIT许可证授权.[4] jQuery的语法设计使得许多操作变得容易,如操作文档对象(document).选择DOM元素.创建动画效果.处理事件.以及开发Ajax程序.jQuery 也提供了给开发人员在其上创建插件的能力.这使开发人员可以对底层交互与动画.高级效果和高级主题化的组件进行抽象化.模块化的方式使 jQu

BootStrap入门教程 (四)

上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert),进度条(progress bar)等,能够很好减少前端工程师的代码量,实现更加丰富充实的页面. Bootstrap作为一套良好的前端工具,要实现现代的动态页面效果,javascript插件是必不可少的.它提供了12个基于JQuery类库的插件,包括模态窗口(Modals),滚动监控(Scrolls

jQuery 入门教程(二): 基本语法

学习jQuery之前需要你有下面几个方面的基本知识 HTML CSS JavaScript jQuery 的基本语法 $(selector).action() $ 符合定义这是一个jQuery语句 (selector) 用来选择某个HTML元素,其语法和CSS的selector语法一样. action() 定义操作该HTML元素的方法. 比如: $(this).hide() – 隐藏当前元素. $("p").hide() – 隐藏所以 <p> 元素. $(".te

jQuery 入门教程(三): Selectors

jQuery Selector 是jQuery库中非常重要的一个组成部分. jQuery Selector 用来选择某个HTML元素,其基本语句和CSS的选择器(Selector)是一样的,所有jQuery selector 都是以$()开始. 选择HTML标记 选择某个HTML元素的方法是直接使用该元素的标记名称,比如选择所有<p>元素 $("p") 下面的例子当用户点击一个按钮时,隐藏所有的<p>元素 $(document).ready(function()

Git的入门教程&lt;四&gt;

Git 的入门教程<四> 5> git分支的管理 git默认的有一个主分支叫做master,随着每次的提交,master主分支会形成一条线,而HEAD是指向当前的主分支master的,一般来说,我们将master分支作为向外发布的主分支,而开发的时候会新建一个分支或者好多分支,作为开发分支,等到开发分支完成,在一次性的想master主分支上合并,并进行发布. 5.1 git 分支的创建.删除.切换 git branch dev //创建分支 git checkout dev //切换分支

无废话ExtJs 入门教程四[表单:FormPanel]

无废话ExtJs 入门教程四[表单:FormPanel] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在窗体里加了个表单.如下所示代码区的第28行位置,items:form. 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&

RabbitMQ入门教程(四):工作队列(Work Queues)

原文:RabbitMQ入门教程(四):工作队列(Work Queues) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/vbirdbest/article/details/78596426 分享一个朋友的人工智能教程.比较通俗易懂,风趣幽默,感兴趣的朋友可以去看看. 工作队列 使用工作队列实现任务分发的功能,一个队列的优点就是很容易处理并行化的工作能力,但是如果我们积累了大量的工作,我们

Elasticsearch入门教程(四):Elasticsearch文档CURD

原文:Elasticsearch入门教程(四):Elasticsearch文档CURD 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/vbirdbest/article/details/79217590 一: 新增文档POST /{index}/{type} 或 PUT /{index}/{type}/{id} 注意:新增文档时可以显式指定id,id可以是数字也可以是字符串,如果不显示指