jquery事件

Jquery中的bind(),live(),delegate(),on()绑定事件方法的用法

由 社会主义新天地 提交于 2020-01-11 00:07:44
项目中经常会有利用jquery操作dom元素的增删操作，所以会涉及到dom元素的绑定事件方式，简单的归纳一下bind,live,delegate,on的区别，以便以后查阅，文中如有不当之处，望各位指正。 bind() 简要描述 　　 bind() 向匹配元素添加一个或多个事件处理器。 使用方式 　　 $(selector).bind(event,data,function) 　　event ： 必需项；添加到元素的一个或多个事件，例如 click,dblclick等； 　　　　　　　　　　单事件处理：例如 $(selector).bind("click",data,function); 　　　　　　　　　　多事件处理：1.利用空格分隔多事件，例如 $(selector).bind("click dbclick mouseout",data,function); 　　　　　　　　　　　　　　　　2.利用大括号灵活定义多事件，例如 $(selector).bind({event1:function, event2:function, ...}) 　 　　　　　　　　　　　　　　　　3.空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况； 　　　　　　　　　　　　　　　　　大括号替代方式：绑定较为灵活，可以给事件单独绑定函数；　　　 　　data ：

学习jquery

由 旧城冷巷雨未停 提交于 2020-01-10 14:49:44
jQuery简介 jQuery是一个优秀的JavaScript代码库。倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式， 优化HTML文档操作、事件处理与交互。 jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口； 具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。 1.什么是jQuery。 a.jQuery其实是封装了很多方法的js库。 b. 我们学习jQuery就是学习这些方法如何使用。 2.为什么要使用jquery. a.原生js的入口函数只能有一个如果写多个后面的入口函数将会把前面的给覆盖。 - -jQuery可以写多个入口函数且不覆盖。 b.原生js的api名称都太长太难记。 --jQuery的api名称容易记忆。 c.原生js中的属性和方法，浏览器兼容问题。 --jQuery刚好解决了这个问题。 d.原生js如果前面的代码出现了报错后面的代码就不能执行。 --jQuery就算前面的代码出现报错后面的代码正常运行。 3.如何使用jquery。 a.首先引入jQuery文件。 b.写一个入口函数(防止页面标签没加载出来jQuery代码就执行)。 c.找到你要操作的元素(jquery选择器)，去操作它(添加属性，设置样式等)。 4

jQuery事件绑定on()、bind()与delegate() 方法详解

由 此生再无相见时 提交于 2020-01-09 18:50:58
jquery中有四种事件绑定函数，bind()，live()，on()，delegate(),由于live现在并不常用，因此不做过多解释。 1. bind()用法 $("div p").bind("click",function(){ alert("点击"); });同：$("div p").click(function(){ alert("点击");}); 这里为div绑定了click事件，相应为弹出内容，绑定简单快捷，但是存在两个问题：1；用了隐式迭代方法，如果匹配的元素特别多，例如div中有多个p标签，方法就绑定多次，影响性能。2；对于尚未存在的元素无法绑定，点击页面上的按钮，将动态添加一个p元素，点击这个p元素会发现动作没有响应。 用delegate方法可以解决以上问题。2.delegate()用法 $("div").delegate("p", "click", function () { alert($(this).text()); }); 这种方式采用了事件委托概念，不直接为p元素绑定事件而是为其父元素（或者祖先元素也可）绑定事件，当在div内点击任意元素时，事件一层层根据event target向上冒泡，直到到达绑定事件的元素，在冒泡过程中，如果事件的currentTarget与选择器匹配，就会执行代码。 这样就解决了bind（）的问题，不用再一个个为p元素绑定事件

jQuery Validation Engine 表单验证

由 大兔子大兔子 提交于 2020-01-09 09:29:32
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 中文汉化版，官方只有英文的。同时根据中国国情修改了部分验证规则。 这个插件支持大部分的浏览器，但由于有使用到了css3的阴影和圆角样式，所以在IE浏览器下无法看到圆角和阴影效果（万恶的IE）。 官方下载地址： http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/ 普通验证的例子： http://www.position-relative.net/creation/formValidator/ ajax验证的例子： http://www.position-relative.net/creation/formValidator/demoSubmit.html 一：简单说明下使用教程： 引入jquery和插件js、css <link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" /> <script src="js/jquery.js" type="text/javascript"></script> <script

jQuery事件绑定on()、bind()与delegate() 方法详解

由 爷，独闯天下 提交于 2020-01-09 08:34:50
文章转载： http://www.jb51.net/article/67166.htm 啃了一段日子的js相关了，学的过程中发现在jQuery中绑定事件时，有人用bind()，有人用on()，有人用delegate()，还有人用live()，看代码的时候觉得都实现功能了也就掀过去了，只是一直没完全弄懂之间的区别，于是今天查了下资料，自己做个总结。 之所以有这么多类型的绑定方法，是因为jQuery的版本更新的原因，如on()方法就是1.7以后出现的。 jQuery的事件绑定api页面上，提到live()方法已经过时，不建议使用。所以这里我们主要就看下以下三个方法：bind()、delegate()、on() 我们准备一个html页面，用于各种类型事件绑定的测试。 <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> </head> <body> <div> <button id="btn">添加新的p元素</button> <p>第一个p元素</p> <p>第二个p元素</p> <p>第三个p元素</p> <p>第四个p元素</p> <p>第五个p元素</p> <

jQuery事件绑定on()、bind()与delegate() 方法详解

