jQuery noConflict() 方法
前面我們已經知道,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("歡迎來到俠課島!");
});
});
上述三種寫法最終的效果都是一樣的。
「其他文章」