码迷,mamicode.com
首页 > Web开发 > 详细

解决jQuery和其他库的冲突

时间:2015-06-02 19:52:09      阅读:116      评论:0      收藏:0      [点我收藏+]

标签:

本文摘自《锋利的jQuery》

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

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

1、jQuery库在其他库之后导入

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

 

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
  <p id="pp">test---prototype</p>
  <p>test---jQuery</p>
  <script src="prototype.js" type="text/javascript"></script>
  <script src="jquery-2.1.3.js" type="text/javascript"></script>
  <script>
 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


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

 

其一:

jQuery.noConflict();   //将变量$的控制权让渡给prototype.js
jQuery(function($){    //使用jQuery设定页面加载时执行的函数
	$(‘p‘).click(function(){//在函数内部继续使用$()方法
		alert($(this).text());
	});
});
$(‘pp‘).style.display=‘none‘;//使用prototype

其二:

 

 

jQuery.noConflict();//将变量$的控制权让渡给prototype.js
  (function($){       //定义匿名函数并设置形参为$
	$(‘p‘).click(function(){//匿名函数内部的$均为jQuery
		alert($(this).text());//继续使用$()方法
	});
  })(jQuery);    //执行匿名函数且传递实参jQuery
  $(‘pp‘).style.display=‘none‘;//使用prototype

这可以通过改变最少的代码来实现全面的兼容性。

 

 

2、jQuery库在其他库之前导入
如果jQuery库在其他库之前就导入了,那么可以直接使用“jQuery”来做一些jQuery的工作。同时,可以使用$()方法作为其他库的快捷方式。这里无需调用jQuery.noConflict()函数。示例如下:

 

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
  <p id="pp">test---prototype</p>
  <p>test---jQuery</p>
  <script src="jquery-2.1.3.js" type="text/javascript"></script>
  <script src="prototype.js" type="text/javascript"></script>
  <script>
  jQuery(function()
  {
	  jQuery("p").click(function(){
		  alert(jQuery(this).text());
	  });
  });
  $("pp").style.display=‘none‘;
  </script>
 </body>
</html>



解决jQuery和其他库的冲突

标签:

原文地址:http://www.cnblogs.com/jingchenyong/p/4547375.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!