ホームページ > 記事 > ウェブフロントエンド > jQuery プラグインを自分で開発するためのチュートリアル_jquery
jQuery プラグインを自分で開発するためのチュートリアル_jquery
- WBOYオリジナル
- 2016-05-16 18:03:011113ブラウズ
仕事の都合上、最近は jQuery プラグインの開発について考えていましたが、一日かけて苦労して作った初めての jQuery プラグインが完成しました。 CSS なら 1 日しかかかりません。CSS の作業に費やすのは控えめに見積もっても 5 時間です (私は CSS の文盲です。これは適切な説明ではありません。文盲の人が書くことはできず、話すことしかできないとしたら、私はそのような状態です。話せないレベル）、よし、くだらない話はやめて本題へ。
まず、jQuery プラグイン開発には 2 つのタイプがあることを理解する必要があります。1. クラスレベルのプラグイン開発。 2. オブジェクトレベルのプラグイン開発。
実際、クラス レベルとは何か、オブジェクト レベルとは何ですか?
クラス レベルは、最も単純な $.post( ... );
オブジェクト レベルは、$("#Me").fuck(...); などのオブジェクト ベースの拡張として理解できます。もっと詳しく知りたい場合は、人民元を出して本を購入するか、オンラインで情報を確認してください。それで...次は...
何を書きたいかというと、上で述べたクラスレベルとオブジェクトレベルのスタイルが登場する番です。世の中には様々な書き方がありますが、それぞれに良さがあり、書き方の基準は統一されていません。私が一番簡単だと思う方法で書きました。
🎜>コードをコピーします コードは次のとおりです。
$(function () {
$.msg();
});
クラスレベルの記述: jQuery.plugin name=function(){... };
呼び出しメソッド: $.plugin name();
上記はポップアップ ダイアログ プラグインです。では、まずプラグインとは何なのか、クラスレベル プラグインとは何なのかを理解することが重要です。ページ起動の効果を見てください。上の写真の真実はわかります。
オブジェクト レベルのプラグインの作成を比較してみましょう。
コードをコピーしますコードは次のとおりです: (function($) {
$.fn.pluginName = function() { // コード領域。
};
} )(jQuery);
オブジェクト レベルの記述: $.fn.Plug-in name = function(){}; fn がもう 1 つあります、はい、fn です。 !! fn!!!
メソッドの呼び出し: $("#Me").プラグイン名(); };
} )(jQuery);
オブジェクト レベルの記述: $.fn.Plug-in name = function(){}; fn がもう 1 つあります、はい、fn です。 !! fn!!!
簡単に言うと、$.プラグイン名(); $ を通じてアクセスして jquery のグローバル関数を呼び出します。これを jquery または $$ 呼び出しに直接渡すことで、何らかの効果を得ることができます。
$("#Me").Plug-in name(); は、実際には、この記述メソッドの外側に追加のレイヤーがあることがわかりました。何が起こっているのでしょうか?
まず、クロージャの形状 (フレームワーク) を理解する必要があります。これは、jQuery プラグインの開発に使用される伝説的なものです。
コードをコピー コードは次のとおりです: (function($){
//これが内容です東東の場所では地方税、工商税、個人所得税などが徴収されませんので、ご自由にお使いください }) (jQuery); $){ // ここは、地方税、工商税、個人所得税などはありません。ご自由にお使いください。 })(jQuery);関数の後の $ パラメータ、つまり仮パラメータは関数本体内にあります。内部使用の場合、$ は現在関数を呼び出しているオブジェクトなので、さまざまなことができます。
タブ パネル切り替えプラグインを使用して、jQuery オブジェクト レベル プラグインの具体的な開発を詳細にデモンストレーションし、コードを直接入力します。
まず HTML を入力します:
タブ パネル切り替えプラグインを使用して、jQuery オブジェクト レベル プラグインの具体的な開発を詳細にデモンストレーションし、コードを直接入力します。
まず HTML を入力します:
コードをコピーします
コードは次のとおりです: