jQuery
プラグイン

プラグイン - はじめに

jQuery APIは、プロトタイプを追加することで拡張できます。例えば、既存のAPIは、すでにそのような利用可能な多くの機能を有している.hide() .fadeIn() .hasClass()等

jQueryプロトタイプは$.fnで公開されています。ソースコードには行が含まれています

jQuery.fn = jQuery.prototype

このプロトタイプに関数を追加することで、構築されたjQueryオブジェクトからこれらの関数を呼び出すことができます（これはjQueryの各呼び出しで暗黙的に実行されます）。

構築されたjQueryオブジェクトは、渡されたセレクタに基づいて要素の内部配列を保持します。たとえば$('.active') .active $('.active')は呼び出し時にアクティブなクラスを持つ要素を保持するjQueryオブジェクトを作成します（これはライブの要素セットではありません）。

プラグイン関数内のthis値は、構築されたjQueryオブジェクトを参照します。その結果、 thisは一致したセットを表すために使用されます。

基本プラグイン ：

$.fn.highlight = function() {
    this.css({ background: "yellow" });
};

// Use example:
$("span").highlight();

jsFiddleの例

連鎖性と再利用性

上記の例とは異なり 、jQueryプラグインはChainableであると予想されます。
これは、 $(".warn").append("WARNING! ").css({color:"red"})ような同じ要素の集合に複数のメソッドを連結する可能性があることを意味し.css() .append()後の.css()メソッドは、両方のメソッドが同じ.warnコレクションに適用されます）

さまざまなカスタマイズオプションを渡す異なるコレクションで同じプラグインを使用できるようにすることは、 カスタマイズ/再利用性において重要な役割を果たします

(function($) {
  $.fn.highlight = function( custom ) {

    // Default settings
    var settings = $.extend({
        color : "",              // Default to current text color
        background : "yellow"    // Default to yellow background
    }, custom);

    return this.css({     // `return this` maintains method chainability
        color : settings.color,
        backgroundColor : settings.background
    });

  };
}( jQuery ));


// Use Default settings
$("span").highlight();    // you can chain other methods

// Use Custom settings
$("span").highlight({
    background: "#f00",
    color: "white"
});

jsFiddleデモ

自由

上記の例は、基本的なプラグインの作成を理解する範囲にあります。限られた一連のカスタマイズオプションに限定するのではなく、注意してください。

例えばハイライトされるテキスト文字列を渡すことができる.highlight()プラグインを作成し、スタイルに関して最大​​の自由度を.highlight()せたいとします。

//...
// Default settings
var settings = $.extend({
   text : "",          // text to highlight
   class : "highlight" // reference to CSS class
}, custom);

return this.each(function() {
   // your word highlighting logic here
});
//...

ユーザーは目的のテキストを渡し、カスタムCSSクラスを使用して追加のスタイルを完全に制御を持つことができます。

$("#content").highlight({
    text : "hello",
    class : "makeYellowBig"
});

jsFiddleの例

jQuery.fn.extend（）メソッド

このメソッドはjQueryプロトタイプ（$ .fn）オブジェクトを拡張し、jQuery（）関数に連鎖できる新しいカスタムメソッドを提供します。

例えば：

<div>Hello</div>
<div>World!</div>
 
<script>
jQuery.fn.extend({
  // returns combination of div texts as a result
  getMessage: function() {
    var result;
    // this keyword corresponds result array of jquery selection
    this.each(function() {
        // $(this) corresponds each div element in this loop
        result = result + " " + $(this).val();
    });
    return result;
  }
});
 
// newly created .getMessage() method
var message = $("div").getMessage();

// message = Hello World!
console.log(message); 
</script>