jQuery 随笔 之 与其他JS库冲突的解决

     在jQuery库中，几乎所有的插件都被限制在它的命名空间里。通常，全局（global）对象都被很好地存储在jQuery命名空间里，一起jQuery和其他JS库一起使用时，不会引起冲突。

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

<script src="js/prototype.js"></script>

<script src="js/jQuery.js"></script>

          默认情况下，jQuery用$作为自己的快捷方式。

         在其他库和jQuery库都被加载完毕后，可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权移交给其他JS库。

      a、将jQuery（）函数作为jQuery对象的制造工厂。

<script>
       jQuery.noConflict();      //将变量$的控制权移交给prototype.js
       jQuery(function(){   //使用jQuery
               jQuery('p').click(funciton(){
                      alert(jQuery(this).text() );
               });
       });
       
       $('p').style.display = 'none';     //使用prototype
</script>

        b、不产生冲突，同时自定义快捷方式

<script>
     var $j =   jQuery.noConflict();      //将变量$的控制权移交给prototype.js
       $j(function(){   //使用jQuery
               $j('p').click(funciton(){
                      alert($j(this).text() );
               });
       });

       $('p').style.display = 'none';     //使用prototype

</script>

        c、不产生冲突，还要继续使用$，两种方法：

<script>
     jQuery.noConflict();      //将变量$的控制权移交给prototype.js
       jQuery(function($){   //使用jQuery
               $('p').click(funciton(){
                      alert($(this).text() );
               });
       });
 
       
      $('p').style.display = 'none';     //使用prototype

</script>

<script>
     jQuery.noConflict();      //将变量$的控制权移交给prototype.js
       (function($){   //使用jQuery
               $('p').click(funciton(){
                      alert($(this).text() );
               });
       })(jQuery);

      
      $('p').style.display = 'none';     //使用prototype

</script>

*这是最理想的方式，可以通过改变最少的代码实现兼容性。

       2、jQuery在其他库之前导入 

<script src="js/jQuery.js"></script>

<script src="js/prototype.js"></script>

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

<script>
       jQuery(function(){   //使用jQuery
               jQuery('p').click(funciton(){
                      alert(jQuery(this).text() );
               });
       });
       
       $('p').style.display = 'none';     //使用prototype
</script>

<script>
       $(function(){   //使用jQuery
               $('p').click(funciton(){
                      alert($(this).text() );
               });
       });

       $('p').style.display = 'none';     //使用prototype

</script>

<script>
       jQuery(function($){   //使用jQuery
               $('p').click(funciton(){
                      alert($(this).text() );
               });
       });
 
       
      $('p').style.display = 'none';     //使用prototype

</script>

<script>
       (function($){   //使用jQuery
               $('p').click(funciton(){
                      alert($(this).text() );
               });
       })(jQuery);

      
      $('p').style.display = 'none';     //使用prototype

</script>