十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这是Jquery javascript库的精简版!
站在用户的角度思考问题,与客户深入沟通,找到鹿邑网站设计与鹿邑网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:网站设计制作、网站制作、企业官网、英文网站、手机端网站、网站推广、域名注册、雅安服务器托管、企业邮箱。业务覆盖鹿邑地区。
jquery是做什么用的呢?
1 、取得页面中的元素。如果不使用JavaScript 库,遍历DOM (Document Object Model ,文档对象模型)树,以及查找
HTML 文档结构中某个特殊的部分,必须编写很多行代码。jQuery 为准确地获取需要检查或操纵的文档元素,提 供了
可靠而富有效率的选择符机制。
2 、修改页面的外观。CSS 虽然为影响文档呈现的方式提供了一种强大的手段,但当所有浏览器不完全支持相同的标准时,
单纯使用CSS 就会显得力不从心。 jQuery 可以弥补这一不足,它提供了跨浏览器的标准解决方案。而且,即使在页面
已经呈现之后,jQuery 仍然能够改变文档中某个部分的类或者个别的 样式属性。
3 、改变页面的内容。jQuery 能够影响的范围并不局限于简单的外观变化,使用少量的代码,jQuery 就能改变文档的内
容。可以改变文本、插入或翻转图像、对列表重新排序,甚至,对HTML 文档的整个结构都能重写和扩充——所有这些只
需一个简单易用的API 。
4 、响应用户的页面操作。即使是最强大和最精心设计的行为,如果我们无法控制它何时发生,那它也毫无用处。jQuery 提
供了截取形形色色的页面事件 (比如用户单击一个链接)的适当方式,而不需要使用事件处理程序搞乱HTML代码。此
外,它的事件处理API 也消除了经常困扰Web 开发人员的浏览器不一 致性。
5 、为页面添加动态效果。为了实现某种交互式行为,设计者也必须向用户提供视觉上的反馈。jQuery 中内置的一批淡入、
擦除之类的效果,以及制作新效果的工具包,为此提供了便利。
6 、无需刷新页面即可从服务器获取信息。这种编程模式就是众所周知的AJAX (Asynchronous JavaScript and XML ,
异步JavaScript 和XML ),它能辅助Web 开发人员创建出反应灵敏、功能丰富的网站。jQuery 通过消除这一过程中的
浏览器特定的复 杂性,使开发人员得以专注于服务器端的功能设计。
live在jQuery1.7中就不再建议使用,在1.9中就给删除了。\x0d\x0a在jQuery官方网站上说明了原因,并声称用on方法取代live方法。\x0d\x0ajQuery官方网站声称下面三行代码是等价的\x0d\x0a$("a.offsite").live("click",function(){alert("Goodbye!");});//jQuery1.3+\x0d\x0a$(document).delegate("a.offsite","click",function(){alert("Goodbye!");});//jQuery1.4.3+\x0d\x0a$(document).on("click","a.offsite",function(){alert("Goodbye!");});//jQuery1.7+
1. 使用了被废弃的jQuery.fn.live方法
jQuery Migrate库对此错误也在控制台有相应的警告:
JQMIGRATE: jQuery.fn.live() is deprecated
live方法原本的作用是设置事件代理,该方法在jQuery 1.7之后就不推荐使用了,取代之的是jQuery.fn.on函数。他们的接口分别是:
$(selector).live('click', function(){/* some code */});$(selector).on('click', [selector,] function(){/* some code */});
乍一看,中括号里面的参数可以省略掉,俩函数不是一模一样么?于是天真地把函数名live直接替换成on,大部分时候,这么做好像没有引起任何异常。但是如果在你调用on函数的时候,前面的$(selector)在当前的网页上根本不匹配任何元素(该元素可能是后面的代码才加到DOM里的),那是不会绑定成功的。事实上,live函数将$(selector)代理到了document元素上,这个元素是肯定存在的,所以不会出现类似情况。正确的替换方法应该是:
$(selector).live('click', function(){/* some code */}); 替换为$(document).on('click', selector, function(){/* some code */});
2. 使用了被废弃的jQuery.fn.die方法
jQuery Migrate对此错误的警告是:
JQMIGRATE: jQuery.fn.die() is deprecated
这个方法和前面的live刚好反过来,取消事件处理函数的绑定。新版本中应该使用off函数代替之,替换方式类似。
3. 使用了被废弃的jQuery.fn.toggle函数
jQuery Migrate对此错误的警告是:
JQMIGRATE: jQuery.fn.toggle(handler, handler...) is deprecated
早期jQuery中名字叫toggle的函数有两个,一个是用于控制元素的显示和隐藏,这个用途的函数目前jQuery中依旧存在;另一个就是上面提到的被废弃的toggle函数,它用于绑定至少两个函数到同一个元素,点击该元素的时候两个函数交替着执行。这两个同名函数功能相差甚远,为了不引起误导,在jQuery
1.8中就不再建议使用了。替换的方式是把两个函数合并成一个函数的if-else两个区段,然后自己设置一个boolean变量,控制每次点击时应该执行哪个区段即可。
4. 使用了被废弃的jQuery.browser属性
jQuery Migrate对此错误的警告是:
JQMIGRATE: jQuery.browser is deprecated
在前端开发中我们经常要根据不同的浏览器版本做出不同的处理,jQuery.browser本来是通过浏览器的userAgent字段来提取浏览器相关信息的。新版本中已经将其废弃,而是建议使用特征检测的方法去判断,并且给了一个Modernizr库作为推荐。不过,改成这个库可能改动成本有点大,如果你还是想沿用jQuery.browser的思路的话,可以自己去实现一下它。例如,判断是不是IE浏览器,可以用
/msie/.test(navigator.userAgent.toLowerCase());
即自己手动获取userAgent字段,并且做一个正则表达式匹配。其他浏览器思路类似,都是对navigator.userAgent做一个正则匹配。
5. $(html)格式书写错误
在jQuery Migrate中,出现以下三种警告中的任何一种,都是属于这个错误:
JQMIGRATE: $(html) HTML strings must start with '' characterJQMIGRATE: $(html) HTML text after last tag is ignoredJQMIGRATE: HTML string cannot start with a '#' character
这个错误还是蛮值得注意的,因为我们文章开头所说的jQuery低版本有XSS漏洞,其实就是和这个错误有关系。在javascript中我们经常会直接将一段html格式的字符串写在jQuery引用里面,比如$('p/p')。按照新版本的jQuery要求,这段html格式的字符串必须是以左尖括号(小于号)开头,其他字符都不可以。以下几种写法,都是错误的:
$(" p/p"); //错误,字符串最开头有一个空格,不是以小于号''开头的$("p/ptest"); //不标准,html标签结束后后面还有多余的"test",它会被忽略$("#p/p); //错误,以井号开头并且后面并不是一个css选择器
这一点在书写的时候注意一下就可以了,其实还是很容易避免的。其中第三种错误其实就不仅仅是警告了,jQuery会直接抛出一个错误,停止javascript代码的继续执行。一般情况以井号开头,例如$("#test"),其实就是一个普通的选择器,但是上面例子中后面又夹杂着html字符串,这会被jQuery判断为潜在的XSS攻击。
6. jQuery.fn.attr方法的错误使用(这是个非常易犯的错误!)
jQuery Migrate中,关于attr方法的警告有以下这些:
JQMIGRATE: jQuery.fn.attr('value', val) no longer sets propertiesJQMIGRATE: jQuery.fn.attr('value') no longer gets propertiesJQMIGRATE: jQuery.fn.attr('checked') may use property instead of attributeJQMIGRATE: jQuery.fn.attr( props, pass ) is deprecated
实践中我发现,早期写的代码里面,获取一个input输入表单的值时,是怎么获取的呢?$('input').attr('value');又是怎么设置的呢?$('input').attr('value',
'helloworld')。这在新版本中都是不正确的!正确的做法应该是
$('input').val(); //获取input表单现在所输入的值
$('input').val('helloworld'); //设置input表单输入的值
到底是获取还是设置,只取决于调用val方法时有没有带着参数。
如果你想手动设置单选框(例如input
type="radio" )被选中,应该怎么设置呢?老的代码里面可能会看到这样 $('input').attr('checked',
true)或者$('input').attr('checked', 'checked')。这些现在也都是不正确的!正确的做法应该是
$('input').prop('checked', true); //把单选框设为选中状态$('input').prop('checked'); //获取单选框是不是被选中了,返回true或false
这是从jQuery
1.6版本开始使用的写法。如果设置disabled和selected属性,也是使用prop方法。那到底什么时候使用attr方法呢?两者的区别是:prop设置的是某元素固有的属性,而attr设置的是写在html标签上的自定义属性。举个例子:
input type="checkbox" checked="checked" haha="hello" var v1 = $('input').prop("checked"); //返回true/false,是否被选中,随状态改变而改变var v2 = $('input').attr("checked"); //返回"checked",这是你设置在标签上的,不会变var v3 = $('input').attr("haha"); //返回"hello",自定义属性var v4 = $('input').prop("haha"); //返回undefined,根本没有这个固有属性
上面提到的第四个错误,jQuery.fn.attr(props, pass) is deprecated这个警告在真实项目中从未见到过,看了一下源码,触发该警告的jQuery写法很少见,可忽略。
7. 向$.parseJSON传入了非法的参数
在jQuery Migrate中,该错误产生如下警告
JQMIGRATE: jQuery.parseJSON requires a valid JSON string
jQuery之所以改这个接口,是为了和浏览器自带的JSON.parse接口对齐,从jQuery
1.9开始生效。这个问题常见于AJAX接收服务端返回值的时候。服务端可能返回一个空字符串,这时候调用该接口会产生错误。必须向$.parseJSON传入合法的JSON字符串。修正方法如下:
var v1 = $.parseJSON(str); 替换为var v1 = $.parseJSON( str ? str : "null" );
8. 使用了被废弃的'hover'事件字符串
在jQuery Migrate中该错误产生如下警告
JQMIGRATE: 'hover' pseudo-event is deprecated, use 'mouseenter mouseleave'
在注册事件处理函数时,'hover'以前可以看作是'mouseenter mouseleave'两个事件的别称。目前已经将该别称去掉了,所以代码中请用'mouseenter mouseleave'替换之。
9. jQuery.fn.andSelf已经被替换,不能再使用
jQuery Migrate中是这样的警告:
JQMIGRATE: jQuery.fn.andSelf() replaced by jQuery.fn.addBack()
两个函数功能是完全一样的,可以直接替换。
1. jQuery不兼容浏览器的怪异模式
这个错误的触发方式非常简单,直接把html页面最顶端的!DOCTYPE
html标签删掉就可以了。浏览器怪异模式是为了兼容老古董网页而设计的,详情可参考这篇文章:链接。我想现在的WEB程序员应该不会傻到不写DOCTYPE,也很少使用这种模式下的浏览器吧。
jQuery Migrate展示的错误警告如下:
2. AJAX全局事件必须绑定到document节点上
jQuery Migrate中的警告如下:
JQMIGRATE: AJAX events should be attached to document: ajaxStart
jQuery中AJAX全局事件包括如下接口ajaxStart,
ajaxStop, ajaxSend, ajaxComplete, ajaxError,
ajaxSuccess。因为这些事件使用的比较少,所以也归在少见坑当中。从jQuery
1.9开始,这些事件只能绑定到$(document)上。改正方法如下(摘自jQuery官网):
$("#status").ajaxStart(function(){ $(this).text("Ajax started"); }); 修改为$(document).ajaxStart(function(){ $("#status").text("Ajax started"); });
3. IE6/7/8浏览器不支持修改input表单的type属性
在jQuery Migrate中是这样的警告:
JQMIGRATE: Can't change the 'type' of an input or button in IE 6/7/8
改变input的表单的type属性,你可以直接把文本框改成单选框,改成多选框等等。虽然我感觉这是一种并不算优雅的行为,但是很多浏览器都是支持这么做的,除了IE6/7/8。建议在实际中也是少用这个功能为好。
4. 使用了被移除的$.clean, $.event.handle, $.attrFn, $.fn.data('events'), jQuery.event.trigger属性与方法
在jQuery Migrate中是这样的警告:
JQMIGRATE: jQuery.clean() is deprecatedJQMIGRATE: jQuery.event.handle is undocumented and deprecatedJQMIGRATE: jQuery.attrFn is deprecatedJQMIGRATE: Use of jQuery.fn.data('events') is deprecatedJQMIGRATE: Global events are undocumented and deprecated
如果你在自己的代码中使用过这五个接口,那确实是仔细研究过jQuery源代码的高人啊。因为这五个接口从来没有出现在jQuery的官方文档中,并且有些在后续版本中已经删除,可谓来无影去无踪。看源代码的话在早期版本有机会找到他们的存在,但是并不建议使用。建议采用其他方法实现相应的功能。什么?你不知道这五个函数是什么功能?那最好了,你现在也不需要知道了……
5. 使用了过时的$.sub()方法
jQuery Migrate中对本问题的警告如下:
JQMIGRATE: jQuery.sub() is deprecated
这个接口非常简单,不接受任何参数。它用来创建一个jQuery的副本。该方法在jQuery 1.7版本开始就已经不再使用。
6. 使用了过时的jQuery.fn.error方法
jQuery Migrate中对本问题的警告如下:
JQMIGRATE: jQuery.fn.error() is deprecated
在jQuery中,error也是和click一样的事件。注册该事件的处理函数,以前是$(selector).error(function(){}),现在已经被废弃,可以使用$(selector).on('error', function(){})来替代。
(2007年9月):这一版去掉了对XPath选择符的支持,原因是相对于CSS语法它已经变得多余了。这一版能够支持对效果的更灵活定制,而且借助新增的命名空间事件,也使插件开发变得更容易。
jQuery UI(2007年9月):这个新的插件套件是作为曾经流行但已过时的Interface插件的替代项目而发布的。jQuery UI中包含大量预定义好的部件(widget),以及一组用于构建高级元素(例如可拖放的界面元素)的工具。 (2010年1月14号):对代码库进行了内部重写组织,开始建立一些风格规范。老的core.js文件被分为attribute.js,css.js,data.js,manipulation.js,traversing.js和queue.js;CSS和attribute的逻辑分离。
⒈4重要新特性
·常用方法的性能大幅提升:重写了大部分较早期的函数;
·更容易使用的设置函数(setter function):为所有对象新增了许多易用的设置函数;
·对Ajax的改进:引入了许多Ajax和JSON处理方面的更新,包括HTML5元素的序列化;
·attribute(改进了.attr()的性能)、jQuery()核心函数、CSS(.css()性能有两倍提升)、特效和事件、DOM操作等也有显著改进 (2011年1月31日):该版本修复了83个bug,解决了460个问题。重大改进有:重写了Ajax模块;新增延缓对象(Deferred Objects);jQuery替身——jQuery.sub();增强了遍历相邻节点的性能;jQuery开发团队构建系统的改进。
1.5新版本
美国时间2011年1月31日John Resig在jQuery官方博客发表文章,宣布jQuery 1.5正式版已经如期开发完成,可以下载使用。压缩版本jQuery Minified29KB,不压缩版本jQuery Regular(用于阅读和调试)207KB。由于jQuery已经成为目前最流行的JavaScript库,得到广泛的支持,新版本的发布当然非常引人注目。
重要变化:
1. Ajax重写
Ajax模块完全进行了重写。新增一个jXHR对象,为不同浏览器内置的XMLHttpRequest提供了一致的超集。对于XMLHttpRequest之外的传输机制,比如JSONP请求,jXHR对象也可以进行处理。(详情可以参见:jQuery.ajax文档)
此外,系统的可扩展性大大增强,可以附加各种数据处理器、过滤器和传输机制,为开发新的Ajax插件提供了方便。
2. 延迟对象
延迟对象(Deferred Object,jQuery.Deferred对象)是一个可链接的(chainable)实用工具对象,实现了Promise接口,可以在回调队列中注册多个回调、调用回调队列并转发任何同步/异步函数的成败状态。正如Using Deferreds in jQuery 1.5一文中说明的,其结果是在jQuery中能够将依赖于某个任务(事件)结果的逻辑与任务本身解耦了。这一点在JavaScript中其实并不新鲜,Mochikit和Dojo等已经实现有些日子了。由于jQuery 1.5的Ajax模块内置使用了延迟对象,因此通过jQuery编写Ajax程序将自动获得这一功能。
开发人员借此可以使用无法立即获得的返回值(如异步Ajax请求的返回结果),而且第一次能够附加多个事件处理器。
例如,使用了新的jQuery内部Ajax API就可以实现下面的代码了:
// Assign handlers immediately after making the request,// and remember the jxhr object for this request var jxhr = $.ajax({ url: example.php }) .success(function() { alert(success); }) .error(function() { alert(error); }) .complete(function() { alert(complete); });// perform other work here ... // Set another completion function for the request above jxhr.complete(function(){ alert(second complete); });
此外,使用jQuery.Deferred还可以开发自己的延迟对象。更多详情参见:延迟对象文档。
3. jQuery.sub()
jQuery 1.5提供了一种创建和修改jQuery副本的方式。可以用来添加不向外部公开的方法,或者对jQuery的某些方法进行重新定义以提供新功能,或者提供更好的封装、避免名称空间冲突。当然,也可以用来开发插件,但Resig强烈建议在开发插件之前,先考虑jQuery UI widget工厂。
值得注意的是,sub函数并不提供真正的隔离,所有方法、数据、调用仍然依靠jQuery本身来支持。
4. 遍历性能提高
在新版本中.children(),.prev(),.next()几个常用的遍历函数性能有了显著提高。
5. 内部开发系统
John Resig还特别提到了jQuery团队内部开发系统的两点改变:一是服务器端用Node.js替换了老的Java/Rhino系统,使得团队可以专注于JavaScript环境的新变化;二是所用的代码优化程序从Google Closure切换到UglifyJS,新工具的压缩效果非常令人满意。
jQuery 1.5.2 在1.5的基础上修正的大量的bug
jQuery 1.7b 2011年09月29日jQuery 1.7 的第一个 beta 测试版本,该版本修复了超过 50 个的问题以及带来一些新特性。
2011年11月4日jQuery1.7正式版发布。
新版本包含了很多新的特征,特别提升了事件委派时的性能尤其是在IE7下。
新增及改进项:
⒈新的事件 APIs: .on() and .off();
⒉提升了事件委派时的性能有了大幅度的提升,尤其是在IE7下;
⒊更好的在 IE 6/7/8 上支持 HTML5;
⒋切换动画更加直观;
⒌匿名模块定义 AWD
⒍jQuery.Deferred
⒎jQuery.isNumeric()
被删除的方法:
event.layerX and event.layerY
jQuery.isNaN() 2012年03月24日jQuery 1.7.2正式版发布。
该版本在1.7.1的基础上修复了大量的bug,并改进了部分功能。而相比于1.7.2 RC1,只修复了一个bug。值得注意的是:如果你正在使用jQuery Mobile,请使用最新的jQuery 1.7.2和jQuery Mobile 1.1这两个版本,因为之前的jQuery Mobile版本还基于jQuery core 1.7.1或更早的版本。 2012年11月14日 jQuery 1.8.3 发布,修复 bug 和性能衰退问题
IE8中的HTML相关Bug
jQuery 1.8.2在IE9中调用ajax失败的问题
jQuery 1.7.1不能正确地设置IE7中克隆元素的tabindex属性
压缩的JS文件包含非ASCII字符
如果body样式设置为display:none,则$('body').show()无法工作
在IE9中element.css('filter')返回不明确
在Android 2.3.4的浏览器中,jQuery 1.8.1转场效果崩溃
在iPad上缩放一个灯箱效果后,所有动画效果失效
从1.3.2升级到1.8.2版本后,出现Uncaught TypeError错误
在Chrome和Safari中,无法正确检测包含可编辑内容的DIV的焦点 2013年3月 jQuery 2.0 Beta 2 发布
据jQuery官方博客3月消息,jQuery 2.0 Beta 2 发布。
根据用户对jQuery 2.0 Beta 1 版本的反馈,Beta 2 版做了一些修改。jQuery官方表示,非常需要用户来测试 Beta 2 版,最好同时也能向他们反馈提交建议。
他们相信,Beta 2 版已非常稳定,值得一试,不需要等 2.0 的最终版本。
jQuery 团队在官博中再次提醒用户,jQuery 2.0 不再支持IE 6/7/8 了,但是 jQuery 1.9 会继续支持。因为旧版 IE 浏览器在整个互联网中还有很大部分市场,所以他们非常期望大部分网站能继续使用 jQuery 1.x 一段时间。jQuery 团队也将同时支持 jQuery 1.x 和 2.x 。1.9 和 2.0 版的 API 是相同的,所以不必因为你们网站还在用 jQuery 1.9,就感觉好像错过了什么,或者是落后了。
如果你想继续支持 IE 6/7/8,并且又想尝试 jQuery 2.0,那你可以额外加上一些代码。除了老版的 IE,其他所有浏览器都将使用第二脚本,忽略第一个。
在很多环境中,jQuery 2.0 应当都表现的很好。如下:
Google Chrome plugins
Mozilla XUL apps and Firefox extensions
Firefox OS apps
Chrome OS apps
Windows 8 Store (“Modern/Metro UI”) apps
BlackBerry 10 WebWorks apps
PhoneGap/Cordova apps
Apple UIWebView class
Microsoft WebBrowser control
Cheerio or jsdom with Node.js
Intranet applications
2013年4月18日 jQuery 2.0正式版发布 不再支持IE 6/7/8:如果在IE9/10版本中使用“兼容性视图”模式也将会受到影响。 更轻更快:2.0版本文件与1.9.1相比小了12%。 可以构建一个更小、更轻量的版本。 jQuery 2.0 API完全兼容jQuery 1.9 API。 jQuery 1.9.1汉化版2013年2月23日发布,由网友翻译非官方 2014年5月1日,jQuery2.1.1版发布
jQuery绑定点击事件可以使用其绑定事件函数
jquery中四个事件绑定方式(bind,live,delegate,on)
1、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:可选;需要传递的参数;
function:必需;当绑定事件发生时,需要执行的函数;
适用Jquery版本
适用所有版本,但是根据官网解释,自从jquery1.7版本以后bind()函数推荐用on()来代替。
2、live()
简要描述
live() 向当前或未来的匹配元素添加一个或多个事件处理器;
使用方式
$(selector).live(event,data,function)
event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;
单事件处理:例如 $(selector).live("click",data,function);
多事件处理:1.利用空格分隔多事件,例如 $(selector).live("click dbclick mouseout",data,function);
2.利用大括号灵活定义多事件,例如 $(selector).live({event1:function, event2:function, ...})
3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;
大括号替代方式:绑定较为灵活,可以给事件单独绑定函数;
data:可选;需要传递的参数;
function:必需;当绑定事件发生时,需要执行的函数;
适用Jquery版本
jquery1.9版本以下支持,jquery1.9及其以上版本删除了此方法,jquery1.9以上版本用on()方法来代替。
3、delegate()
简要描述
delegate() 为指定的元素(被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
使用方式
$(selector).delegate(childSelector,event,data,function)
childSelector: 必需项;需要添加事件处理程序的元素,一般为selector的子元素;
event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;
单事件处理:例如 $(selector).delegate(childselector,"click",data,function);
多事件处理:1.利用空格分隔多事件,例如 $(selector).delegate(childselector,"click dbclick mouseout",data,function);
2.利用大括号灵活定义多事件,例如 $(selector).delegate(childselector,{event1:function, event2:function, ...})
3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;
大括号替代方式:绑定较为灵活,可以给事件单独绑定函数;
data:可选;需要传递的参数;
function:必需;当绑定事件发生时,需要执行的函数;
适用Jquery版本
jquery1.4.2及其以上版本;
4、on()
简要描述
on() 为指定的元素,添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 on() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
使用方式
$(selector).on(event,childselector,data,function)
event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;
单事件处理:例如 $(selector).on("click",childselector,data,function);
多事件处理:1.利用空格分隔多事件,例如 $(selector).on("click dbclick mouseout",childseletor,data,function);
2.利用大括号灵活定义多事件,例如 $(selector).on({event1:function, event2:function, ...},childselector);
3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;
大括号替代方式:绑定较为灵活,可以给事件单独绑定函数;
childSelector: 可选;需要添加事件处理程序的元素,一般为selector的子元素;
data:可选;需要传递的参数;
function:必需;当绑定事件发生时,需要执行的函数;
适用Jquery版本
jquery1.7及其以上版本;jquery1.7版本出现之后用于替代bind(),live()绑定事件方式;
四种方式的异同和优缺点
相同点:
1.都支持单元素多事件的绑定;空格相隔方式或者大括号替代方式;
2.均是通过事件冒泡方式,将事件传递到document进行事件的响应;
比较和联系:
1.bind()函数只能针对已经存在的元素进行事件的设置;但是live(),on(),delegate()均支持未来新添加元素的事件设置;
2.bind()函数在jquery1.7版本以前比较受推崇,1.7版本出来之后,官方已经不推荐用bind(),替代函数为on(),这也是1.7版本新添加的函数,同样,可以
用来代替live()函数,live()函数在1.9版本已经删除;
3.live()函数和delegate()函数两者类似,但是live()函数在执行速度,灵活性和CSS选择器支持方面较delegate()差些
4.bind()支持Jquery所有版本;live()支持jquery1.8-;delegate()支持jquery1.4.2+;on()支持jquery1.7+;
总结
如果项目中引用jquery版本为低版本,推荐用delegate(),高版本jquery可以使用on()来代替,以上仅为个人看法
jquery 兼容IE6的并且最稳定版本是1.4.4 和1.8.3
1.4.4号称是最稳定 因为人们真正开始对jquery投入很大关注 就是1.4.4红火之日
不过极力推荐在可以更改的前提下 升级jq 现在最好升级到1.8.3
1.9删除了一些东西 恐怕你现在使用会造成一些困难
2.0 是彻底放弃了ie6,7,8的一些固执的死语法
至于1.7 不上不下,没意义,建议用·1.8.3