由 余生颓废 提交于 2020-01-09 04:08:56
文章转载： http://www.jb51.net/article/67166.htm 啃了一段日子的js相关了，学的过程中发现在jQuery中绑定事件时，有人用bind()，有人用on()，有人用delegate()，还有人用live()，看代码的时候觉得都实现功能了也就掀过去了，只是一直没完全弄懂之间的区别，于是今天查了下资料，自己做个总结。 之所以有这么多类型的绑定方法，是因为jQuery的版本更新的原因，如on()方法就是1.7以后出现的。 jQuery的事件绑定api页面上，提到live()方法已经过时，不建议使用。所以这里我们主要就看下以下三个方法：bind()、delegate()、on() 我们准备一个html页面，用于各种类型事件绑定的测试。 <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> </head> <body> <div> <button id="btn">添加新的p元素</button> <p>第一个p元素</p> <p>第二个p元素</p> <p>第三个p元素</p> <p>第四个p元素</p> <p>第五个p元素</p> <

jQuery事件绑定on()、bind()与delegate() 方法详解

由 纵然是瞬间 提交于 2020-01-09 00:30:02
啃了一段日子的js相关了，学的过程中发现在jQuery中绑定事件时，有人用bind()，有人用on()，有人用delegate()，还有人用live()，看代码的时候觉得都实现功能了也就掀过去了，只是一直没完全弄懂之间的区别，于是今天查了下资料，自己做个总结。 之所以有这么多类型的绑定方法，是因为jQuery的版本更新的原因，如on()方法就是1.7以后出现的。 jQuery的事件绑定api页面上，提到live()方法已经过时，不建议使用。所以这里我们主要就看下以下三个方法：bind()、delegate()、on() 我们准备一个html页面，用于各种类型事件绑定的测试。 <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> </head> <body> <div> <button id="btn">添加新的p元素</button> <p>第一个p元素</p> <p>第二个p元素</p> <p>第三个p元素</p> <p>第四个p元素</p> <p>第五个p元素</p> </div> <script> $("#btn").click(function(){ $(

jQuery事件绑定on()、bind()与delegate() 方法详解

由 泪湿孤枕 提交于 2020-01-08 18:25:37
本文转载：啃了一段日子的js相关了，学的过程中发现在jQuery中绑定事件时，有人用bind()，有人用on()，有人用delegate()，还有人用live()，看代码的时候觉得都实现功能了也就掀过去了，只是一直没完全弄懂之间的区别，于是今天查了下资料，自己做个总结。 之所以有这么多类型的绑定方法，是因为jQuery的版本更新的原因，如on()方法就是1.7以后出现的。 jQuery的事件绑定api页面上，提到live()方法已经过时，不建议使用。所以这里我们主要就看下以下三个方法：bind()、delegate()、on() 我们准备一个html页面，用于各种类型事件绑定的测试。 <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> </head> <body> <div> <button id="btn">添加新的p元素</button> <p>第一个p元素</p> <p>第二个p元素</p> <p>第三个p元素</p> <p>第四个p元素</p> <p>第五个p元素</p> </div> <script> $("#btn").click(function()

jQuery高级

由 ＊爱你＆永不变心＊ 提交于 2020-01-08 17:55:39
JQuery高级 　遍历： 　　　　1js的遍历方式 　　　　　　for(初始化值；循环结束条件；步长) 　　　　2jq的遍历方式 　　　　　　1jq对象.each(callback) 　　　　　　juqery对象.eahce(funcation(index,element){ 　　　　　　index,代表索引 　　　　　　element代表集合中的每个元素对象 　　　　　　this.也代表每一个元素对象 })　　 　　　　　　2回调函数的返回值 　　　　　　　　true:如果当前funcation的返回值为true,则继续循环　　 　　　　　　　　false:如果当前datction的返回值为false,则结束循环 　　　　2$.each(object,[callback]) 　　　　3. for .. of :jquery3.0版本之后提供的方式 　　　　　　for(元素对象 of 容器对象) 事件绑定 　　　　1jquery标准的绑定方式 　　　　　　jq对象.事件方法（回调函数）； 　　　　　　注***如果绑定事件，确不传递回调函数，那么会触发浏览器默认行为。例如submit会触发表单的提交事件 　　　　2on绑定事件/off解除绑定 　　　　　　jq对象.on(事件名称，回调函数) 　　　　　　jq对象。off(事件名称) 　　　　　　如果off方法不传递任何参数

【jquery】jquery绑定事件的方式 bind() delegate() live()以及on()

由 余生颓废 提交于 2020-01-08 10:20:57
之前知道一些jquery的绑定方法没怎么区分: 看了api文档,有些地方仍然是看的云里雾里简单的总结一下 1, bind()方法 对应的解除绑定方法unbind() 只需要明白这一点：动态生成的元素是不会被绑定事件的 2, delegate()方法 对应的解除绑定方法undelegate() 3, live()方法 对应的解除绑定方法die() 该绑定方式1.9版本正式被移除，请注意版本化差异 4, on()方法 对应的解除绑定方法是off() , 官方建议使用这个绑定事件 ，但是貌似底层仍然用的是delegate方法 除了bind()方法 下面的三个方法都可以对动态添加的元素绑定事件.live()方法的一些缺点: 最白话的一种:live()效率不高·· 下面是官方文档ive()的缺点：我就随便翻译下了··· jQuery attempts to retrieve the elements specified by the selector before calling the .live() method, which may be time-consuming on large documents. [ 翻译 ：在调用live()方法绑定事件之前,jquery去查找符合特定选择器的元素这一个过程耗费在大量的dom元素上的时间可能是特别大] Chaining methods is
订阅 jquery事件