me_jquery で JQuery プラグイン開発を学ぶ-jsチュートリアル-php.cn

codeproject の Web サイトを閲覧しているときに、突然次の記事を目にしました: Jquery でプラグインを作成する方法
電子ライティングが得意な方は、上のリンクを読むことができます。
今、上記のウェブサイトと私自身の考えを組み合わせてこの記事を書いています。大手からのサポートと理解が得られることを願っています。。。大きな鳥が飛んでいきます。。。写真撮影大歓迎です。
出典:

【1】Jqueryでのプラグインの書き方

【2】シャープなJQuery本

【3】RascallySnakeのJQuery.extend()の詳細説明
1. はじめに
プラグインを書く目的既存のメソッドや関数に価値を加えることで、他の場所で再利用でき、後のメンテナンスが容易になるように、一連のメソッドや関数がカプセル化されます。
JQuery は、要素とスクリプトを管理するためのシンプルかつ効果的な方法を提供するだけでなく、独自のメソッドと追加関数をコアモジュールに追加するという優れたメカニズムも提供します。このメカニズムを通じて、Jquery を使用すると独自のプラグインを作成し、開発プロセスの効率を向上させることができます。

1.1JQuery プラグインは、次の 3 つのタイプに分類されます。
(1) オブジェクトメソッドをカプセル化するプラグイン (つまり、オブジェクトレベルの開発)
このタイプのプラグインは、今日はプラグインについて話さなければなりません。
(2) グローバル関数をカプセル化するプラグイン (クラスレベル開発)
は、JQuery 名前空間に独立した関数を追加できることを意味します。
グローバル関数を追加するには、次のように定義するだけです:
jQuery.foo = function() {
alert('これはテストです。これは単なるテストです。'); 🎜>};
もちろん、複数のグローバル関数を追加することもできます:

コードをコピーコードは次のとおりです。 🎜>

jQuery.foo = function() {

alert('これはテストです。これは単なるテストです。'); 
jQuery.bar = function( param) { 
alert ('この関数は「' param '」というパラメーターを受け取ります。'); 

 
呼び出されるときは、関数と同じです。 : jQuery.foo();jQuery.bar(); または $.foo();$.bar('bar'); 
 (3) セレクタプラグイン 
1.2 JQuery プラグインを作成する際の注意点-ins: 

(1) プラグインの推奨事項命名方法は次のとおりです: jquery.[プラグイン名].js
(2) すべてのオブジェクトメソッドは JQuery.fn オブジェクトにアタッチされ、すべてのグローバル関数は次のとおりです。 JQuery オブジェクト自体にアタッチされます。
(3) プラグイン内部では、内部の this が DOM 要素を指す一般的なメソッドとは異なり、this は現在セレクターを通じて取得されている JQuery オブジェクトを指します。
(4) this.each を通じてすべての要素をトラバースできます。
(5) すべてのメソッドまたは関数プラグインはセミコロンで終わる必要があります。そうしないと、圧縮中に問題が発生する可能性があります。より安全に記述するために、プラグインのヘッダーにセミコロン (;) を追加して、非標準コードがプラグインに影響を与えるのを防ぐことができます。
(6) プラグインのチェーン可能な操作を保証するために、プラグインは JQuery オブジェクトを返す必要があります。
(7) プラグイン内で JQuery オブジェクトのエイリアスとして $ を使用することは避け、完全な JQuery を使用してそれを表します。これにより競合が回避されます。
1.3 JQuery プラグインの仕組み
JQuery は、JQuery の機能を拡張するための 2 つの方法を提供します。つまり、
①jQuery.fn.extend()
②jQuery.extend()
最初のものは、前述したプラグインタイプの最初のケースであり、2 番目のものは次の 2 つを指します。ケース。
プラグインの jQuery.extend() の非常に重要な機能は、既存のオブジェクトのオブジェクトを拡張することです。
例:
var newSrc=$.extend(dest,src1,src2,src3...)
これは、src1、src2、src3... を dest にマージすることを意味し、戻り値は次のようになります。マージされた dest。メソッドがマージされたことがわかります。
例:
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})
得られた結果それは次のとおりです:
result={name:"Jerry",age:21,sex:"Boy"}
詳細については、以下を参照してください:

jQuery.extend 関数の詳細な説明

内にこの方法の詳しい説明があります。公式 Web サイト: JQuery.extend() および JQuery.fn.extend()

名前空間の使用jQuery 名前空間内にありますが、 JavaScript の関数名や変数名を多数使用することは禁止されています。ただし、一部の関数名または変数名が他の jQuery プラグインと競合することは依然として避けられないため、私たちは一部のメソッドを別のカスタム名前空間にカプセル化することに慣れています。

コードをコピー

コードは次のとおりです:

 
jQuery.myPlugin = { 
foo:function() { 
alert('これはテストです。これは単なるテストです。'); 
}, 
bar: function(param) { 
alert('この関数は「' param '」というパラメーターを受け取ります。'); 

 
名前空間を使用します。は依然としてグローバル関数であり、呼び出し時に使用されるメソッド: 

コードをコピーコードは次のとおりです:

$.myPlugin.foo();

$.myPlugin.bar('baz');

2. 🎜>
JQuery プラグインを作成する必要がある場合は、$.fn オブジェクトの後に属性名を追加する必要があります。この属性名は実際にはプラグイン名です。その一般的なフレームワークは次のとおりです。

コードをコピーコードは次のとおりです。 (関数( $ ) {

$.fn.myPlugin = function() {

// ここで機能要件の記述を開始します
})( jQuery ); >次に、次のように記述する必要があります。 プラグインの機能は非常に単純で、オブジェクトをゆっくりと非表示にすることです。 fadeOut() メソッドを使用するだけです。 
OK、VS 2012 を開いてみましょう。新しい jscript ファイルを作成して MyPlugin.js という名前を付け、その中に次のコードを追加します: 

コードをコピー

コードは次のとおりです:

(function ($) { $.fn.myPlugin = function () { this.fadeOut('normal '); }; })(jQuery);

 使い方とてもシンプルです。 
 
新しい HTML ページを作成し、jquery ファイルと MyPlugin.js ファイルをこのページにインポートします。次のように: 

コードをコピー
コードは次のとおりです:

 
HTML コード: 

コードをコピーします

 コードは次のとおりです:

私の神

Web ページ上のボタンをクリックすると、div がゆっくりと非表示になります。。。設定したものは通常のものなので、その中にいくつかの値を設定することもできます。以下に示すように、これにはスマートなプロンプトがあることに非常に興奮しています:

行きましょう！ 

3. プラグインは複数の要素コントロールで使用されます。 

3.1 複数要素コントロールでの利用
上記のJQueryプラグインを書く際の注意点の4つ目に、トラバースしたい場合はこれを使えば良いと書いてあります。それぞれの方法。 $("ID").each は、jquery オブジェクト、配列、コレクションを走査できます。
わかりました。これを踏まえて、新しいコードは次のようになります:

コードをコピー
コードは次のようになります:

(function ($) {
$.fn.hoverElement = function () {

this.each(function () { $(this).hover( function () { $(this).addClass("追加"); }, function () { $(this).removeClass("削除");

})

} 
})(jQuery); 

上記は主に .each() メソッドを使用してトラバースします。コードは非常に単純で、現在のオブジェクトの背景色の CSS スタイルを「追加」と「削除」の間で直接切り替えるだけです。 

HTML コードは次のとおりです: 

コードをコピーします

 コードは次のとおりです:

最初のボタン..

2 番目のボタン..

< ;/ div>

JS コード:

コードをコピーコードは次のとおりです:

著者別の最新記事