jQuery常用事件方法详解
jQuery事件
ready(fn)|$(function(){})
\((document).ready(function(){})可以简写成\)(function(){});
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。
有一个参数－－对jQuery函数的引用－－会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字，并因此可以不再担心命名冲突而放心地使用$别名。
- 请确保在 <body> 元素的onload事件中没有注册函数，否则不会触发+$(document).ready()事件。
- 可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。
jQuery.on()
on()函数用于为指定元素的一个或多个事件绑定事件处理函数。
此外，你还可以额外传递给事件处理函数一些所需的数据。
从jQuery 1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()、 live()等事件函数。
on()支持直接在目标元素上绑定事件，也支持在目标元素的祖辈元素上委托绑定。在事件委托绑定模式下，即使是执行on()函数之后新添加的元素，只要它符合条件，绑定的事件处理函数也对其有效。
- 该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。
- 要删除通过on()绑定的事件，请使用off()函数。如果要附加一个事件，只执行一次，然后删除自己，请使用one()函数。
- 该函数属于jQuery对象(实例)。
语法
用法一：
jQueryObject.on( events [, selector ] [, data ], handler )
用法二：jQueryObject.on( eventsMap [, selector ] [, data ] )
参数
| 参数 | 描述 |
|---|---|
| events | String类型一个或多个用空格分隔的事件类型和可选的命名空间，例如"click"、"focus click"、"keydown.myPlugin"。 |
| eventsMap | Object类型一个Object对象，其每个属性对应事件类型和可选的命名空间(参数events)，属性值对应绑定的事件处理函数(参数handler)。 |
| selector | 可选/String类型一个jQuery选择器，用于指定哪些后代元素可以触发绑定的事件。如果该参数为null或被省略，则表示当前元素自身绑定事件(实际触发者也可能是后代元素，只要事件流能到达当前元素即可)。 |
| data | 可选/任意类型触发事件时，需要通过event.data传递给事件处理函数的任意数据。 |
| handler Function类型指定的事件处理函数。 |
关于参数events中可选的命名空间，请参考最下面的示例代码。
关于参数selector，你可以简单地理解为：如果该参数等于null或被省略，则为当前匹配元素绑定事件；否则就是为当前匹配元素的后代元素中符合selector选择器的元素绑定事件。
参数handler中的this指向当前匹配元素的后代元素中触发该事件的DOM元素。如果参数selector等于null或被省略，则this指向当前匹配元素(也就是该元素)。
on()还会为handler传入一个参数：表示当前事件的Event对象。
参数handler的返回值与DOM原生事件的处理函数返回值作用一致。例如"submit"(表单提交)事件的事件处理函数返回false，可以阻止表单的提交。
如果事件处理函数handler仅仅只为返回false值，可以直接将handler设为false。
返回值
on()函数的返回值为jQuery类型，返回当前jQuery对象本身。
如果传递了selector参数，那么on()函数并不是为当前jQuery对象匹配的元素绑定事件处理函数，而是为它们的后代元素中符合选择器selector参数的元素绑定事件处理函数。on()函数并不是直接为这些后代元素挨个绑定事件，而是委托给当前jQuery对象的匹配元素来处理。由于DOM 2级的事件流机制，当后代元素selector触发事件时，该事件会在事件冒泡中传递给其所有的祖辈元素，当事件流传递到当前匹配元素时，jQuery会判断是哪个后代元素触发了事件，如果该元素符合选择器selector，jQuery就会捕获该事件，从而执行绑定的事件处理函数。
通俗易懂地说，如果我们希望给页面上所有的
标签绑定click事件处理函数，我们可以在每个P标签上直接分别绑定click事件处理函数。例如：
// 为所有P元素分别绑定click事件处理函数handler
$("p").on("click", handler);
我们也可以在这些P标签的任意一个公共祖辈元素上绑定事件委托机制，利用DOM的事件冒泡机制来统一委托处理。当我们触发了某个元素的click事件，JS会依次通知该元素及其"父辈"元素、"爷爷辈"元素……直到最顶部的document对象为止，如果这些元素上绑定了click事件处理函数就会依次执行。
// 在body元素上绑定click事件处理函数handler，如果这个click事件是由其后代的P元素触发的，就执行handler
$(document.body).on("click", "p", handler);
在这里的示例中，事件委托机制就是，我们不为每个P元素直接绑定click事件处理函数，而是委托给其某个公共的祖辈元素(此处示例中为document.body)，"告诉"他：如果接收到了click事件触发通知，并且这个click事件是由我们这些P元素其中之一触发的，就执行祖辈元素上委托绑定的事件处理函数。
注意："focus"、"blur"等部分事件不支持冒泡，使用事件委托机制将无效。不过，他们一般也有对应的支持冒泡的事件。例如与"focus"对应的"focusin"，与"blur"对应的"focusout"。此外，我们也可以使用event.stopPropagation()方法，让当前触发的事件停止冒泡。
jQuery.click
click([[data],fn]):触发每一个匹配元素的click事件。这个函数会调用执行绑定到click事件的所有函数。
| 参数 | 类型 | 描述 |
|---|---|---|
| fn | Function | 在每一个匹配元素的click事件中绑定的处理函数。 |
| [data],fn | String,Function | data:click([Data], fn) 可传入data供函数fn处理。 fn:在每一个匹配元素的click事件中绑定的处理函数。 |
//触发页面内所有段落的点击事件
$("p").click();
//将页面内所有段落点击后隐藏。
jQuery 代码:
$("p").click( function () { $(this).hide(); });
jQuery.data()
data()函数用于在当前jQuery对象所匹配的所有元素上存取数据。
通过data()函数存取的数据都是临时数据，一旦页面刷新，之前存放的数据都将不复存在。
该函数属于jQuery对象(实例)。如果需要移除通过data()函数存放的数据，请使用removeData()函数。
语法
- jQueryObject.data( [ key [, value ] ])
以指定的键名key存取数据。如果指定了value参数，则表示以键名key存放值为value的数据；如果没有指定value参数，则表示读取之前以键名key存放的数据；如果没有指定任何参数，则以对象形式返回之前存储的所有数据。
- jQueryObject.data( object )
以对象形式同时传入任意多个key-value形式的数据，对象的每个属性就是键名key，属性值就是value。
注意：data()函数的所有"存储数据"操作针对当前jQuery对象所匹配的每一个元素；所有"读取数据"操作只针对第一个匹配的元素。
| 参数 | 描述 |
|---|---|
| key | 可选/String类型指定的键名字符串。 |
| value | 可选/任意类型需要存储的任意类型的数据。 |
| object | Object类型指定的对象，用于封装多个键值对，同时存储多项数据。 |
返回值
data()函数的返回值是任意类型，返回值的类型取决于当前data()函数执行的是"存储数据"操作还是"读取数据"操作。
如果data()函数执行的是"存储数据"操作，则返回当前jQuery对象本身；如果是"读取数据"操作，则返回读取到的数据。
如果当前jQuery对象匹配多个元素，读取数据时，data()函数只以其中第一个匹配的元素为准。
如果执行data(key)函数(仅传入一个参数key)时找不到相应的数据，则返回undefined。如果执行data()函数(不带任何参数)时找不到相应的数据，则返回一个空的对象(没有任何属性)。
jQuery.submit()
submit([[data],fn])：当提交表单时，会发生 submit 事件。该事件只适用于表单元素。
参数
| 参数 | 类型 | 描述 |
|---|---|---|
| fn | Function | 在每一个匹配元素的submit事件中绑定的处理函数。 |
| [data],fn | String,Function | data:submit([Data], fn) 可传入data供函数fn处理。 fn:在每一个匹配元素的submit事件中绑定的处理函数。 |
//提交本页的第一个表单:
$("form:first").submit();
如果你要阻止表单提交:
jQuery 代码:
$("form").submit( function () {
return false;
} );
jQuery常用事件方法详解的更多相关文章
- Delphi中TStringList类常用属性方法详解
TStrings是一个抽象类,在实际开发中,是除了基本类型外,应用得最多的. 常规的用法大家都知道,现在来讨论它的一些高级的用法. 先把要讨论的几个属性列出来: 1.CommaText 2.Delim ...
- jQuery插件制作方法详解
jQuery插件制作方法详解 jquery插件给我的感觉清一色的清洁,简单.如Jtip,要使用它的功能,只需要在你的元素的class上加 上Jtip,并引入jtip.js及其样式即可以了. ...
- jQuery中 $.ajax()方法详解
$.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Strin ...
- jQuery - Ajax ajax方法详解
$.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Strin ...
- jquery之 animate()方法详解
jQuery.animate() 函数详解 animate()函数用于执行一个基于css属性的自定义动画. 你可以为匹配的元素设置css样式,animate()函数将会执行一个从当前样式到指定的css ...
- jquery的事件命名空间详解
jquery现在的事件API:on,off,trigger支持带命名空间的事件,当事件有了命名空间,就可以有效地管理同一事件的不同监听器,在定义组件的时候,能够避免同一元素应用到不同组件时,同一事件类 ...
- jQuery ajax - ajax() 方法详解
一些代码通过jQuery来做ajax异步提交. //验证昵称是否存在 function checkNickNameIsExist(){ var nickName = jQuery("#nic ...
- jQuery之$.ajax()方法详解及实例
1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...
- jquery之clone()方法详解
clone()函数用于克隆当前匹配元素集合的一个副本,并以jQuery对象的形式返回.你也可以简单地理解为:克隆当前jQuery对象. 你还可以指定是否复制这些匹配元素(甚至它们的子元素)的附加数据( ...
随机推荐
- 网络流24题之星际转移问题（洛谷P2754）
洛谷 P2754 题目背景 none! 题目描述 由于人类对自然资源的消耗,人们意识到大约在 2300 年之后,地球就不能再居住了.于是在月球上建立了新的绿地,以便在需要时移民.令人意想不到的是,21 ...
- DelayQueue实现Java延时任务
最近公司需要实现一个订单超时自动关闭的功能,由Java这块来实现 一开始我以为就是定时任务,深入了解了之后发现并不是,官方名称应该叫延时任务,到时间之后 执行传过来的回调函数 这个功能我一共前前后后写 ...
- Ubuntu上搭建比特币运行环境
Ubuntu版本:16.04.3 Bitcoin Core版本:0.16 1. 比特币运行依赖的开源库 (1)必须依赖的库 库 目的 描述 libssl 加密 随机数生成,椭圆曲线加密算法 libbo ...
- 《Java程序设计》第7周学习总结 20165218 2017-2018-1
20165218 2017-2018-1 <Java程序设计>第7周学习总结 教材学习内容总结 JDBC与MySQL数据库 数据库的功能:数据的存储.查询.修改.安全 MySQL:数据库: ...
- 64位win10系统无法安装.Net framework3.5的两种解决方法【转】
近日有网友反映在windows10_64位系统电脑上安装Net framework3.5,操作时总失败,怎么办呢?小编下面就介绍win10 64位系统无法安装Net framework3.5的两种解决 ...
- [bzoj3238]差异（后缀数组+单调栈）
显然我们可以先把len(Ti)+len(Tj)的值先算出来,再把LCP减去.所有len(Ti)+len(Tj)的值为n*(n-1)*(n+1)/2,这个随便在纸上画一画就可以算出来的. 接下来问题就是 ...
- 【loj6198】谢特
Portal -->loj6198 Solution (为什么感觉loj上面这几道后缀数组的题..套路都是一样的啊qwq) 同样也是..考虑某个区间\(height[i]\)的最小值的贡 ...
- Codeforces Round #427 (Div. 2) D dp
D. Palindromic characteristics time limit per test 3 seconds memory limit per test 256 megabytes inp ...
- python 字符串前缀u, r, b小结
http://note.youdao.com/noteshare?id=a0da9c2d044d270fa8cb162b932c47e8
- 怎么查看ubuntu是32bit还是64bit的？
怎么查看ubuntu是32bit还是64bit的?你用uname -a的时候看到的i686就是32bit的----