jQuery $命名沖突解決方案匯總
更新時間：2014年11月13日 12:05:18 投稿：hebedich
也許你在看此文章之前還不知道jquery有一個noConflict()東西了，它就是為了避免與其它js插件碰到相同變量的一個解決方法，利用noConflict()可以把變量存到其它指定的變量中去
最近遇到個問題，同時引用了jquery庫和另外一個js庫。當用$XX去調用js庫函數時，發(fā)現失效了！于是找資料，原來是jquery命名沖突了。因為許多JavaScript 庫使用$作為函數或變量名，jquery也一樣。其實$只是jquery的一個別名而已，假如我們需要使用jquery 之外的另一js庫，我們可以通過調用 $.noConflict() 向該庫返回控制權。下面是收集到解決這一問題的五種方案，總有一種你會用得上的。
例一：
復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <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="/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" " <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="/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" " <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="/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(){ //繼續(xù)使用 $ 方法
alert( $(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>
</body>
</html>
例四：
復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <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="/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(){ //繼續(xù)使用 $ 方法
alert($(this).text());
});
});
})(jQuery); //執(zhí)行匿名函數且傳遞實參jQuery
$("pp").style.display = 'none'; //使用prototype
</script>
</body>
</html>
例五：
復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>沖突解決5</title>
<!--先導入jQuery -->
<script src="/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>
</body>
</html>
看，原來解決問題的方法可不止一個兩個呢，有需要的小伙伴們自己來取吧
您可能感興趣的文章:
相關文章
這篇文章主要為大家詳細介紹了jQuery實現簡單評論區(qū)功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
在JS中設置節(jié)點的屬性與屬性值用到setAttribute(),獲得節(jié)點的屬性與屬性值用到getAttribute(),而在jquery中，只需要用到attr()這個函數就可以了。attr是attribute（屬性）的縮寫。2016-09-09
jQuery 3.0 的 setter和getter 模式詳解
這篇文章主要介紹了jQuery 3.0 的 setter和getter 模式詳解的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
這篇文章主要為大家詳細介紹了jquery實現廣告上下滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要為大家詳細介紹了用jQuery實現抽獎程序，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-04-04
jQuery EasyUI中DataGird動態(tài)生成列的方法
EasyUI中使用DataGird顯示數據列表中，有時需要根據需要顯示不同的列，例如，在權限管理中，不同的用戶登錄后只能查看自己權限范圍內的列表字段，這就需要DataGird動態(tài)組合列，下面介紹EasyUI中DataGird動態(tài)生成列的方法2016-04-04
下面小編就為大家?guī)硪黄猨Query頁面加載初始化的幾種方法(推薦)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
隨著DOM結構的復雜化和Ajax等動態(tài)腳本技術的運用，事件委托自然浮出了水面2011-11-11
這篇文章主要介紹了jQuery實現的放大鏡效果,結合實例形式分析了jQuery插件zoom.js實現放大鏡功能的相關操作技巧,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了一款基于jQuery的圖片場景標注提示彈窗特效,需要的朋友可以參考下2015-01-01