jqueryプラグインの開発方法まとめ_jquery

jQuery には、プラグインを開発するための 2 つのメソッドが用意されています。
jQuery.extend(object);
jQuery.extend(object); . クラスに新しいメソッドを追加します。
jQuery.fn.extend(object); jQuery オブジェクトにメソッドを追加します。
fnとは何ですか? jQuery コードを見ると、見つけるのは難しくありません。

コードをコピー コードは次のとおりです。

jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {//....
//......
};

元の jQuery.fn = jQuery。 Right Prototype は間違いなくおなじみです。
JavaScript にはクラスという明確な概念がありませんが、それを理解するにはクラスを使用する方が便利です。
jQuery は非常によくカプセル化されたクラスです。たとえば、ステートメント $("#btn1") を使用すると、jQuery クラスのインスタンスが生成されます。
jQuery.extend(object); jQuery クラスにクラス メソッドを追加します。これは、静的メソッドの追加として理解できます。例:

コードをコピー コードは次のとおりです:

$.extend({
add: function(a,b){return a b;}
});

add という「静的メソッド」を jQuery に追加すると、jQuery がある場所であればどこでもこれを使用できます。 Method,
$.add(3,4); //return 7
jQuery.fn.extend(object); jQuery.prototype を拡張すると、jQuery クラスに「メンバー関数」が追加されます。 jQueryクラスのインスタンスはこの「メンバー関数」を利用することができます。
たとえば、特別な編集ボックスを作成するプラグインを開発したいと考えています。これがクリックされると、現在の編集ボックスの内容が警告されます。
Java コード

コードをコピー コードは次のとおりです:

$.fn .extend({
alertwhileClick:function(){
$(this).click(function(){
alert($(this).val());
} );
}
});
$("#input1").alertwhileClick(); // ページ上: 🎜>$.fn.extend({
alertwhileClick:function(){
$(this).click(function(){
alert($(this).val());
});
}
});
$("#input1").alertwhileClick(); // ページ上:


$("#input1") は jQuery インスタンスであり、メンバー メソッドalertwhileClick を呼び出すと、クリックされるたびに現在のコンテンツがエディターにポップアップ表示されます。

実際の開発では、このような初心者のプラグインを作成することはありません。実際には、jQuery には豊富な操作ドキュメント、イベント、CSS、Ajax、エフェクト メソッドが用意されており、これらのメソッドを組み合わせて開発できます。 Niubility プラグインの詳細。