当前位置：首页 > news >正文

Jquery命名冲突解决的五种方案

news 来源：原创 2024/5/19 2:08:55

因为许多 JavaScript 库使用 $ 作为函数或变量名，jquery也一样。其实$只是jquery的一个别名而已，假如我们需要使用 jquery 之外的另一 js 库，我们可以通过调用 $.noConflict() 向该库返回控制权。

例1：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>冲突解决1</title>
 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 </head>
11 <body>
12 <p id="pp">test---prototype</p>
13 <p >test---jQuery</p>
14 
15 <script type="text/javascript">
16 jQuery.noConflict();                //将变量$的控制权让渡给prototype.js
17 jQuery(function(){                    //使用jQuery
18     jQuery("p").click(function(){
19         alert( jQuery(this).text() );
20     });
21 });
22 
23 $("pp").style.display = 'none';        //使用prototype
24 </script>
25 
26 </body>
27 </html>

例2：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>冲突解决2</title>
 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 </head>
11 <body>
12 <p id="pp">test---prototype</p>
13 <p >test---jQuery</p>
14 
15 <script type="text/javascript">
16 var $j = jQuery.noConflict();        //自定义一个比较短快捷方式
17 $j(function(){                        //使用jQuery
18     $j("p").click(function(){
19         alert( $j(this).text() );
20     });
21 });
22 
23 $("pp").style.display = 'none';        //使用prototype
24 </script>
25 </body>
26 </html>

例3:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>冲突解决3</title>
 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 </head>
11 <body>
12 <p id="pp">test---prototype</p>
13 <p >test---jQuery</p>
14 
15 <script type="text/javascript">
16 jQuery.noConflict();                //将变量$的控制权让渡给prototype.js
17 jQuery(function($){                    //使用jQuery
18     $("p").click(function(){        //继续使用 $ 方法
19         alert( $(this).text() );
20     });
21 });
22 
23 $("pp").style.display = 'none';        //使用prototype
24 </script>
25 
26 </body>
27 </html>

例4：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>冲突解决4</title>
 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 </head>
11 <body>
12 <p id="pp">test---prototype</p>
13 <p >test---jQuery</p>
14 
15 <script type="text/javascript">
16 jQuery.noConflict();                //将变量$的控制权让渡给prototype.js
17 (function($){                        //定义匿名函数并设置形参为$
18     $(function(){                    //匿名函数内部的$均为jQuery
19         $("p").click(function(){    //继续使用 $ 方法
20             alert($(this).text());
21         });
22     });
23 })(jQuery);                            //执行匿名函数且传递实参jQuery
24 
25 $("pp").style.display = 'none';        //使用prototype
26 </script>
27 
28 </body>
29 </html>

例5：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>冲突解决5</title>
 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 </head>
11 <body>
12 <p id="pp">test---prototype</p>
13 <p >test---jQuery</p>
14 
15 <script type="text/javascript">
16 jQuery(function(){   //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。
17     jQuery("p").click(function(){      
18         alert( jQuery(this).text() );
19     });
20 });
21 
22 $("pp").style.display = 'none'; //使用prototype
23 </script>
24 </body>
25 </html>