jqueryプラグイン開発方法(初級)_jquery

jQuery は、プラグインを開発するための 2 つのメソッドを提供します。 jQuery クラス自体を拡張するには、クラスに新しいメソッドを追加します。
jQuery.fn.extend(object); jQuery オブジェクトにメソッドを追加します。

fnとは何ですか。 jQuery コードを見ると、見つけるのは難しくありません。





コードをコピー

コードは次のとおりです: jQuery.fn = jQuery。プロトタイプ = { init: function(selector, context) {//.... //....

};

オリジナルjQuery.fn = jQuery.prototype. あなたはプロトタイプに慣れているわけではありません。

JavaScript には明確なクラスの概念がありませんが、それを理解するにはクラスを使用する方が便利です。

jQuery は非常によくカプセル化されたクラスです。たとえば、ステートメント $("#btn1") を使用すると、jQuery クラスのインスタンスが生成されます。

jQuery.extend(object); jQuery クラスにクラス メソッドを追加します。これは、静的メソッドの追加として理解できます。例:




コードをコピー

コードは次のとおりです: $.extend({ add: function(a,b){return a b;} });

は、このメソッド $.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、エフェクトを組み合わせて操作するためのメソッドが豊富に用意されています。 、さらに Publish Niubility プラグインを開発できます。