中国第一Ajax站长门户:www.okajax.com   虚拟主机 域名注册 云主机

与其他库一起使用jQuery - okajax.com - Ajax中国

我要投稿 会员登陆 RSS订阅 本站推荐:
您的位置主页 > Ajax技术 > Ajax框架学习 > jquery.js > 与其他库一起使用jQuery

与其他库一起使用jQuery

2009-09-16    文章来源:互联网    浏览次数:

概要:
在jQuery库,几乎所有的jQuery插件都被约束在它的命名空间里,通常,“global”对象同样被存储在jQuery命名空间里,因些不会使它与其它库(如:Prototype, MooTools, or YUI)发生冲突。
注意,jQuery用"$"作为它自身的默认快捷方式。

"$"的功能:
当jQuery与其它库被加载后,你也可以不顾它的默认快捷方式而在任意一处通过调用jQuery.noConflict()函数来指定使用jQuery库,例如:

  1. <html>     
  2. <head>     
  3.   <script src="prototype.js"></script>     
  4.   <script src="jquery.js"></script>     
  5.   <script>     
  6.     jQuery.noConflict();     
  7.          
  8.     // Use jQuery via jQuery(...)     
  9.     jQuery(document).ready(function(){     
  10.       jQuery("div").hide();     
  11.     });     
  12.          
  13.     // Use Prototype with $(...), etc.     
  14.     $('someid').style.display = 'none';     
  15.   </script>     
  16. </head>     
  17. <body></body>     
  18. </html>   

这将使$回到它的原始库里,你依然可以在其它的应用程序里使用"jQuery"。
另外,还有其它选项。如果你想确定jQuery不会与其它库冲突——但你又想自定义一个比较短快捷方式,你可以这么做:

  1. <html>     
  2. <head>     
  3.   <script src="prototype.js"></script>     
  4.   <script src="jquery.js"></script>     
  5.   <script>     
  6.     var $j = jQuery.noConflict();     
  7.          
  8.     // Use jQuery via $j(...)     
  9.     $j(document).ready(function(){     
  10.       $j("div").hide();     
  11.     });     
  12.          
  13.     // Use Prototype with $(...), etc.     
  14.     $('someid').style.display = 'none';     
  15.   </script>     
  16. </head>     
  17. <body></body>     
  18. </html>  

你能够自定义你自己的备用名称(如:jq、$J、awesomequery——可以是任何你想要的)。
如果你不想给jQuery自定义其它备用名称(你更愿意使用$而不管其它库的$方法)而又不想与其它库相冲突时,以下的解决方法最常使用的。

  1. <html>     
  2. <head>     
  3.   <script src="prototype.js"></script>     
  4.   <script src="jquery.js"></script>     
  5.   <script>     
  6.     jQuery.noConflict();     
  7.          
  8.     // Put all your code in your document ready area     
  9.     jQuery(document).ready(function($){     
  10.       // Do jQuery stuff using $     
  11.       $("div").hide();     
  12.     });     
  13.          
  14.     // Use Prototype with $(...), etc.     
  15.     $('someid').style.display = 'none';     
  16.   </script>     
  17. </head>     
  18. <body></body>     
  19. </html>   

对于你的大部分代码而言,这或许是最理想的方式,因为你可以以改变最少的代码来实现完全的兼容性。
参考:适合jQuery的快捷表示方式
如果你不喜欢总是键入完整的"jQuery",有一些可供替换的快捷方式:
重新指定jQuery为其它快捷方式

  1. var $j = jQuery;  

如果你想使用其它不同的库,这或许是最好的方法。
使用下列方法,可以指定在一块代码内使用"$":

  1. function($) { // some code that uses $ })(jQuery)   

备注:如果你使用了这种方法,在这块代码中你将不能使用"$"来调用Prototype方法,因为你选择了在这块代码中唯一使用jQuery方法。
使用以下方法来实现DOM ready event:

  1. jQuery(function($) { // some code that uses $ });   

备注:同样,在这个代码块里你也还有调用Prototype方法。

文章评论(查看全部)

看不清楚?单击换一张。
loading.. 评论加载中....
关于我们 - 广告服务 - 版权隐私 - 免责声明 - RSS地图 - 网站地图 - 使用帮助 - 返回顶部