jQuery No-Conflict 方法
在本教程中，您将学习如何避免 jQuery 与其他 JavaScript 库或框架之间的冲突。
将 jQuery 与其他 JavaScript 库一起使用
如您所知，jQuery 使用美元符号 ($) 作为 jQuery 的快捷方式或别名。 因此，如果您使用另一个也使用 $ 符号作为快捷方式的 JavaScript 库以及同一页面上的 jQuery 库，则可能会发生冲突。 幸运的是，jQuery 提供了一个名为 noConflict() 的特殊方法来处理这种情况。
jQuery noConflict() 方法
jQuery.noConflict() 方法将 $ 标识符的控制权返回给其他库。 以下示例（line no-10）中的 jQuery 代码会在 jQuery 加载到页面后立即将其置于无冲突模式，并分配一个新的变量名 $j 来替换 $ 别名，以避免与原型框架发生冲突。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery noConflict() Demo</title>
<script src="js/prototype.js"></script>
<script src="js/jquery.js"></script>
<script>
// 为 jQuery 定义新别名
var $j = jQuery.noConflict();
$j(document).ready(function(){
// 单击 ID 为 foo 的元素时显示警告消息
$j("#foo").click(function(){
alert("jQuery is working well with prototype.");
});
});
// 一些原型框架代码
document.observe("dom:loaded", function(){
// Display an alert message when the element with ID bar is clicked
$("bar").observe("click", function(event){
alert("Prototype is working well with jQuery.");
});
});
</script>
</head>
<body>
<button type="button" id="foo">Run jQuery Code</button>
<button type="button" id="bar">Run Prototype Code</button>
</body>
</html>但是，如果您不想为 jQuery 定义另一个快捷方式，可能是因为您不想修改现有的 jQuery 代码，或者您真的喜欢使用 $，因为它节省时间且易于使用，那么您可以采用另一个 快速接近 只需将 $ 作为参数传递给您的 jQuery(document).ready() 函数，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery noConflict() Demo</title>
<script src="js/prototype.js"></script>
<script src="js/jquery.js"></script>
<script>
jQuery.noConflict();
jQuery(document).ready(function($){
// 这里的美元符号是 jQuery 的别名
$("#foo").click(function(){
alert("jQuery is working well with prototype.");
});
});
// 一些原型框架代码
document.observe("dom:loaded", function(){
// 全局范围内的美元符号是指原型
$("bar").observe("click", function(event){
alert("Prototype is working well with jQuery.");
});
});
</script>
</head>
<body>
<button type="button" id="foo">Run jQuery Code</button>
<button type="button" id="bar">Run Prototype Code</button>
</body>
</html>在其他库之前包含 jQuery
上述避免冲突的解决方案依赖于在加载prototype.js之后加载jQuery。 但是，如果您在其他库之前包含 jQuery，您可以在 jQuery 代码中使用全名 jQuery 以避免冲突而不调用 jQuery.noConflict()。 但在这种情况下，$ 将具有其他库中定义的含义。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery noConflict() Demo</title>
<script src="js/jquery.js"></script>
<script src="js/prototype.js"></script>
<script>
jQuery(document).ready(function($){
// 使用完整的 jQuery 函数名称来引用 jQuery
jQuery("#foo").click(function(){
alert("jQuery is working well with prototype.");
});
});
// 一些原型框架代码
document.observe("dom:loaded", function(){
// 这里的美元符号将具有原型中定义的含义
$("bar").observe("click", function(event){
alert("Prototype is working well with jQuery.");
});
});
</script>
</head>
<body>
<button type="button" id="foo">Run jQuery Code</button>
<button type="button" id="bar">Run Prototype Code</button>
</body>
</html>Advertisements