jQuery 中 $ 冲突怎么解决? 下面本篇文章给大家介绍一下 jQuery 中 $ 符号的冲突问题及解决方案. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
在 jQuery 中,$ 是 jQuery 的别名, 为了书写方便, 我们更习惯用 $('#id')这一类的方式来书写代码. 当同一页面引用了 jQuery 多个版本或者 jQuery 与某些其他 JS 库产生冲突, 控制台就会报错.
同一个页面多个版本冲突解决办法
你可能会问, 为什么在一个页面上会引用多个版本的 jQuery, 只引用一个不就好了吗?
答案是: 不行. 一般要用到两个 (或以上) 版本的 jQuery 库的原因是: 现有的网站已经用了旧版本的 jQuery 以及相关插件, 直接将 jQuery 升级到新版本会导致这些基于旧版本 jQuery 的插件不能工作, 除非你能把这些插件全部升级, 或者等各个插件的作者发布支持新版本 jQuery 的插件版本.
解决办法: 使用 jQuery.noConflict([extreme])方法.
比如我引用的是 jQuery-1.11.0.JS 和 jQuery-1.5.0.JS.
- <script src="jquery-1.5.0.js">
- </script>
- <script src="jquery-1.11.0.js">
- </script>
- <script>
- console.log($.fn.jQuery); //'1.11.0'
- var $jq = jQuery.noConflict(true);
- console.log($.fn.jQuery); //'1.5.0'
- </script>
可以看到 jQuery.noConflict 将变量 $ 的控制权让渡给了 1.5.0 版本的 jQuery 库. 而要使用 1.11.0 的版本则要用 $jq() 代替.
但是引入了两个版本的 jQuery 后, 代码很乱, 导致别人难以理解甚至误删了一些重要代码怎么办?
改进的方法是:
先直接引用新版的 jQuery 库.
- <script src="jquery-1.11.0.js">
- </script>
- <script src="myJS.js">
- </script>
把我们写的脚本 myJS.JS 中的主体内容写在立即调用函数里头, 引用的是新的版本的 jQuery.
- //myJS.JS
- (function() {
- //myJS.JS 的代码, 引用的是 v1.11.0
- })();
再写一个立即调用函数, 把旧版本的 jQuery 代码嵌进去(压缩代码只有几行). 然后在里面写代码, 此时变量 $ 所引用的前面嵌进去的 jQuery
- //myJS.JS
- (function () {
- //... 此处省略 / jquery1.5.0
- //jquery1.5.0 的压缩代码
- var $ = jQuery.noConflict(true);
- // 此处开始写的 $()所引用的是 jquery1.5.0
- })();
Ps: 需要检查 jQuery 的协议是否允许我们把 jQuery 源码直接嵌入我们自己的 JavaScript 代码
2, 同一页面 jQuery 和其他 JS 库冲突解决方法
1依然可以使用 jQuery.noConflict 将变量 $ 的控制权让渡给其他 JS 库.
如果 jQuery 在其他 JS 库前, 不需要使用 noConflict.
- <!-- 引入 jquery 库 -->
- <script src="jquery-1.11.0.js">
- </script>
- <script type="text/javascript">
- var $jq = $;
- console.log($.fn.jQuery); //'1.11.0'
- </script>
- <!-- 引入 其他库 -->
- <script type="text/javascript">
- $ = {
- fn: {
- jQuery: "otherJS"
- }
- };
- </script>
- <script type="text/javascript">
- console.log($.fn.jQuery); //otherJS
- console.log($jq.fn.jQuery); //'1.11.0'
- </script>
如果在其他 JS 库之后, 用 noConflict 让渡.
<!-- 引入 其他库 --> <script type="text/javascript"> $ = { fn: { jQuery: "otherJS" } }; </script> <!-- 引入 jquery 库 --> <script src="jquery-1.11.0.js"> </script> <script type="text/javascript"> console.log($.fn.jQuery); //'1.11.0' var $180 = $.noConflict(); // 解除冲突 console.log($.fn.jQuery); //otherJS console.log($jq.fn.jQuery); //'1.11.0' </script>
它的缺点是: 在接下来的 JS 代码中只要引用到 jQuery 就必须把 $ 换成 $jq.
2ready 函数是 jQuery 的入口函数
可以将
$(document).ready(function() {...})
替换成:
jQuery(document).ready(function($) {...})
它的缺点是: 只对 ready 嵌套内的代码有效, 如果 ready 函数外还有一些子函数, 对嵌套外的代码是无效的.
3把 $ 作为参数传进去
(function($) { // 你的 JS 代码 })(jQuery);
或者
jQuery(function($){ // 你的 JS 代码 }
你的 JS 代码可以包括上面说到的 ready 函数和子函数. 在用 jQuery 写公共组件的时候, 使用这种方式既能避免 $ 冲突, 又无需要求使用公共组件的人修改自己的代码.
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/jquery/17544.html