jQuery.fn
- 利用 jQuery.fn 宣告你的 jQuery plugin
- jQuery.fn 包含了所有 jQuery 內建的方法
- jQuery.fn. 後面接 plugin 名稱 => jQuery.fn.plugin_name
雛形
jQuery.fn.plugin_name = function() {
//plugin內容
};
- 要使用此 plugin 的工程師，只要選到 jQuery 物件後，接上 plugin 的名稱()就可以使用了
$("element").plugin_name();
舉例
jQuery.fn.setColor = function() {
this.css("color", "green");
};
$("a").setColor(); // Makes all the links green.
this
- 匿名函式裡的 this 關鍵字，它會指向一個 jQuery 物件；而這個 jQuery 物件則是我們要指定的
雛形
jQuery.fn.plugin_name = function() {
//plugin內容
return this.each(function() {});
};
舉例
jQuery.fn.myplugin = function() {
return this.each(function() {
alert(this.id);
});
};
<div id="myid1" class="myclass">123</div>
<div id="myid2" class="myclass">456</div>
<script>
$(".myclass").myplugin(); // alert("myid1") 和 alert("myid2")
</script>
立即函數
- 一直寫 “jQuery” 這幾個字實在是很累人的一件事；而且 jQuery 不是可以簡寫成 $ 號嗎？不能直接用嗎？當然可以，只是這樣可能會和其他 JavaScript Library 發生衝突
- 為了避免 $ 受到影響（全域變數污染），我們建立了立即函數（Immediately Invoked Function Expression）的作用域（scope），並將 jQuery 當作參數傳進去：
雛形
(function($) {
$.fn.plugin_name = function() {
//plugin 內容
return this.each(function() {});
};
})(jQuery);
- 定義完 function，閉包起來之後接 (jQuery)，就是定義且執行 function，稱為 IIFE(立即函數)
- 前面的 “;”，是因為怕和其他的 plugin 一起載入的時候，前面的人忘記寫 “;”，導致程式錯誤
- 事實上多寫 “;” 並不會有問題，少寫 “;” 才會有問題