快捷導(dǎo)航

Jquery命名沖突解決的五種方案分享

更新時(shí)間：2012年03月16日 23:04:54 作者：

最近遇到個(gè)問(wèn)題，同時(shí)引用了jquery庫(kù)和另外一個(gè)js庫(kù)。當(dāng)用$XX去調(diào)用js庫(kù)函數(shù)時(shí)，發(fā)現(xiàn)失效了！于是找資料，原來(lái)是jquery命名沖突了

因?yàn)樵S多 JavaScript 庫(kù)使用 $ 作為函數(shù)或變量名，jquery也一樣。其實(shí)$只是jquery的一個(gè)別名而已，假如我們需要使用 jquery 之外的另一 js 庫(kù)，我們可以通過(guò)調(diào)用 $.noConflict() 向該庫(kù)返回控制權(quán)。下面是收集到解決這一問(wèn)題的五種方案，總有一種你會(huì)用得上的。
例一：

復(fù)制代碼代碼如下:

 
<!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> 

例二：

復(fù)制代碼代碼如下:

 
<!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(); //自定義一個(gè)比較短快捷方式 
$j(function(){ //使用jQuery 
$j("p").click(function(){ 
alert( $j(this).text() ); 
}); 
}); 
$("pp").style.display = 'none'; //使用prototype 
</script> 
</body> 
</html> 

例三：

復(fù)制代碼代碼如下:

 
<!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> 

例四：

復(fù)制代碼代碼如下:

 
<!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ù)并設(shè)置形參為$ 
$(function(){ //匿名函數(shù)內(nèi)部的$均為jQuery 
$("p").click(function(){ //繼續(xù)使用 $ 方法 
alert($(this).text()); 
}); 
}); 
})(jQuery); //執(zhí)行匿名函數(shù)且傳遞實(shí)參jQuery 
$("pp").style.display = 'none'; //使用prototype 
</script> 
</body> 
</html> 

例五：

復(fù)制代碼代碼如下:

 
<!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> 
<!--先導(dǎo)入jQuery --> 
<script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script> 
<!--后導(dǎo)入其他庫(kù) --> 
<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 ,沒(méi)有必要調(diào)用"jQuery.noConflict()"函數(shù)。 
jQuery("p").click(function(){ 
alert( jQuery(this).text() ); 
}); 
}); 
$("pp").style.display = 'none'; //使用prototype 
</script> 
</body> 
</html> 