$ is not function 和JQUERY 命名 冲突的解说 Jquer问题 (
2011-06-05 13:52 沐海 阅读(1541) 评论(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()函数。示例如下:
- <html>
- <head></head>
- <body>
- <p id="pp">test---prototype<p>
- <p >test---jQuery<p>
- <!--先导入jQuery -->
- <script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js"
type="text/javascript"></script>- <!--后导入其它库 -->
- <script src="prototype-1.6.0.3.js" type="text/javascript"></script>
- <script language="javascript">
- jQuery(function(){ //直接使用 jQuery ,
没有必要调用"jQuery.noConflict()"函数。- 这里的意思就是,使用jQuery 来代替$来避免命名冲突
- jQuery("p").click(function(){
- alert( jQuery(this).text() );
- })
- })
- $("pp").style.display = 'none'; //使用prototype
- </script>
- </body>
- </html>
我也有这样的问题 <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全局变量
在jQuery库中,几乎所有的插件都被限制在它的命名空间里。通常,全局(global)对象都被很好的存储在jQuery命名空间里,所以当把jQuery和其它JavaScript库(如Prototype,MooTools或 YUI)一起使用时,不会引起冲突。
注意,默认情况下,jQuery用"$"作为它自身的快捷方式。
1. jQuery库在其它库之后导入
在其它库和jQuery库都被加载完毕后,可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权移交给其它JavaScript库。示例如下:
- <html>
- <head></head>
- <body>
- <p id="pp">test---prototype<p>
- <p >test---jQuery<p>
- <!-- 引入 prototype -->
- <script src="prototype-1.6.0.3.js" type="text/javascript"></script>
- <!-- 引入 jQuery -->
- <script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js"
type="text/javascript"></script>- <script language="javascript">
- jQuery.noConflict();//将变量$的控制权移交给prototype.js
- jQuery(function(){//使用jQuery
- jQuery("p").click(function(){
- alert( jQuery(this).text() );
- })
- })
- $("pp").style.display = 'none'; //使用prototype
- </script>
- </body>
- </html>
然后,就可以在程序里将jQuery ()函数作为jQuery对象的制造工厂。
此外,还有另一种选择。如果想确保jQuery不会与其它库冲突,但又想自定义一个比较短快捷方式,可以按照如下操作:
- //...省略其它代码...
- var $j = jQuery.noConflict(); //自定义一个比较短快捷方式
- $j(function(){ //使用jQuery,利用自定义快捷方式 -- $j
- $j("p").click(function(){
- alert( $j(this).text() );
- })
- })
- $("pp").style.display = 'none'; //使用prototype
- //...省略其它代码...
可以自定义备用名称,例如jq、$J、awesomequery--任何你想要的名称都行。
如果不想给jQuery自定义这些备用名称,还是想使用$而不管其它库的$方法,同时又不想与其它库相冲突,那么可以使用如下两种解决方法:
其一:
- //...省略其它代码...
- jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
- jQuery(function($){ //使用jQuery设定页面加载时执行的函数
- $("p").click(function(){ //在函数内部继续使用 $ 方法
- alert( $(this).text() );
- })
- })
- $("pp").style.display = 'none'; //使用prototype
- //...省略其它代码...
其二:
- //...省略其它代码...
- jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
- (function($){ //定义匿名函数并设置形参为$
- $(function(){ //匿名函数内部的$均为jQuery
- $("p").click(function(){ //继续使用 $ 方法
- alert( $(this).text() );
- });
- });
- })(jQuery); //执行匿名函数且传递实参jQuery
- $("pp").style.display = 'none'; //使用prototype
- //...省略其它代码...
对于大部分代码而言,这应该是最理想的方式,因为可以通过改变最少的代码来实现全面的兼容性。