首页
站长论坛BBS
救助
投稿
discuz视频教程
discuz技术支持
版块
登录
快速注册

解决同一页面jQuery多个版本或和其他js库冲突方法

冷蝶 2015-4-18 [jQuery] 来自PC 复制链接
41289
discuz使用视频教程
31idc

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
jQuery多个版本或和其他js库冲突主要是常用的$符号的问题,这个问题 jquery早早就有给我们预留处理方法了,下面一起来看看解决办法。

1、同一页面jQuery多个版本或冲突解决方法
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>jQuery测试页-111cn.net</title>
  6. </head>
  7. <body>
  8.     <!-- 引入 jquery 1.8.0 -->
  9.     <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
  10.     <script type="text/javascript">
  11.         var $180 = $;
  12.     </script>
  13.     <!-- 引入 jquery 1.9.0 -->
  14.     <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
  15.     <script type="text/javascript">
  16.         var $190 = $;
  17.     </script>
  18.     <!-- 引入 jquery 2.0.0 -->
  19.     <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
  20.     <script type="text/javascript">
  21.         var $200 = $;
  22.     </script>
  23.     <script type="text/javascript">
  24.         console.log($180.fn.jquery);
  25.         console.log($190.fn.jquery);
  26.         console.log($200.fn.jquery);
  27.     </script>
  28. </body>
  29. </html>
复制代码

解决同一页面jQuery多个版本或和其他js库冲突方法
2、同一页面jQuery和其他js库冲突解决方法
①.jQuery在其他js库前
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>jQuery测试页-111cn.net</title>
  6. </head>
  7. <body>
  8.     <!-- 引入 jquery 1.8.0 -->
  9.     <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
  10.     <script type="text/javascript">
  11.         var $180 = $;
  12.         console.log($.fn.jquery);
  13.     </script>
  14.     <!-- 引入 其他库-->
  15.     <script type="text/javascript">
  16.         $ = {
  17.             fn:{
  18.                 jquery:"111cn.net"
  19.             }
  20.         };
  21.     </script>
  22.     <script type="text/javascript">        
  23.         console.log($.fn.jquery);
  24.         console.log($180.fn.jquery);
  25.     </script>
  26. </body>
  27. </html>
复制代码

解决同一页面jQuery多个版本或和其他js库冲突方法
②.jQuery在其他js库后
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>jQuery测试页-111cn.net</title>
  6. </head>
  7. <body>
  8.     <!-- 引入 其他库-->
  9.     <script type="text/javascript">
  10.         $ = {
  11.             fn:{
  12.                 jquery:"111cn.net"
  13.             }
  14.         };
  15.     </script>
  16.     <!-- 引入 jquery 1.8.0 -->
  17.     <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
  18.     <script type="text/javascript">   
  19.         console.log($.fn.jquery);   
  20.         var $180 = $.noConflict();
  21.         console.log($.fn.jquery);
  22.         console.log($180.fn.jquery);
  23.     </script>
  24. </body>
  25. </html>
复制代码


解决同一页面jQuery多个版本或和其他js库冲突方法

再补充一下方法
方案1:

引入noConflict(),将$替换为其他符号
  1. var $j = jQuery.noConflict();
  2. $j(document).ready(function(){
  3. $j("#btn1").click(function(){
  4. alert("Text: " + $j("#test").text());
  5. });
  6. });
复制代码

缺点:引入了这段代码后,不仅是当前的js文件,该html引用的所有js中,如果有用到jquery中的$,都得用$j来代替之前的$

方案2:

ready函数是jquery的入口函数,可以
将$(document).ready(function(){
替换成
jQuery( document ).ready(function( $){}

缺点:只对ready嵌套内的代码有效,对嵌套外的代码是无效的。如果你所有的逻辑,都在写ready函数中,那没问题。但我们一般都会在ready函数之外写一些子函数,然后ready函数再去调用这些函数。这个方案对这些函数是无效的,因此这套方案有局限性。

方案3(推荐,特别是开发js插件时)

给js内容包上一个函数
  1. jQuery(function($){
  2. //你的js代码放在这里(例如第二个方案提到的ready函数和子函数)
  3. //如果是js文件,其实就是在文件头部和尾部各加一行代码
  4. }
复制代码

或者
  1. (function($) {
  2. //你的js代码
  3. })(jQuery);
复制代码

这个方法,没有上面两个方案的缺点,只会影响到被包在jQuery(function($){}中的代码。

不会影响到其他js代码,这一点很重要。试想一下,假如你写了一个js公共组件,该组件需要用到jquery,为了提高鲁棒性,需考虑$符号冲突问题。如果使用方案1,那么别人在使用时,还得遵守你的约定,把自己js代码中的$改成$,而如果使用方案3,既能避免$冲突对该组件的影响,又无需要求使用公共组件的人修改自己的代码。



上一篇:WordPress上传出现&quot;上传时发生了错误,请稍候再试&quot;解决方法
下一篇:怎样在网站备案期间最大限度防止百度排名和收录下降
lgkongyaji 发表于 2015-4-18 17:01:35 来自PC
学习了  
aw198408 发表于 2015-4-21 21:25:23 来自PC
有点深奥。。。。
贝贝特卖  www.beibeiz.com www.yrdir.com
万事开头难 发表于 2015-4-21 21:41:23 来自PC
不是很懂啊
洛阳app技术 发表于 2015-4-22 11:14:36 来自PC
支持学习
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

快速回复 返回顶部 返回列表