jQuery版本升级踩坑大全

介绍jQuery版本升级路上的那些坑——给需要的朋友一些参考

背景

众所周知，web工程师们对jQuery应该再熟悉不过了。许多网站仍在使用古老的jQuery版本。如果不当使用早期版本，可能会存在DOMXSS漏洞。强烈推荐升级到jQuery 1.9.x或更高版本。最近，我主导了一个项目，将jQuery版本从1.4.2升级到了的jQuery 1.11.3。jQuery官方也为类似的升级工作提供了jQuery Migrate插件。接下来，让我们一起聊聊这次升级过程中的那些“坑”。

从哪里来？

jQuery 1.11.3是我在升级到新版本时面临的一个挑战。由于项目已经运行多年，之前使用的jQuery版本是过时的1.4.2。这次升级可谓是跨越了一大步。在早期的版本中使用的许多jQuery写法在新版本中已经被废弃，一些不规范的写法在旧版本中可能仍然有效，但在新版本中已经不再支持。更糟糕的是，新版本中某些功能的使用方式已经发生了改变，甚至不会报错，但可能深入代码逻辑才能发现。这时，jQuery官方推荐的jQuery Migrate库就派上了用场。它可以帮助我们解决jQuery升级过程中的兼容性问题。建议开发中使用jQuery Migrate的开发版，因为它可以在浏览器控制台上打印出不兼容的地方的详细信息。需要注意的是一定要使用开发版，因为压缩版不会在控制台给出警告。只需在引用jQuery库之后紧跟引用jQuery Migrate的库即可。路径如下：

待升级完毕并确认无误后，即可移除jQuery Migrate库。根据个人经验以及网站SEO优化的需要，我将这些“坑”分为常见坑和少见坑两类来论述。首先是常见坑：

常见坑及其解决方案：

废弃的jQuery.fn.live方法的使用：这是一个在旧版本中常用的方法，但在新版本中已被废弃。jQuery Migrate库会在控制台发出相应的警告：“JQMIGRATE: jQuery.fn.live() is deprecated”。live方法原本用于设置事件代理，在jQuery 1.7之后已不再推荐使用，取而代之的是jQuery.fn.on函数。两者接口略有不同：原本使用live方法设置点击事件如下：$(selector).live('click', function(){/ some code } 现在应改为使用on方法：$(selector).on('click', function(){/ some code } 这样就能避免兼容性问题。希望这篇文章能为大家在升级jQuery版本时提供一些参考和帮助！