jQuery noConflict() 方法

最新推荐文章于 2023-10-25 19:46:17 发布

书和咖啡

最新推荐文章于 2023-10-25 19:46:17 发布

阅读量246

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/ivenqin/article/details/119846009

版权

jQuery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

前面我们已经知道，jQuery 可以使用 $ 符号作为 jQuery 的简写，但是如果除了 jQuery 以外，其他的 JavaScript 框架也使用了 $ 符号作为简写，而我们又需要同时使用两种不同的框架，那么就可能导致脚本停止运行。而 jQuery 团队考虑到了这个问题，并实现了 noConflict() 方法。

其他一些 JavaScript 框架包括：Sammy、Ember、MooTools、Backbone、Knockout、Batman、Cappuccino、JavaScript MVC、Google Web Toolkit 等。

noConflict()方法的使用

noConflict() 方法会释放 $ 标识符的保留，以便其他脚本可以使用它。

我们使用 jQuery 可以直接编写全名而不是快捷方式，例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $.noConflict();
    jQuery(document).ready(function(){
      jQuery("button").click(function(){
        jQuery("#add").text("欢迎来到侠课岛！");
      });
  });
</script>
</head>
<body>
  <div id="add"></div>
  <p><button>点击添加</button></p>
</body>
</html>

演示效果：

但是我们也可以创建自己的快捷方式，noConflict() 方法返回对 jQuery 的引用，我们可以将它保留在变量中以便不时之需。例如：

var jq = $.noConflict();
    jq(document).ready(function(){
      jq("button").click(function(){
        jq("#add").text("欢迎来到侠课岛！");
      });
});

我们还可以将 $ 符号作为参数传递给 ready 方法，然后允许我们在函数中使用 $ 访问 jQuery，但是在它之外的地方我们就不得不使用 jQuery 了：

$.noConflict();
  jQuery(document).ready(function($){
    $("button").click(function(){
      $("#add").text("欢迎来到侠课岛！");
    });
});

上述三种写法最终的效果都是一样的。

书和咖啡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery noConflict() 方法

前面我们已经知道，jQuery 可以使用 $ 符号作为 jQuery 的简写，但是如果除了 jQuery 以外，其他的 JavaScript 框架也使用了 $ 符号作为简写，而我们又需要同时使用两种不同的框架，那么就可能导致脚本停止运行。而 jQuery 团队考虑到了这个问题，并实现了 noConflict() 方法。其他一些 JavaScript 框架包括：Sammy、Ember、MooTools、Backbone、Knockout、Batman、Cappuccino、JavaScript MVC、Go
复制链接

扫一扫