jQuery noConflict() 方法

如果您在页面上使用其他框架，同时仍然使用 jQuery，可能会出现冲突，这时候该怎么办？

jQuery 与其他 JavaScript 框架

正如你已经知道的，jQuery 使用 $ 符号作为 jQuery 的简写方式。

还有许多其他流行的 JavaScript 框架，比如：Angular、Backbone、Ember、Knockout 等等。

如果其他 JavaScript 框架也使用 $ 符号作为简写呢？

如果两个不同的框架使用相同的简写，其中一个可能会无法正常运行。

jQuery 团队已经考虑过这一点，并实现了 noConflict() 方法。

jQuery noConflict() 方法

noConflict() 方法释放了 $ 简写标识符，以便其他脚本可以使用它。

当然，您仍然可以使用 jQuery，只需编写全名 jQuery 而不是简写 $:

实例

<!DOCTYPE html>
<html>
<head>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍然在运行!");
  });
});
</script>
</head>
<body>
<p>这是一个段落</p>
<button>测试 jQuery</button>
</body>
</html>

运行一下

您也可以很容易地创建自己的简写。noConflict() 方法返回对 jQuery 的引用，您可以将其保存在变量中，供以后使用。下面是一个例子:

实例

<!DOCTYPE html>
<html>
<head>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍然在运行!");
  });
});
</script>
</head>
<body>
<p>这是一个段落</p>
<button>测试 jQuery</button>
</body>
</html>

运行一下

如果您有一块使用 $ 简写的 jQuery 代码，并且不想全部更改，那么可以将 $ 符号作为参数传递给 ready 方法。这让您可以在该函数内部使用 $ 访问 jQuery，在函数外部，您必须使用 jQuery:

实例

<!DOCTYPE html>
<html>
<head>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍然在运行!");
  });
});
</script>
</head>
<body>
<p>这是一个段落</p>
<button>测试 jQuery</button>
</body>
</html>

运行一下

jQuery Misc 参考

有关所有 jQuery Misc 方法的完整概述，请访问本站的 jQuery Misc 参考

jQuery noConflict() 方法

jQuery 与其他 JavaScript 框架

jQuery noConflict() 方法

实例

实例

实例

jQuery Misc 参考

分类导航