当前位置:首页 > 网站制作 > jQuery教程 > 解决 jQuery版本升级兼容性问题

jquery兼容性问题 解决 jQuery版本升级兼容性问题

2017-02-04 | 来源:网络 | 人气: | | 关键字: jquery兼容性问题 jquery兼容性问题
解决 jQuery版本升级兼容性问题在项目开发过程中,若使用Acunetix Web Vulnerability Scanner 等安全扫描工具,有时会扫描出低版本的jquery有

解决 jQuery版本升级兼容性问题

解决 jQuery版本升级兼容性问题

在项目开发过程中,若使用Acunetix Web Vulnerability Scanner 等安全扫描工具,有时会扫描出低版本的jquery有安全漏洞,建议升级至最新版,上网查了一下,如果jQuery早期版本使用不当,可能会有DOMXSS漏洞,所以非常建议升级到jQuery 1.9.x或以上版本。因此,我决定将正在开发项目中的Jquery版本将由jquery1.7.2 升级到jquery1.11版本。jQuery官方也为类似升级工作提供了jQuery Migrate插件,在此将升级心得以及升级过程中遇到的兼容性问题列举出来给大家分享。

jQuery官方推荐了jQuery Migrate 库来解决jQuery升级问题。不过一直采用这个库终究不是长久之计,开发中建议使用jQuery Migrate的开发版,可以在浏览器控制台上打印出来不兼容的地方详细信息。需要注意的是开发中一定要使用jQuery Migrate的开发版,因为压缩版的是不会在控制台给出警告的……把jQuery Migrate的库紧跟在jQuery库后面引用即可:

<script src="<path>/<to>/jquery-1.11.1.js"></script>

<script src="<path>/<to>/jquery-migrate-1.2.1.js"></script>

等升级完毕,确定没问题了之后,再将jQuery Migrate库去掉就可以了。根据个人经验,下面我把坑分成 常见坑,少见坑两类来论述。等升级完毕,确定没问题了之后,再将jQuery Migrate库去掉就可以了。根据个人经验,下面我把坑分成 常见坑,少见坑两类来论述。

本次p升级jQuery过程中遇到的问题:

1. jQuery.fn.attr方法的错误使用(这是个非常易犯的错误!)

jQuery Migrate中,关于attr方法的警告有以下这些:

JQMIGRATE: jQuery.fn.attr('value', val) no lowww.alonely.com.cnnger sets properties

JQMIGRATE: jQuery.fn.attr('value') no longer gets properties

JQMIGRATE: jQuery.fn.attr('checked') may use property instead of attribute

JQMIGRATE: 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写法很少见,可忽略。

2. jQuery选择器的错误使用

在MP_Portal中用到了一种jQuery的选择器

$("div[id='signContentDiv']").each(function(i,obj){

$("div[id='signContentDiv']['"+i+"']").hide();

$("div[id='mmsDiv']['"+i+"']").hide();

});

通过代码,我们大概可以推断出来在页面中有若干个id为signContentDiv和mmsDiv的两个div,以上代码通过属性过滤选择器选取了所有id为signContentDiv和mmsDiv的元素,并在过滤器内部直接写上[i],i在each函数中递增,通过i作为下标序号来遍历元素集合,这种写法在jQuery-1.7.2中可以正常运作,但是在jQuery-11.1中已经不支持了,虽然代码不会报错,但是返回的都是null值。

需要改成下面的写法,jQuery才能正确遍历集合的每个元素:

$("div[id='signContentDiv']").each(function(i,obj){

$($("div[id='signContentDiv']")[i]).hide();

$($("div[id='mmsDiv']")[i]).hide();

});

3. 使用了被废弃的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 */});

以上是在portal中存在的兼容性问题,

评论

评论数10

表情
发表评论
网友评论仅供其表达个人看法,并不表明网易立场。
《解决 jQuery版本升级兼容性问题》更多评论

头条推荐

阅读下一篇

jQuery 安装

网页中添加 jQuery可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法:从 jquery. ... 查看全文

返回jQuery教程 返回网站首页