jQueryプラグインとは何ですか-フロントエンドQ&A-php.cn

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

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

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

plugins とは「プラグイン」という意味です。 jqueryプラグインとは「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、スピナー

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