jQueryプラグインとは何ですか

jquery プラグインは「jquery プラグイン」を意味し、jquery を使用して開発者によって作成されたいくつかのツールです。これらは、jQuery によってカプセル化された関数または特殊効果として理解できます。呼び出し時に必要なコードは少量だけです。 . 非常に良い結果が得られます。 jquery プラグインを作成する目的は主に、一連の既存のメソッドまたは関数をカプセル化して、他の場所で再利用できるようにして、後のメンテナンスを容易にし、開発効率を向上させることです。

このチュートリアルの動作環境: Windows7 システム、jquery3.6.1 バージョン、Dell G3 コンピューター。

plugins とは「プラグイン」という意味です。 jqueryプラグインとは「jqueryプラグイン」のことです。

jquery プラグインとは何ですか?

jQuery プラグインは、開発者が Jquery を使用して特殊効果を作成し、それを js ファイルにカプセル化またはパッケージ化し、誰もが使用できるようにオンラインで公開するスクリプトのコレクションです。

jquery プラグインを作成する目的は主に、一連の既存のメソッドまたは関数をカプセル化して、他の場所で再利用できるようにして、後のメンテナンスを容易にし、開発効率を向上させることです。

通常、このようなプラグインは、jQuery ライブラリ ファイルに加えてプラグイン ファイルを呼び出す必要があります。使用方法が記載されており、一目で理解できます。たとえば、jQuery 公式 Web サイトで作成されたプラグイン jQuery を使用する場合、ライブラリ ファイルをリンクするだけでなく、次のように UI ファイルと UI CSS ファイルもリンクする必要があります。操作では、jQuery 効果を実際に使用することができ、Web ページ ファイルへの参照が役割を果たします。

プラグインの作成

プラグインの作成に関して、jquery はオブジェクト レベルでプラグインを開発するためのテンプレートのセットを公式に提供しています。

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

テンプレートの重要なポイント:

1. すべての関数はクロージャ内に配置され、外部関数は内部のパラメータを呼び出すことができないため、より安全です。

2. にセミコロンを追加します。不要なトラブルを避けるために前に

jquery プラグインによって呼び出されるメソッド:

1. $.extend()

2 を介して jquery を拡張します。 $.fn

3. $.widget() 経由で作成するには、jQuery UI ウィジェット ファクトリ メソッドを使用します

メソッド 1 はセレクターを呼び出すことができず、jQuery によって追加としてのみ理解されます静的メソッドであるため、DOM オブジェクトを選択する必要はありません。

一般的に使用される jquery 用のサードパーティ プラグイン

JQueryツリー メニュー、日付コントロール、画像切り替えプラグイン、ポップアップ ウィンドウ、その他の基本的なフロントエンド ページ コンポーネントには、対応するプラグインがあり、JQuery で作成されたエフェクトなど、豊富なサードパーティ プラグインがあります。プラグインは非常に魅力的で、必要に応じてプラグインを書き換えてパッケージ化できるため、シンプルで実用的です。

次に、一般的に使用されるサードパーティ製プラグインを紹介します。

1. jQuery フォーム検証プラグイン: Validation

(1) 検証の概要

JavaScript が使用される最も一般的な機会はフォーム検証であり、jQuery は優れた JavaScript ライブラリ、優れたフォーム検証プラグインである Validation も提供しています。Validation は最も古い jQuery プラグインの 1 つであり、世界中のさまざまなプロジェクトによって検証されており、多くの Web 開発者から賞賛されています。標準検証メソッド ライブラリとして、Validation には次の利点があります。

組み込み検証ルール: 必須、数値、電子メール、URL など 19 種類の組み込み検証ルールがあります。クレジット カード番号

カスタマイズされた検証ルール: 検証ルールを簡単にカスタマイズできます
• #シンプルで強力な検証情報プロンプト: 検証情報プロンプトはデフォルトで設定されており、デフォルトのプロンプト情報をカスタマイズする機能を提供します
• リアルタイム検証: 検証は、フォームの送信時だけでなく、keyup イベントやブラー イベントを通じてトリガーできます。
• (2) プラグインのダウンロードアドレス: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

# Validation プラグインの公式 API アドレスは次のとおりです。 http://docs.jquery.com/Plugins/Validation
2. jQuery フォームプラグイン：Form

(1) Form プラグインの概要

jQueryフォーム プラグインは優れた Ajax フォーム プラグインを使用すると、HTML フォームを Ajax をサポートするようにアップグレードすることが非常に簡単かつ非侵入的になります。 jQuery には、ajaxForm() と ajaxSubmit() という 2 つのコア メソッドがあり、フォーム要素の制御から送信プロセスの管理方法の決定までの機能を組み合わせています。さらに、iain プラグインには、formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、resetForm() などの他のメソッドも含まれています。

(2) jQueryフォームフォームプラグインのダウンロードアドレス：http://jquery.malsup.com/form/。読者はプラグインをダウンロードし、Web サイトで簡単な開始手順、API、サンプル コードなどを確認できます。

3. 動的バインディングイベントプラグイン: livequery

(1) livequery プラグインの紹介

