jQuery命名沖突解決的五種方案

作者：ForEvErNoMe 2012-03-29 09:57:06

最近遇到個問題，同時引用了jquery庫和另外一個js庫。當用$XX去調(diào)用js庫函數(shù)時，發(fā)現(xiàn)失效了！于是找資料，原來是jquery命名沖突了。下面是收集到解決這一問題的五種方案，總有一種你會用得上的。

引言：

　　最近遇到個問題，同時引用了jquery庫和另外一個js庫。當用$XX去調(diào)用js庫函數(shù)時，發(fā)現(xiàn)失效了！于是找資料，原來是jquery命名沖突了。因為許多JavaScript 庫使用$作為函數(shù)或變量名，jquery也一樣。其實$只是jquery的一個別名而已，假如我們需要使用jquery 之外的另一js庫，我們可以通過調(diào)用 $.noConflict() 向該庫返回控制權(quán)。下面是收集到解決這一問題的五種方案，總有一種你會用得上的。

例一：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>沖突解決1</title> 
<!-- 引入 prototype  --> 
<script src="prototype-1.6.0.3.js" type="text/javascript"></script> 
<!-- 引入 jQuery  --> 
<script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script> 
</head> 
<body> 
<p id="pp">test---prototype</p> 
<p >test---jQuery</p> 
 
<script type="text/javascript"> 
jQuery.noConflict();                //將變量$的控制權(quán)讓渡給prototype.js  
jQuery(function(){                    //使用jQuery  
    jQuery("p").click(function(){  
        alert( jQuery(this).text() );  
    });  
});  
 
$("pp").style.display = 'none';        //使用prototype  
</script> 
 
</body> 
</html>

例二：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>沖突解決2</title> 
<!-- 引入 prototype  --> 
<script src="prototype-1.6.0.3.js" type="text/javascript"></script> 
<!-- 引入 jQuery  --> 
<script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script> 
</head> 
<body> 
<p id="pp">test---prototype</p> 
<p >test---jQuery</p> 
 
<script type="text/javascript"> 
var $j = jQuery.noConflict();        //自定義一個比較短快捷方式  
$j(function(){                        //使用jQuery  
    $j("p").click(function(){  
        alert( $j(this).text() );  
    });  
});  
 
$("pp").style.display = 'none';        //使用prototype  
</script> 
</body> 
</html>

例三：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>沖突解決3</title> 
<!-- 引入 prototype  --> 
<script src="prototype-1.6.0.3.js" type="text/javascript"></script> 
<!-- 引入 jQuery  --> 
<script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script> 
</head> 
<body> 
<p id="pp">test---prototype</p> 
<p >test---jQuery</p> 
 
<script type="text/javascript"> 
jQuery.noConflict();                //將變量$的控制權(quán)讓渡給prototype.js  
jQuery(function($){                    //使用jQuery  
    $("p").click(function(){        //繼續(xù)使用 $ 方法  
        alert( $(this).text() );  
    });  
});  
 
$("pp").style.display = 'none';        //使用prototype  
</script> 
 
</body> 
</html>

例四：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>沖突解決4</title> 
<!-- 引入 prototype  --> 
<script src="prototype-1.6.0.3.js" type="text/javascript"></script> 
<!-- 引入 jQuery  --> 
<script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script> 
</head> 
<body> 
<p id="pp">test---prototype</p> 
<p >test---jQuery</p> 
 
<script type="text/javascript"> 
jQuery.noConflict();                //將變量$的控制權(quán)讓渡給prototype.js  
(function($){                        //定義匿名函數(shù)并設置形參為$  
    $(function(){                    //匿名函數(shù)內(nèi)部的$均為jQuery  
        $("p").click(function(){    //繼續(xù)使用 $ 方法  
            alert($(this).text());  
        });  
    });  
})(jQuery);                            //執(zhí)行匿名函數(shù)且傳遞實參jQuery  
 
$("pp").style.display = 'none';        //使用prototype  
</script> 
 
</body> 
</html>

例五：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>沖突解決5</title> 
<!--先導入jQuery --> 
<script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script> 
<!--后導入其他庫 --> 
<script src="prototype-1.6.0.3.js" type="text/javascript"></script> 
</head> 
<body> 
<p id="pp">test---prototype</p> 
<p >test---jQuery</p> 
 
<script type="text/javascript"> 
jQuery(function(){   //直接使用 jQuery ,沒有必要調(diào)用"jQuery.noConflict()"函數(shù)。  
    jQuery("p").click(function(){        
        alert( jQuery(this).text() );  
    });  
});  
 
$("pp").style.display = 'none'; //使用prototype  
</script> 
</body> 
</html>

下載地址：http://down.51cto.com/data/359023

原文鏈接：http://www.cnblogs.com/ForEvErNoME/archive/2012/03/15/2398659.html

【編輯推薦】

12個必要的jQuery表單插件
一些非常棒的jQuery拖放插件
10條建議讓你創(chuàng)建更好的jQuery插件
jQuery LigerUI使用教程入門篇
利用jQuery marquee實現(xiàn)響應設計

責任編輯：林師授來源： ForEvErNoMe的博客

jQuery