zoukankan      html  css  js  c++  java

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

    因为许多 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>
  • 相关阅读:
    库函数strstr的实现
    用两个队列实现一个栈
    二叉树的镜像
    VMware网络连接模式—桥接、NAT以及仅主机模式的详细介绍和区别
    CentOS6.5下搭建Samba服务实现与Windows系统之间共享文件资源
    CentOS6.5下搭建ftp服务器（三种认证模式：匿名用户、本地用户、虚拟用户）
    CentOS6.5下搭建VNC服务器
    MySQL数据库自动备份
    MySql登陆密码忘记了怎么办？MySQL重置root密码方法
    CentOS6.5使用yum快速搭建LAMP环境
  • 原文地址：https://www.cnblogs.com/missguolf/p/8186335.html
Copyright © 2011-2022 走看看