jQueryで関数を設定する-フロントエンドQ&A-php.cn

jQueryで関数を設定する

王林

リリース： 2023-05-14 10:17:37

オリジナル

681 人が閲覧しました

はじめに:

Web 開発では、jQuery は関連するスクリプトコードの作成ツールとしてよく使用されます。 jQuery ツールライブラリには、呼び出し可能な組み込み関数が多数ありますが、これらの組み込み関数だけではすべてのニーズを満たすのに十分ではありません。したがって、多くの場合、独自の関数を定義する必要があります。この記事では、jQuery で関数を設定する方法に焦点を当てます。

1. jQuery プラグインと関数の定義

jQuery プラグインは、jQuery ライブラリに追加の関数を追加するスクリプトです。これらは開発者によって作成され、通常は 1 つ以上の関数が含まれています。開発者は、独自の関数を作成して jQuery ライブラリを拡張できます。 jQuery 関数を定義するための構文は次のとおりです。

$.fn.functionName = function() {
  //Code to be executed
};

ログイン後にコピー

上記の構文では、functionName は定義する関数の名前です。任意の名前を自由に選択できます。次に、関数本体を通じて関数の操作を定義する必要があります。関数本体では、jQuery ライブラリがすでに備えているすべての組み込み関数を使用できます。

たとえば、次のコードは customFunction という名前の jQuery 関数を定義します。

$.fn.customFunction = function() {
  $(this).css("background-color", "yellow");
};

ログイン後にコピー

上記のコードでは、2 つの jQuery 関数を使用します。最初の関数は $(this) で、関数を呼び出している現在の DOM 要素を選択します。 2 番目の関数は css() で、要素の背景色を変更します。

2. コードでカスタム関数を使用する

新しい jQuery 関数を定義した後、コードでそれを呼び出す必要があります。

たとえば、次の例は、定義された customFunction 関数を呼び出す方法を示しています。

$(document).ready(function() {
  $("button").click(function() {
    $("p").customFunction();
  });
});

ログイン後にコピー

上記のコードは、最初にページ全体が読み込まれるのを待ってから、シングルクリックイベントハンドラ。ボタンをクリックすると、customFunction 関数が呼び出され、すべての  要素に適用されます。

3. プラグインの定義

jQuery プラグインの定義は関数の定義とよく似ています。プラグインは通常、問題を解決するために連携して動作する複数の機能で構成されます。

jQuery プラグインを定義するための構文は次のとおりです。

(function($) {
  $.fn.pluginName = function() {
    //Code to be executed
  };
})(jQuery);

ログイン後にコピー

上記のコードでは、pluginName は定義するプラグインの名前です。。自己実行関数をこの名前に関連付けます。自己実行関数には、jQuery ライブラリへの参照であるパラメーター $ があります。次に、$.fn を使用してプラグインを定義します。関数定義と同様に、プラグインの本体で論理演算を提供します。最後に、自己実行関数のパラメーターとして jQuery を渡します。

たとえば、次のコードは customPlugin という名前の jQuery プラグインを定義します。

(function($) {
  $.fn.customPlugin = function() {
    $(this).css("background-color", "yellow");
    return this;
  };
})(jQuery);

ログイン後にコピー

上記のコードでは、呼び出しすべての背景色を変更するプラグインを定義します。その要素。プラグインをチェーンできるように return this を使用します。

4. コードでプラグインを使用する

新しい jQuery プラグインを定義した後、それをコードで使用する必要があります。

たとえば、次の例は、定義された customPluginplugin を呼び出す方法を示しています。

$(document).ready(function() {
  $("button").click(function() {
    $("p").customPlugin().slideUp();
  });
});

ログイン後にコピー

上記のコードは、最初にページ全体が読み込まれるのを待ってから、ボタン要素の単一ボタンクリックイベントハンドラー。ボタンをクリックすると、customPlugin プラグインが呼び出され、すべての  要素に適用されます。次に、jQuery の組み込み slideUp() 関数をチェーン呼び出しして、スライドアニメーション効果を生成します。

結論:

この記事では、jQuery で独自の関数とプラグインを定義する方法を学び、コードでこれらの関数とプラグインを使用する方法を検討しました。カスタム jQuery 関数とプラグインは、特定の問題を解決し、コードの可読性と保守性を向上させるのに役立ちます。この記事が jQuery についてのヒントとなり、より効果的に使用できるようになれば幸いです。

以上がjQueryで関数を設定するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。