DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery $命名沖突解決方案匯總
jQuery $命名沖突解決方案匯總
編輯:JQuery特效代碼     

最近遇到個問題,同時引用了jquery庫和另外一個js庫。當用$XX去調用js庫函數時,發現失效了!於是找資料,原來是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="/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="/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="/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" "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="/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" "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="/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>

看,原來解決問題的方法可不止一個兩個呢,有需要的小伙伴們自己來取吧

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved