有了jQuery, 我们有了处理对象事件的一系列函数. 上面基础知识还是要懂, 但是再也不用自己去实现处理多播事件委托的函数了. 正所谓有了jQuery, 天天喝茶水. 下面是在jQuery中最常使用的bind()方法举例:
$("#testDiv4").bind("click", showMsg); 我们为id是testDiv4的元素, 添加列click事件的事件处理函数showMsg.
使用jQuery事件处理函数的好处:
1. 添加的是多播事件委托. 也就是为click事件又添加了一个方法, 不会覆盖对象的click事件原有的事件处理函数.
$("#testDiv4").bind("click", function(event) { alert("one"); });
$("#testDiv4").bind("click", function(event) { alert("two"); });
单击testDiv4对象时, 依次提示"one"和"two".
bind( type, [data], fn )
为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。
当每个段落被点击的时候,弹出其文本:
$("p").bind("click", function(){
alert( $(this).text() );
});
bind()是最常使用的函数, 注意方法签名上data参数, 可以在事件处理之前传递一些附加的数据:
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
注意event参数的使用. jQuery中统一了事件对象, 将事件对象作为事件处理函数的唯一参数传递.
data参数我们也要通过event.data 进行访问. 为何要提供data参数呢?
因为我们经常碰到这样的问题: 希望在事件处理中根据事件源的某些数据进行特殊处理.
<div id="testDiv5" customer="customer data 1">获取自定义数据-1</div>
在事件处理函数中获取数据:
$("#testDiv5").bind("click", function(event) { alert($(event.target).attr("customer")); });
attr函数是上一讲中的知识, 用于获取元素的"元素属性", 而且可以获取自定义的元素属性. 单击div后将显示:
js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素;
jQuery提供了对常用事件的封装. 比如单击事件对应的两个方法click()和click(fn)分别用来触发单击事件和设置单击事件.
设置单击事件:
$("#testDiv").click(function(event) { alert("test div clicked ! "); });
等效于: $("#testDiv").bind("click", function(event) { alert("test div clicked ! "); });
触发单击事件:
$("#testDiv").click();
等效于$("#testDiv").trigger("click");
注意这里等效的是trigger而不是triggerHandler.
此类方法在jQuery中英文叫做Event Helpers, 我找不到很好的翻译方式, 所以按照功能称其为"快捷方法", 征集好的翻译名称!
jQuery中统一了事件对象, 当绑定事件处理函数时, 会将jQuery格式化后的事件对象作为唯一参数传入:
$("#testDiv").bind("click", function(event) { });
关于event对象的详细说明, 可以参考jQuery官方文档: http://docs.jquery.com/Events/jQuery.Event
相关推荐
主要介绍了jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能),想要学习jQuery的可以了解一下。
jq语法
学习jQuery其实还是在学DOM。 (3). 极简化: jQuery是对传统DOM操作的终极简化。jQuery是对DOM的每一步操作都进行了终极的简化。但是,步骤并没有减少。 (4). 函数库: jQuery中一切都是函数,没有属性。 2. 为什么:...
该学习笔记带有很不错的DEMO,而且笔记中有比较详细的总结,对于初学者来说,可以根据笔记中的实例训练,达到理解jQuery核心——选择器的目的。
1.jQuery选择器 1.1jQuery基础选择器 原生js获取元素方式很多,很杂,而且兼容性情况不一致,因此jQuery给我们做了封装,使获取元素统一标准。 $(‘选择器’) //里面选择器直接写css选择器即可,但是要加引号 原创...
ExtJS4学习笔记(七)---带搜索的Grid(SearchGrid) ExtJS4学习笔记(三)---VBox的使用 ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(二)---HBox的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4...
其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery是...
之间的,那就说起了 [removed]——这不是一个好东西,所以就有了Jquery颇具创意的 代码如下: $(document).ready(funciton(){ … }); 当然还会更精简: 代码如下: $(function(){ … }); 所以我的第一个Jquery脚本就是...
13.1.5 事件处理 436 13.2 文档打开、存储与编辑 442 13.2.1 操作打开文档 442 13.2.2 制作存储、关闭文档 445 13.2.3 文字区编辑、剪切、复制、粘贴 448 13.3 重点复习 449 13.4 课后练习 451 ...
jQuery学习笔记: jQuery学习 1、基本语法: $(selector).action() $:定义jQuery selector:选择符,查询和查找HTML元素 action():对元素执行的操作 实例: $(this).hide()——隐藏当前元素 $(“p”),hide()——-隐藏...
在浏览导航栏添加所需按钮 <!...<...link rel="stylesheet" type="text/css" href="css/jquery-ui.theme.min.css" /> <link rel="stylesheet" type="text/css" href="css/ui.jqgrid-boot
人都是比较善忘的动物,所以,我需要对这些整理做一点记录,就权当学习笔记吧。 这次的整理是从jQuery开始的,所以笔记的名称就叫《从jQuery看JavaScript》吧。在研读jQuery源码的过程中,我可能遇到各式各样...
-----------以下为学习笔记---------------- 前端学习笔记 HTML & CSS Html 是页面大部分内容 css为页面的样式及格式 B/S 软件结构 C/S Client Server B/S Browser Server 客户端<——>服务器端 javaEE 项目 ...
本资源免费下载供大家阅读使用,全程知识点,使用思维导图的方式对知识进行梳理,包含各技术名词的概念及代码,内容清晰有序,适合初学者学习使用——每日一个 ,亦可以作为开发老鸟回顾知识的笔记。选择下载该内容...
亚信java笔试题 keep-learning 收集跟前端有关的学习资讯 ...前端工程师必备的PS技能——切图篇 结合个人经历总结的前端入门方法 工具类 工具类 地址 前端人的俱乐部 真可以解放你的收藏夹 如何优雅
微注:在继续学习 & 积累,并率先于持续更新。 综合类 综合类 地址 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v2.2 免费的编程中文书籍索引 前端书籍 前端...
前端工程师必备的PS技能——切图篇 结合个人经历总结的前端入门方法 效果类 地址 弹出层 焦点图轮播特效 工具类 地址 css sprite 雪碧图制作 版本控制入门 – 搬进 Github Grunt-beginner前端自动化工具
java版五子棋源码 ...前端工程师必备的PS技能——切图篇 结合个人经历总结的前端入门方法 效果类 地址 弹出层 焦点图轮播特效 工具类 地址 css sprite 雪碧图制作 版本控制入门 – 搬进 Github Grunt-beginne