jQuery版本升级问题汇总

背景:客户需要,认为3.0之前的版本存在XSS(跨站脚本攻击)风险,jquery版本需要从当前的1.8.2更新到3.3.1。

查询了官方文档,https://www.jquery123.com/category/deprecated/deprecated-3.0/

3.0以后的版本主要弃用的API有:.bind()、.unbind()、.delegate()、.undelegate()、jquery.fx.interval

1.9和1.10版本弃用的API有jquery.support()、.context()

详细问题:

1、attr和prop

attr:获取匹配的元素集合中的第一个元素的属性的值  或 设置每一个匹配元素的一个或多个属性。
prop:获取匹配的元素集中第一个元素的属性(property)值或设置每一个匹配元素的一个或多个属性。

attr是1.0之后使用的,prop是1.6以后使用的,用法不同,需注意。

在jQuery 1.6中,当属性没有被设置时候,.attr()方法将返回undefined。 若要检索和更改DOM属性,比如元素的checked, selected, 或 disabled状态,使用.prop()方法。

版本升级最大改动就在这里,之前的代码大量使用attr,没办法。。。

2、报错:Uncaught TypeError: url.indexOf is not a function
这个错误是由于调用了load函数导致的错误
把代码里调用load函数的方式
//old
$(window).load(function() { ... });
//new
$(window).on('load', function() { ... });

注意:.load(), .unload(), and .error()从jQuery 1.8开始就被废弃了,换成使用.on()函数来注册。其实这里应该之前1.8的时候就报错,可能都没有注意到,这次正好一次性改完。

3.$.browser用法

jQuery 1.9不再支持$.browser 和 $.browser.version,取而代之的是 $.support。在更新的 2.0 版本中,将不再支持 IE 6/7/8。
当前客户要求的版本3.0+,肯定是不支持IE6/7/8了,先前我们用的是1.8版本,因此现在所有的$.browser用法都报错,页面混乱。

如果要全面支持 IE,并混合使用 jQuery 1.9 和 2.0, 官方的解决方案是加入以下脚本:
<!--[if lt IE 9]>
  <script src='jquery-1.9.0.js'></script>
<![endif]-->
<!--[if gte IE 9]>
  <script src='jquery-2.0.0.js'></script>
<![endif]-->

从长久来看,这样有利于在复杂情况下根据浏览器特性进行分别处理, 而不是简单的检测浏览器类型和版本。 但目前很多旧程序的移植恐怕无法直接过渡为根据浏览器支持特性, 所以在网上找了一些能够直接替换的解决办法。
jQuery1.9之前判断浏览器类型:
$.browser.mozilla = /firefox/.test(navigator.userAgent.toLowerCase()); //firefox
$.browser.webkit = /webkit/.test(navigator.userAgent.toLowerCase()); //webkit内核
$.browser.opera = /opera/.test(navigator.userAgent.toLowerCase()); //opera
$.browser.msie = /msie/.test(navigator.userAgent.toLowerCase()); //IE

等号后面的表达式返回的就是 true/false,可以直接用来替换原来的 $.browser.msie 等。如需要检查是否为 IE6时,可以这么写:
// Old
if ($.browser.msie && 7 > $.browser.version)
// New
if ('undefined' == typeof(document.body.style.maxHeight))
检查是否为 IE 6-8:
if (!$.support.leadingWhitespace) {}

4.$("#id").val(index);  之前1.8.2,当index不存在时会默认选取第一个,升级3.3.1之后,如果不存在不会有默认选项,显示也是空白。

5.$.post(...). error(function()错误回调方法报错:Uncaught TypeError: $.post(...).error is not a function

原因:$.post()使用连缀.error()方法提示错误,连缀方法被.fail()取代

原文地址:https://www.cnblogs.com/xuqiushuo/p/10638600.html