ホームページ > ウェブフロントエンド > jsチュートリアル > プラグインを開発する 2 つの方法: jquery.fn.extend と jquery.extend_jquery

プラグインを開発する 2 つの方法: jquery.fn.extend と jquery.extend_jquery

WBOY
リリース: 2016-05-16 17:13:09
オリジナル
1043 人が閲覧しました

jQuery には、プラグインを開発するための 2 つのメソッドが用意されています。

JavaScript コード

コードをコピー コードは次のとおりです。次のように:

jQuery.fn.extend(object);

jQuery.extend(object); jQuery クラス自体。クラスに新しいメソッドを追加します。

jQuery.fn.extend(object); jQuery オブジェクトにメソッドを追加します。

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

JavaScript コード

コードをコピー コードは次のとおりです:
jQuery .fn = jQuery.prototype = {

init: function( selector, context ) {//….

//……

}; >
jQuery.fn = jQuery.prototype は確かにプロトタイプに精通していることがわかりました。
JavaScript には明確なクラスの概念がありませんが、それを理解するにはクラスを使用する方が便利です。

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

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

XML/HTML コード



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

});


の追加を追加しますjQuery「静的メソッド」の場合、jQuery が導入されているこのメソッドを使用できます。
JavaScript コード



コードをコピー コード $.add(3,4); //return 7

jQuery.fn.extend(object); jQueryクラスに「メンバー関数」を追加することです。 jQueryクラスのインスタンスはこの「メンバー関数」を利用することができます。
たとえば、特別な編集ボックスをクリックすると、現在の編集ボックスの内容が警告されるプラグインを開発したいと考えています。
JavaScript コード



コードをコピー コードは次のとおりです: $.fn .extend({
alertwhileClick:function(){

$(this).click(function(){

alert($(this). val()) ;
});

});

$(“#input1″).alertwhileClick(); :


$(“#input1″) は、メンバー メソッドalertwhileClickを呼び出すときに展開を実装します。呼び出されるたびにクリックすると、まず現在編集中のコンテンツがポップアップ表示されます。

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

注:


ここには別の特別な場所があります。つまり、関数の先頭とプログラム内の jQuery.extend = jQuery.fn.extend です。 jQuery.prototype は以前に jQuery.fn に割り当てられているため、後続の呼び出しでの jQuery.extend() と jQuery.fn.extend() の呼び出しの結果も異なります。 .extend() は、メソッドをオブジェクトのインスタンスに拡張しません。これを参照するメソッドも、jQuery.init() などの jQuery クラスと jQuery.fn.extend() の呼び出しを通じて実装する必要があります。 ) メソッド Extended をオブジェクトのプロトタイプに拡張します。そのため、jQuery オブジェクトがインスタンス化されるときに、これらのメソッドが含まれます。これは非常に重要であり、これは jQuery.js のあらゆる場所に反映されます。
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート