欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2012年03月16日 23:04:54   作者:  
最近遇到個問題,同時引用了jquery庫和另外一個js庫。當用$XX去調用js庫函數時,發(fā)現失效了!于是找資料,原來是jquery命名沖突了
因為許多 JavaScript 庫使用 $ 作為函數或變量名,jquery也一樣。其實$只是jquery的一個別名而已,假如我們需要使用 jquery 之外的另一 js 庫,我們可以通過調用 $.noConflict() 向該庫返回控制權。下面是收集到解決這一問題的五種方案,總有一種你會用得上的。
例一:
復制代碼 代碼如下:

<!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(); //將變量$的控制權讓渡給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(); //將變量$的控制權讓渡給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(); //將變量$的控制權讓渡給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" "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 ,沒有必要調用"jQuery.noConflict()"函數。
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>
</body>
</html>

上述實例打包下載

相關文章

  • jquery 驗證用戶名是否重復代碼實例

    jquery 驗證用戶名是否重復代碼實例

    這篇文章主要介紹了jquery驗證用戶名是否重復,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-05-05
  • jQuery 文本框模擬下拉列表效果

    jQuery 文本框模擬下拉列表效果

    學校作業(yè)的問題,就在網搜了一下,找不到文本框模擬的(可能本人RP問題),看到的都是用div的,結果就自己弄了一個,主要就是改變背景圖片的位置,讓div的位置放到文本框上面,沒什么其它的東西,呵呵,見笑了
    2010-02-02
  • jquery UI實現autocomplete在獲取焦點時得到顯示列表功能示例

    jquery UI實現autocomplete在獲取焦點時得到顯示列表功能示例

    這篇文章主要介紹了jquery UI實現autocomplete在獲取焦點時得到顯示列表功能,結合實例形式分析了jquery UI實現autocomplete事件響應及顯示下拉列表功能操作技巧,需要的朋友可以參考下
    2019-06-06
  • 詳談jQuery Ajax(load,post,get,ajax)的用法

    詳談jQuery Ajax(load,post,get,ajax)的用法

    下面小編就為大家?guī)硪黄斦刯Query Ajax(load,post,get,ajax)的用法。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-03-03
  • jQuery 淡入/淡出效果函數用法分析

    jQuery 淡入/淡出效果函數用法分析

    這篇文章主要介紹了jQuery 淡入/淡出效果函數用法,結合實例形式分析了jQuery 淡入/淡出功能fadeIn()、fadeOut()、fadeToggle()及fadeTo()函數基本功能、使用方法與操作注意事項,需要的朋友可以參考下
    2020-05-05
  • jquery實現自定義樹形表格的方法【自定義樹形結構table】

    jquery實現自定義樹形表格的方法【自定義樹形結構table】

    這篇文章主要介紹了jquery實現自定義樹形表格的方法,結合實例形式分析了jQuery創(chuàng)建自定義樹形結構table的相關操作技巧,需要的朋友可以參考下
    2019-07-07
  • Web開發(fā)者必備的12款超贊jQuery插件

    Web開發(fā)者必備的12款超贊jQuery插件

    jQuery插件能夠增強網站的可用性,有效地改善用戶體驗,還可以大大減少創(chuàng)建一個新站點的開發(fā)時間。
    2010-12-12
  • jquery1.4 教程一 便利的設置函數

    jquery1.4 教程一 便利的設置函數

    jquery1.4已經發(fā)布了,1.4相對于1.32的改進還是非常巨大的,可以說是全面性的,性能也全面超越了1.32。這一周,將一一展示jquery1.4的改進,同時也會放出相應的demo。
    2010-02-02
  • jquery uploadify隱藏上傳進度的實現方法

    jquery uploadify隱藏上傳進度的實現方法

    下面小編就為大家?guī)硪黄猨query uploadify隱藏上傳進度的實現方法。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-02-02
  • jquery.pager.js實現分頁效果

    jquery.pager.js實現分頁效果

    這篇文章主要為大家詳細介紹了jquery.pager.js實現分頁效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-07-07

最新評論