[程式][JQuery] 自己的第一個JQuery Plugin! Hello World。(Part_01)－四處流浪的阿基。I am Vagrant Walker

開始之前先說一些基本的概念。

首先，你要先新增一個function property在 jQuery.fn的物件後面。而這個function的名稱，就是你的plugin 的名稱。

$.fn.myPlugin = function() {

// 你的Plugin內容寫在這裡面。

};

但是請稍等一下，我們在JQuery中最常見的$符號呢？他一樣還是可以用，但是為了避免與其他像是JQuery的大型函式衝突，所以我們一般都會改寫程下面這樣。

(function( $ ){

$.fn.myPlugin = function() {

// 你的Plugin內容寫在這裡面。

}

})(jQuery);

接下來就可以開始編寫plug的內容了。但是在這裡有一個比較重要的觀念要先說。

(function( $ ){

        $.fn.myPlugin = function() {
               // there's no need to do $(this) because
               // "this" is already a jquery object
               // $(this) would be the same as $($('#element'));

              this.fadeIn('normal', function(){
                        // the this keyword is a DOM element
              })

        }

})(jQuery);

$('#element').myPlugin();

上面那個$.fn.myPlugin裡面的 this 就是以經是參照到他的父元件。換個方式說：函式裡的 this 關鍵字，它會指向一個 jQuery 物件；而這個 jQuery 物件則是我們要指定的，可以看後面的範例，可以了解比較多。

了解以上之後，就可以正式開始正式的第一步了。

Plugin 樣版

上面寫的看不懂沒關西，寫 jQuery 的 Plugin 最快的方法就是拿現成的 Plugin 來改，只是在那麼多的 Plugin 中怎麼找到好的範例呢？別擔心，這邊我提供一個最簡單的範例樣版：

(function( $ ){

    $.fn.mytoolbox = function() {
               return this.each(function() {    });
    };

})(jQuery)

首先， mytoolbox 就是我們的 plugin 名稱，利用 $.fn(JQuery.fn) 我們可以將它註冊為 jQuery 的 plugin 。然後我們把 $.fn.mytoolbox 指向一個匿名函式 (anonymous function) ，又稱為 callback ；而這個 callback 的內容很簡單，就是利用 jQuery 的 each 方法，來一一執行對應的動作。簡而言之，裡面的 this.each(function() { }); ，如果你寫過C語言，就有點像main()一樣，是所謂的主體。這個plugin被呼叫執行，就是會從這this.each開始運作。

簡易範例

mytoolbox.js

(function( $ ){

$.fn.mytoolbox = function() {
return this.each(function() {

alert("this.innerHTML:"+this.innerHTML);

});
};

})(jQuery)

index.html

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="mytoolbox.js"></script>
        <script>
            $(document).ready( function() {
                    $('#myDIV').mytoolbox();
            })
        </script>
    </head>
    <body>
        <div id="myDIV">Hello jQuery Plugin</div>
    </body>
</html>

這個範例就可以說明上面所說的意思。程式執行的時候，就是會先去跑 this.each 的函數。再看看裡面 alert(this.innerHTML)的this，參照到index.html，我們在第8行$('#myDIV').mytoolbox();所描述的。那個this.innerHTML的this是指向myDIV這個tag。所以在裡面this不用再加上$符號了。

但是這邊很重要，請注意看一下。雖然他是指向myDIV這個tag，你要是想用this.html()，這樣直接去顯示div的內容，是沒辦法的，因為this在這比較精確的說，是一個Javascript Object，一般的javascript 並沒有.html()這個方法。所以你想在裡面使用jQuery的語法，還是得要這麼寫。

mytoolbox.js

(function( $ ){

$.fn.mytoolbox = function() {
return this.each(function() {

                   alert("$(\"#\"+this.id).html():"+$("#"+this.id).html());
                    //或
                   alert("$(this).html():"+$(this).html());

});
};

})(jQuery)

完整範例下載：http://www.megaupload.com/?d=OW810VJK