基本的なプラグインを作成する方法

典型的なプラグインのコードは次のとおりです.

(function($){
    $.fn.myNewPlugin = function() {
        return this.each(function(){
            //     ...
        });
    };
}(jQuery));

 
あの数行のコードは、あなたを酔わせていませんか?実は中のポイントはjQueryのprototypeオブジェクトを拡張することです.次の行を見てください.

$.fn.myNewPlugin = function() { //...

ここでは、インスタント実行関数の内部に配置します.

(function($){
    //...
}(jQuery));

これは、プライベートscopeを作成するためであり、このプライベートscope内部で$拡張jQueryを安全に使用することができ、$が他のjsライブラリに書き換えられる心配はありません.
実際のプラグインコードは次のとおりです.

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

 
新しいプラグインでは、キーワードthisは、このプラグインを呼び出すjQueryオブジェクトを指す.

var somejQueryObject = $('#something');

$.fn.myNewPlugin = function() {
    alert(this === somejQueryObject);
};

somejQueryObject.myNewPlugin(); // alerts 'true'

 
典型的なjQueryオブジェクトは任意の複数のDOMオブジェクトを含むが、これもjQueryオブジェクトがDOMオブジェクトセットと見なされる理由である.
したがって,オブジェクトセットに対して操作を行うにはそれを遍歴する必要があり,jQueryのeach()法により容易に実現した.

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

 
jQueryの他の方法と同様に、each()方法もjQueryオブジェクトを返し、これは私たちがよく知っているチェーン式の書き方($(...).css().attr()...)を達成しました.私たちはこのような慣例を破壊すべきではありません.そこで、私たちもthisのオブジェクトに戻るべきです.ループの内部では、要素ごとにやるべきことをすることができます.上記で説明したように、次は小さなプラグインの例です.

(function($){
    $.fn.showLinkLocation = function() {
        return this.filter('a').each(function(){
            $(this).append(
                ' (' + $(this).attr('href') + ')'
            );
        });
    };
}(jQuery));
    
//     :
$('a').showLinkLocation();

 
このコンパクトなプラグインは、セット内のすべてのリンクのhref属性値をカッコに含め、その要素の内容として表示することができる.

<!--       : -->
<a href="page.html">Foo</a>
    
<!--   : -->
<a href="page.html">Foo (page.html)</a>

簡単ですが、このプラグインは最適化できます.

(function($){
    $.fn.showLinkLocation = function() {
        return this.filter('a').append(function(){
              return ' (' + this.href + ')';
        });
    };
}(jQuery));

  append法を用いて,パラメータとしてコールバック関数を受け入れ,追加する内容としてコールバック関数の戻り値を用いることができる.また,attr法によりhrefの属性値を取得するのではなく,内蔵のDOM API,アクセス要素のhref属性を直接使用して取得することにも注目できる.
次は別の例です.each()メソッドでループする必要はありません.単純に別のjQueryメソッドに直接委任します.

(function($){
    $.fn.fadeInAndAddClass = function(duration, className) {
        return this.fadeIn(duration, function(){
            $(this).addClass(className);
        });
    };
}(jQuery));

 

    
//     :
$('a').fadeInAndAddClass(400, 'finishedFading');