脚本宝典收集整理的这篇文章主要介绍了js實例教程-Jquery命名衝突解決的五種方案分享，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小寶典致力於為廣大程序猿（媛）提供高品質的代碼服務，請大家多多光顧小站，小寶典在此謝過。
因為許多 JavaScript 庫使用 $ 作為函數或變量名，jquery也一樣。其實$只是jquery的一個別名而已，假如我們需要使用 jquery 之外的另一 js 庫，我們可以通過調用 $.noConflict() 向該庫返回控制權。下面是收集到解決這一問題的五種方案，總有一種你會用得上的。
例一：
代碼如下:
<!DOCTYPE htML PubLIC "-//W3C//DTD XHTML 1.0 TransITional//EN" "https://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="https://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(); //將變量$的控制權讓渡給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" "https://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="https://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" "https://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="https://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(); //將變量$的控制權讓渡給prototype.js
jQuery(function($){ //使用jQuery
$("p").click(function(){ //繼續使用 $ 方法
alert( $(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>
</body>
</html>
. 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://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="https://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(); //將變量$的控制權讓渡給prototype.js
(function($){ //定義匿名函數並設置形參為$
$(function(){ //匿名函數內部的$均為jQuery
$("p").click(function(){ //繼續使用 $ 方法
alert($(this).text());
});
});
})(jQuery); //執行匿名函數且傳遞實參jQuery
$("pp").style.display = 'none'; //使用prototype
</script>
</body>
</html>
. 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://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="https://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 ,沒有必要調用"jQuery.noConflict()"函數。
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>
<lt;/body>
</html>
因為許多 JavaScript 庫使用 $ 作為函數或變量名，jquery也一樣。其實$只是jquery的一個別名而已，假如我們需要使用 jquery 之外的另一 js 庫，我們可以通過調用 $.noConflict() 向該庫返回控制權。下面是收集到解決這一問題的五種方案，總有一種你會用得上的。
例一：
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://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="https://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(); //將變量$的控制權讓渡給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" "https://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="https://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" "https://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="https://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(); //將變量$的控制權讓渡給prototype.js
jQuery(function($){ //使用jQuery
$("p").click(function(){ //繼續使用 $ 方法
alert( $(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>
</body>
</html>
. 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://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="https://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(); //將變量$的控制權讓渡給prototype.js
(function($){ //定義匿名函數並設置形參為$
$(function(){ //匿名函數內部的$均為jQuery
$("p").click(function(){ //繼續使用 $ 方法
alert($(this).text());
});
});
})(jQuery); //執行匿名函數且傳遞實參jQuery
$("pp").style.display = 'none'; //使用prototype
</script>
</body>
</html>
. 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://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="https://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 ,沒有必要調用"jQuery.noConflict()"函數。
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>
<lt;/body>
</html>
覺得可用，就經常來吧！Javascript技巧 腳本寶典 歡迎評論哦！ js技巧，巧奪天工，精雕玉琢。小寶典獻醜了！
以上是脚本宝典为你收集整理的js實例教程-Jquery命名衝突解決的五種方案分享全部内容，希望文章能够帮你解决js實例教程-Jquery命名衝突解決的五種方案分享所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。