代码改变世界

$ is not function   和JQUERY 命名 冲突的解说 Jquer问题 (

  沐海  阅读(1545)  评论(0编辑  收藏  举报

返回值:jQueryjQuery.noConflict(extreme)

概述

将$和jQuery的控制权都交还给原来的库。用之前请考虑清楚!

这是相对于简单的 noConflict 方法更极端的版本,因为这将完全重新定义jQuery。这通常用于一种极端的情况,比如你想要将jQuery嵌入一个高度冲突的环境。注意:调用此方法后极有可能导致插件失效。

参数

extremeBoolean

传入 true 来允许彻底将jQuery变量还原

示例

描述:

完全将 jQuery 移到一个新的命名空间。

jQuery 代码:
var dom = {};
dom.query = jQuery.noConflict(true);
结果:
// 新 jQuery 的代码
dom.query("div p").hide();
// 另一个库 $() 的代码
$("content").style.display = 'none';
// 另一个版本 jQuery 的代码
jQuery("div > p").hide();

解决jQuery和其它库的冲突

在jQuery库中,几乎所有的插件都被限制在它的命名空间里。通常,全局(global)对象都被很好的存储在jQuery命名空间里,所以当把jQuery和其它JavaScript库(如Prototype,MooTools或 YUI)一起使用时,不会引起冲突。

注意,默认情况下,jQuery用"$"作为它自身的快捷方式。

所以JQuery插件 中的$符合 也是可以直接使用的。

 

jQuery库在其它库之前导入

2. jQuery库在其它库之前导入

如果jQuery库在其它库之前就导入了,那么可以直接使用"jQuery"来做一些jQuery的工作。同时,可以使用"$"方法作为其它库的快捷方式。这里没有必要调用jQuery.noConflict()函数。示例如下:

  1. <html> 
  2. <head></head> 
  3. <body> 
  4. <p id="pp">test---prototype<p> 
  5. <p >test---jQuery<p> 
  6.  <!--先导入jQuery --> 
  7.  <script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" 
    type="text/javascript"></script> 
  8.  <!--后导入其它库 --> 
  9.  <script src="prototype-1.6.0.3.js" type="text/javascript"></script> 
  10. <script language="javascript"> 
  11.     jQuery(function(){   //直接使用 jQuery ,
    没有必要调用"jQuery.noConflict()"函数。  
  12.  
  13. 这里的意思就是,使用jQuery 来代替$来避免命名冲突
  14.         jQuery("p").click(function(){  
  15.             alert( jQuery(this).text() );  
  16.         })  
  17.     })  
  18.  
  19.     $("pp").style.display = 'none'; //使用prototype  
  20. </script> 
  21. </body> 
  22. </html> 
有了这些方式来解决冲突,就可以在项目中放心的引用jQuery了。
我也有这样的问题
 
 
    <script src="http://www.cnblogs.com/js/jQuery/jQuery.js" type="text/javascript"></script>
 
 
  <script type="text/javascript">
 
 $.noConflict(); //将变量$的控制权让渡<BR>    <
 
/script><
 
之后一直提示 $ is not function
 
解决方法
 
1. 删除   $.noConflict();因为我只使用了 Jquery和Jquery的一些插件。他们都是用Jquery的全局变量。没必要去避免冲突
 
2.把所有的$换成JQuery 这样可以保证所有的,包括插件 都是 使用的决定 Jquery全局变量
 
 
1.5  解决jQuery和其它库的冲突

在jQuery库中,几乎所有的插件都被限制在它的命名空间里。通常,全局(global)对象都被很好的存储在jQuery命名空间里,所以当把jQuery和其它JavaScript库(如Prototype,MooTools或 YUI)一起使用时,不会引起冲突。

注意,默认情况下,jQuery用"$"作为它自身的快捷方式。

1. jQuery库在其它库之后导入

在其它库和jQuery库都被加载完毕后,可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权移交给其它JavaScript库。示例如下:

  1. <html> 
  2. <head></head> 
  3. <body> 
  4. <p id="pp">test---prototype<p> 
  5. <p >test---jQuery<p> 
  6.  <!-- 引入 prototype  --> 
  7.   <script src="prototype-1.6.0.3.js" type="text/javascript"></script> 
  8.   <!-- 引入 jQuery  --> 
  9.   <script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" 
    type="text/javascript"></script> 
  10.     <script language="javascript"> 
  11.         jQuery.noConflict();//将变量$的控制权移交给prototype.js  
  12.         jQuery(function(){//使用jQuery  
  13.              jQuery("p").click(function(){  
  14.                   alert( jQuery(this).text() );  
  15.              })  
  16.         })  
  17.  
  18.         $("pp").style.display = 'none'; //使用prototype  
  19.     </script> 
  20. </body> 
  21. </html> 

然后,就可以在程序里将jQuery ()函数作为jQuery对象的制造工厂。

此外,还有另一种选择。如果想确保jQuery不会与其它库冲突,但又想自定义一个比较短快捷方式,可以按照如下操作:

  1. //...省略其它代码...  
  2.  
  3. var $j = jQuery.noConflict();  //自定义一个比较短快捷方式  
  4. $j(function(){               //使用jQuery,利用自定义快捷方式 -- $j  
  5.     $j("p").click(function(){  
  6.         alert( $j(this).text() );  
  7.     })  
  8. })  
  9.  
  10. $("pp").style.display = 'none'; //使用prototype  
  11.  
  12. //...省略其它代码... 

可以自定义备用名称,例如jq、$J、awesomequery--任何你想要的名称都行。

如果不想给jQuery自定义这些备用名称,还是想使用$而不管其它库的$方法,同时又不想与其它库相冲突,那么可以使用如下两种解决方法:

其一:

  1. //...省略其它代码...  
  2.  
  3. jQuery.noConflict();               //将变量$的控制权让渡给prototype.js  
  4. jQuery(function($){               //使用jQuery设定页面加载时执行的函数  
  5.     $("p").click(function(){        //在函数内部继续使用 $ 方法  
  6.         alert( $(this).text() );  
  7.     })  
  8. })  
  9.  
  10. $("pp").style.display = 'none'; //使用prototype  
  11.  
  12. //...省略其它代码... 

其二:

  1. //...省略其它代码...  
  2.  
  3. jQuery.noConflict();                //将变量$的控制权让渡给prototype.js  
  4. (function($){                   //定义匿名函数并设置形参为$  
  5.     $(function(){                   //匿名函数内部的$均为jQuery  
  6.         $("p").click(function(){        //继续使用 $ 方法  
  7.             alert( $(this).text() );  
  8.         });  
  9.     });  
  10. })(jQuery);                     //执行匿名函数且传递实参jQuery  
  11.  
  12. $("pp").style.display = 'none'; //使用prototype  
  13.  
  14. //...省略其它代码... 

对于大部分代码而言,这应该是最理想的方式,因为可以通过改变最少的代码来实现全面的兼容性。

编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· [AI/GPT/综述] AI Agent的设计模式综述
记录生活、工作、学习点滴!
E-Mail:mahaisong@hotmail.com 欢迎大家讨论。
沐海博客园,我有一颗,卓越的心!
点击右上角即可分享
微信分享提示