jQuery noConflict() 方法

語言: CN / TW / HK

時間 2021-09-09 02:01:15 彩色泡泡糖

前面我們已經知道，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("歡迎來到俠課島！");
    });
});

上述三種寫法最終的效果都是一樣的。

「其他文章」