jQuery のイベント バインディング機能により、jQuery コードと HTML コードを完全に分離できるため、コードの階層関係がより明確になり、維持が容易になります。ただし、ページに動的に読み込まれる HTML 要素の場合は、毎回イベントをこれらの要素に再バインドする必要があり、非常に不便です。これから新しいプラグイン、つまり livequery が誕生しました。これは、対応する DOM 要素の時間を登録したり、コールバック関数をトリガーしたりするために使用できます。現在のセレクターによって一致する要素がイベントにバインドされるだけでなく、JavaScript を介して後で追加された要素もイベントにバインドされます。要素がセレクターと一致しなくなると、livequery はイベント登録を自動的にキャンセルするため、開発者は HTML 要素のソースに注意を払う必要がなく、バインドされたイベントの記述方法だけに注意する必要があります。

jQuery セレクターを通じて DOM 要素を選択すると、ライブクエリ プラグインはそれを DOM 範囲全体にリアルタイムで保持します。これは、要素が以前に存在していたか、後で動的に読み込まれたかに関係なく、CSS で要素をスタイル設定するのと同じように、イベントがバインドされることを意味します。同時に、このプラグインはリソースをほとんど消費することなくこれらの機能を実現します。
(2) jQuery livequery プラグインのダウンロード アドレス: http://plugins.jquery.com/livequery/

4. jQuery UI プラグイン

(1) jQuery UI概要:

jQuery UI は、jQuery プラグイン (インターフェイス) から派生しています。 Interface プラグインの最初のバージョンは 1.2 で、jQuery 1.1.2 バージョンのみをサポートしていましたが、その後、一部の人々が jQuery 1.2 API に基づいてほとんどの Interface 代表を再構築し、API を統合しました。大幅な改良により、バージョン番号は 1.3 ではなく 1.5 に直接ジャンプし、jQuery UI という名前に変更されました。

jQuery UI は主に、インタラクション、ウィジェット、エフェクト ライブラリ

• インタラクションの 3 つの部分に分かれています。ここでは、マウス操作に関連するコンテンツをいくつか紹介します。ドラッグ、配置、ズーム、選択、並べ替えなどが含まれます。ウィジェットの一部は、これらのインタラクティブなコンポーネントに基づいて作成されています。このライブラリには jQuery UI コア ライブラリが必要です。ui.core.js は
• ウィジェットをサポートしています。ここでは主にいくつかのインターフェイス拡張機能を紹介します。アコーディオン ナビゲーション、オートコンプリート、カラー ピッカー、ダイアログ ボックス、スライダー、ラベル、カレンダー、虫眼鏡、プログレス バー、スピナー コントローラーが含まれています。このライブラリには jQuery UI コア ライブラリが必要です。ui.core.js は

• エフェクト ライブラリをサポートしています。このライブラリは豊富なアニメーション効果を提供するために使用されるため、アニメーションは animate() メソッドに限定されなくなります。エフェクト ライブラリには独自のコア セット、effect.core.js があり、jQuery のコア ライブラリ ui.core.js のサポートは必要ありません。

(2) のダウンロード アドレスjQuery UI プラグインは http://jqueryui.com/download/all/ です。 「jQuery UI 1.6rc2」リンクを選択して、ソース コード、配布バージョン、テスト ドライバーを含む完全なパッケージを直接ダウンロードします。

5. Cookie を管理するためのプラグイン: Cookie

(1) Cookie プラグインの概要

Cookie は、Web サイトによってクライアントに配置される小さなテキスト ファイルです。デザイナー。 Cookie は、ショッピング Web サイトでユーザーが閲覧した商品リストを保存したり、ポータル Web サイトでユーザーが閲覧したいニュースの種類を記憶したりするなど、ユーザーにさまざまな利便性を提供します。ユーザーの実行中にユーザーのログイン ステータスも保存できるため、ユーザーは Web サイトにアクセスするたびにこの情報を入力する必要がなくなります。

jQuery は、Web サイト上の Cookie を管理するための非常にシンプルなプラグインを提供します。プラグインの名前も Cookie です。

(2) jQuery Cookie プラグインのダウンロード アドレスin: http://plugins.jquery .com/cookie/

6. モーダルウィンドウプラグイン: SimpleModal

(1) SimpleModal プラグインの紹介

SimpleModal は、モーダルである軽量の jQuery プラグインです。モーダル ウィンドウの開発により、モーダル ウィンドウのフレームワークとして使用できる強力なインターフェイスが提供されます。 SimpleModal は非常に柔軟で、想像できるあらゆるものを作成でき、UI 開発においてクロスブラウザーの問題を考慮する必要はありません。

(2) SimpleModal プラグインのダウンロード アドレス: http://www.ericmmartin.com/projects/simplemodal/

7. 遅延読み込み画像プラグイン: Lazyload

画像をレイロードするか、特定の条件が満たされた場合にのみ画像のロードを開始します

ダウンロード URL: https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload .min.js

8. flyプラグイン

ショッピングカートエフェクトを追加して放物線運動を実現

ダウンロードアドレス: https://github .com/amibug/fly

9, qrcode

クライアント上でマトリックス QR コード QRCode を生成できる jquery プラグイン

ダウンロード アドレス: https://github.com/ lrsjng/jquery-qrcode

10、スピナー

は、ショッピング カート内の数量を簡単に追加または削除でき、また、キーボードの上下キーを押してショッピングカートの数量を変更します。

ダウンロード アドレス: https://github.com/vsn4ik/jquery.spinner

など。 。 。

[推奨学習: jQuery ビデオ チュートリアル 、Web フロントエンド ビデオ ]

以上がjQueryプラグインとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。