jQuery カスタム関数のアプリケーションと解析

今回は、jQueryカスタム関数の応用と分析についてご紹介します。jQuery カスタム関数を使用する際の注意事項は何ですか?実際のケースを見てみましょう。

jQueryカスタム関数
1. jQuery関数を拡張するにはどうすればよいですか？
jQuery には 2 種類のカスタム関数拡張があります。1 つはクラスレベルの関数開発です。これは、jQuery をクラスとして扱い、関数をクラス自体に拡張することに相当し、グローバル関数 とも呼ばれます。 jQuery のグローバル関数は、jQuery 名前空間 に属する関数です。もう 1 つは、jQuery セレクターによって生成されたオブジェクトにメソッドを追加するオブジェクト レベルの関数開発です。 2 つの機能の開発については、以下で詳しく説明します。

1). グローバル関数開発:
クラスレベルのプラグイン開発の最も直接的な理解は、クラス メソッドを jQuery クラスに追加することであり、これは静的メソッドを追加することとして理解できます。典型的な例は、jQuery 名前空間で定義される jQuery.AJAX() 関数です。クラス レベルでのプラグイン開発は、次の形式で拡張できます:
a. 新しいグローバル関数を追加します
グローバル関数を追加するには、次のように定義するだけです:

   jQuery.test = function() { 
        alert(‘This is a test!!!’); 
     };

次に $.test() を呼び出します。 ; 走る。
b. 複数のグローバル関数を追加する
複数のグローバル関数を追加するには、次の定義を使用できます:

  jQuery.test = function() { 
        alert(‘This is a test!!!’); 
     };  
     jQuery.test1 = function() { 
            alert(‘This is a test1!!!’); 
         };

呼び出し方法は上記と同じです。

c. jQuery.extend(object) を使用します

jQuery.extend({ 
         test:function() { 
                alert(‘This is a test!!!’); 
         }, 
         test1: function() { 
                alert(‘This is a test1!!!’); 
             },  
         add:function(a,b){ 
             return a+b; 
         } 
});

2)。
オブジェクトレベルの関数開発は次の 2 つの方法で実行できます
a. fn.extend 定義は、ドル記号を名前空間に制限するためにこの方法で記述されており、他のライブラリの $ 記号との競合を防ぐためにこの記号を使用し続けることができます。 。

b. プラグインの動作を制御するためのオプション パラメーターを受け入れる

カスタム関数が多くのパラメーターを渡す必要がある場合、パラメーターが多すぎて可読性が低い場合、たとえば、オブジェクトを渡すことを検討できます。 p のオブジェクト 背景色とテキストの色を設定する関数は次のように記述できます:

(function(){
.fn.extend({ 
              sayHello:function(){ 
                    alert(‘sayHello’); 
            } 
            }) ; 
          })(jQuery);

関数のテスト コードを呼び出します:

 $.fn.extend({ 
             setColor:function(options,callback){ 
               var defaults = { 
                               fontcolor: ‘red’, 
                               background: ‘yellow’ 
                             };
            $.extend(defaults, options); //这句话是将default和options合并成一个对象
            //设置样式
            console.log(this);
            $(this).css('background-color',defaults.background);
            $(this).css('color',defaults.fontcolor);
        }     
        }) ;

テーブルの背景が赤、フォントが青であることがわかります。

2. 分析の概要 jQuery の API マニュアルでは、jQuery.extend() と jQuery.fn は jQuery .extend() で内部的に使用されていますが、実際には extend が jQuery と jQuery.fn にマウントされている 2 つの異なるメソッドであることがわかります。同じコードで実装されていますが、機能が異なります。公式説明:

       var options={ 
                   fontcolor: ‘blue’, 
                   background: ‘red’  
                   }; 
       $(function(){
        $(".table").setColor(options);
    });

jQuery インスタンス メソッド) jQuery には静的メソッドとインスタンス メソッドがあることがわかります。そのため、jQuery.extend() と jQuery.fn.extend() の違いは、どちらかを拡張するために使用されることです。 static メソッド。インスタンス メソッドを拡張するために使用されます。

jQuery カスタマイズ部分のソース コードは次のとおりです。

jQuery.extend(): Merge the contents of two or more objects together into the first object.(把两个或者更多的对象合并到第一个当中) 
jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.(把对象挂载到jQuery的prototype属性，来扩展一个新的

JavaScript メソッドもオブジェクトであるため、いわゆる拡張関数は、2 つのオブジェクト jQuery.extend と jQuery.fn.extend の新しい属性を拡張します。仮パラメータは独自のものです。定義された関数は最終的にコピーされてターゲット オブジェクトとして返され、jQuery.extend オブジェクトまたは jQuery.fn.extend オブジェクトにマージされます。これは本質的に、jQuery クラス自体にメソッドを追加することと同じです。 jQuery オブジェクトのプロトタイプ オブジェクトにメソッドを追加します。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

jquery のページング プラグインの使用方法

JD.com 製品詳細の虫眼鏡効果を作成する方法

JavaScript を使用してボール ビート効果を実現する方法

以上がjQuery カスタム関数のアプリケーションと解析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。