解决jQuery和其他库的冲突

 

如果你的项目中有多种 JavaScript 库,比如同时存在 prototype.js jquery.js 。为了避免 $ 对象的冲突,我们可以使用 jQuery 中的 .noConflict() 来解决冲突,需要注意引入 JavaScript 库的顺序。

jQuery库在其他库之后导入:

写法 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <!-- 引入 Prototype  -->
        <script src="prototype-1.6.0.2.js" type="text/javascript"></script>
        <!-- 引入 jQuery  -->
        <script src="../scripts/jquery-1.2.6.js" type="text/javascript"></script>
        <script type="text/javascript">
            jQuery.noConflict();				//将变量$的控制权让渡给prototype.js
            jQuery(function(){					//使用jQuery
                jQuery("p").css("color","red");		//使用jQuery
                $("pp").style.display = "none";	//这里的$符号是Prototype的方法
            });
        </script>
    </head>
    <body>
        <p id="pp">testpp<p>
        <p>test<p>
    </body>
</html>

 

    写法2:

 

var $j = jQuery.noConflict();          //自定义一个快捷方式
$j(function(){                                 //使用jQuery,利用自定义快捷方式——$j
       $j("p").click(function(){
              alert($(this).text());
        })
})
$("pp").style.display = 'none';        //使用prototype

 

    写法3:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <!-- 引入 jQuery  -->
        <script src="../scripts/jquery-1.2.6.js" type="text/javascript"></script>
        <!-- 引入 Prototype  -->
        <script src="prototype-1.6.0.2.js" type="text/javascript"></script>
        <script type="text/javascript">
            jQuery(function($){
                $("p").css("color","red");			//函数内部的$还是jQuery的$。
            });
            $("pp").style.display = "none";		//函数外部的$是Prototype的$。
        </script>
    </head>
    <body>
        <p id="pp">testpp<p>
        <p>test<p>
    </body>
</html>

 

   写法4:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <!-- 引入 jQuery  -->
        <script src="../scripts/jquery-1.2.6.js" type="text/javascript"></script>
        <!-- 引入 Prototype  -->
        <script src="prototype-1.6.0.2.js" type="text/javascript"></script>
        <script type="text/javascript">
            (function($){
               $("p").css("color","red");			//函数内部的$还是jQuery的$。
            })(jQuery);            
            $("pp").style.display = "none";		//函数外部的$是Prototype的$。
        </script>
    </head>
    <body>
        <p id="pp">testpp<p>
        <p>test<p>
    </body>
</html>
 

jQuery库在其他库之前导入:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <!-- 引入 jQuery  -->
        <script src="../scripts/jquery-1.2.6.js" type="text/javascript"></script>
        <script language="javascript">
            jQuery.noConflict();					//将变量$的控制权让渡给prototype.js
            jQuery(function(){					//使用jQuery
                jQuery("p").css("color","red");	//使用jQuery
                $("pp").style.display = "none";	//这里的$符号是Prototype的方法。
            });
        </script>
        <!-- 引入 Prototype  -->
        <script src="prototype-1.6.0.2.js" type="text/javascript"></script>
    </head>
    <body>
        <p id="pp">testpp<p>
        <p>test<p>
    </body>
</html>
 

你可能感兴趣的:(jquery)