web-dev-qa-db-ja.com

JQuery関数（新しいjQueryメソッドまたはプラグイン）を作成する方法

JavaScriptの構文は次のとおりです。

function myfunction(param){
  //some code
}

要素に追加できるjQueryで関数を宣言する方法はありますか？例えば：

$('#my_div').myfunction()
javascriptjqueryfunction
189
multimediaxp

ドキュメント ：から：

(function( $ ){
   $.fn.myfunction = function() {
      alert('hello world');
      return this;
   }; 
})( jQuery );

それからあなたは

$('#my_div').myfunction();
264
Candide

あなたがすでに受け取ったすべての答えにもかかわらず、あなたが関数でjQueryを使うためにプラグインを書く必要がないことは注目に値します。確かに、それが単純で一回きりの機能であれば、プラグインを書くのはやり過ぎだと思います。 セレクタをパラメータとして関数に渡すだけで、はるかに簡単に実行できます 。あなたのコードは次のようになります。

function myFunction($param) {
   $param.hide();  // or whatever you want to do
   ...
}

myFunction($('#my_div'));

変数名$の$paramは必須ではありません。その変数にjQueryセレクターが含まれていることを覚えやすくするのは私の習慣です。 paramを使うこともできます。

69
Pevara

plethora がドキュメント/チュートリアルの中にありますが、あなたの質問に対する簡単な答えはこれです：

// to create a jQuery function, you basically just extend the jQuery prototype
// (using the fn alias)

$.fn.myfunction = function () {
    // blah
};

その関数内で、this変数は、関数を呼び出したjQueryラップセットに対応しています。だから、のようなもの：

$.fn.myfunction = function () {
    console.log(this.length);
};

$('.foo').myfunction();

...クラスfooを持つ要素の数をコンソールにフラッシュします。

もちろん、それ以外にも（ベストプラクティス、そしてすべてのジャズと同様に）セマンティクスに関するものが多少ありますので、必ず読んでください。

36
Richard Neil Ilagan

関数をjQueryオブジェクトで使用できるようにするには、この関数をjQueryプロトタイプに追加します（fnはjQueryのプロトタイプのショートカットです）。

jQuery.fn.myFunction = function() {
    // Usually iterate over the items and return for chainability
    // 'this' is the elements returns by the selector
    return this.each(function() { 
         // do something to each item matching the selector
    }
}

これは通常 jQueryプラグイン と呼ばれます。

例 - http://jsfiddle.net/VwPrm/

11
Richard Dalton

うん - あなたが説明しているのはjQueryプラグインだ。

JQueryプラグインを作成するには、JavaScriptで関数を作成し、それをオブジェクトjQuery.fnのプロパティに割り当てます。

例えば。

jQuery.fn.myfunction = function(param) {
    // Some code
}

プラグイン関数内で、thisname__キーワードは、プラグインが呼び出されたjQueryオブジェクトに設定されています。だから、あなたがするとき：

$('#my_div').myfunction()

その後、thisname__内のmyfunctionname__は、$('#my_div')によって返されるjQueryオブジェクトに設定されます。

全文は http://docs.jquery.com/Plugins/Authoring を参照してください。

7
Paul D. Waite
$(function () {
    //declare function 
    $.fn.myfunction = function () {
        return true;
    };
});

$(document).ready(function () {
    //call function
    $("#my_div").myfunction();
});
7
user1619962

extend （jQueryプラグインを作成する方法）を使うこともできます。

$.fn.extend(
{
    myfunction: function () 
    {
    },

    myfunction2: function () 
    {
    }
});

使用法：

$('#my_div').myfunction();
5
Novasol

はい、jqueryを使って選択された要素に適用するメソッドはjqueryプラグインと呼ばれ、 オーサリングに関する十分な情報があります jqueryのドキュメント内にあります.

そのjquery は 単なるjavascriptであることに注意する価値があるので、「jqueryメソッド」について特別なことは何もありません。

4
Jamiec

あなたは以下のようにあなた自身のjQueryプラグイン（選ばれた要素で呼ばれることができる機能）を書くことができます：

（function（$）{
 $ .fn.myFunc = function（param1、param2）{
 // this  -  jqueryオブジェクトは選択した要素を保持します
} [.____。 （jQuery）;


後でそれを呼び出します：

$（ 'div'）。myFunc（1、null）;
4
Michael

あなたはいつでもこれをすることができます：

jQuery.fn.extend({
   myfunction: function(param){
       // code here
   },
});
OR
jQuery.extend({
   myfunction: function(param){
       // code here
   },
});
$(element).myfunction(param);
2
user8903269

「colorize」メソッドを作成します。

$.fn.colorize = function custom_colorize(some_color) {
    this.css('color', some_color);
    return this;
}

これを使って：

$('#my_div').colorize('green');

この簡単な例は、jQueryのドキュメントで 基本プラグインの作成方法 の長所を組み合わせ、 @ Candid 、 @ Michael から答えています。

1
Bob Stein

JQueryで関数を作る最も簡単な例は

jQuery.fn.extend({
    exists: function() { return this.length }
});

if($(selector).exists()){/*do something here*/}
1
ChintanThummar

プロトタイプを介してjQueryオブジェクトを拡張したいようです（別名 jQueryプラグインの作成 ）。これは、jQuery関数（$(selector/DOM element)）を呼び出すことによって作成されたすべての新しいオブジェクトがこのメソッドを持つことを意味します。

これは非常に簡単な例です。

$.fn.myFunction = function () {
    alert('it works');
};

デモ

1
jbabey