jQuery中$符号的冲突问题怎么解决
创始人
2024-12-16 14:22:11
0次

  在jQuery中,$是jQuery的别名,为了书写方便,我们更习惯用$('#id')这一类的方式来书写代码。当同一页面引用了jQuery多个版本或者jQuery与某些其他js库产生冲突,控制台就会报错。

  1.同一个页面多个版本冲突解决办法

  你可能会问,为什么在一个页面上会引用多个版本的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库冲突解决方法

  ①依然可以使用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。

  ②ready函数是jquery的入口函数

  可以将

  $(document).ready(function() {...})

  替换成:

  jQuery(document).ready(function($) {...})

  它的缺点是:只对ready嵌套内的代码有效,如果ready函数外还有一些子函数,对嵌套外的代码是无效的。

  ③把$作为参数传进去

  (function($) {

  //你的js代码

  })(jQuery);

  或者

  jQuery(function($){

  //你的js代码

  }

  你的js代码可以包括上面说到的ready函数和子函数。在用jQuery写公共组件的时候,使用这种方式既能避免$冲突,又无需要求使用公共组件的人修改自己的代码。

相关内容

热门资讯

空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...