me_jquery で JQuery プラグイン開発を学ぶ
codeproject の Web サイトを閲覧しているときに、突然次の記事を目にしました: Jquery でプラグインを作成する方法
電子ライティングが得意な方は、上のリンクを読むことができます。
今、上記のウェブサイトと私自身の考えを組み合わせてこの記事を書いています。大手からのサポートと理解が得られることを願っています。 。 。大きな鳥が飛んでいきます。 。 。写真撮影大歓迎です。
出典:
【2】シャープなJQuery本
【3】RascallySnakeのJQuery.extend()の詳細説明
1. はじめに
プラグインを書く目的既存のメソッドや関数に価値を加えることで、他の場所で再利用でき、後のメンテナンスが容易になるように、一連のメソッドや関数がカプセル化されます。
JQuery は、要素とスクリプトを管理するためのシンプルかつ効果的な方法を提供するだけでなく、独自のメソッドと追加関数をコア モジュールに追加するという優れたメカニズムも提供します。このメカニズムを通じて、Jquery を使用すると独自のプラグインを作成し、開発プロセスの効率を向上させることができます。
1.1JQuery プラグインは、次の 3 つのタイプに分類されます。
(1) オブジェクト メソッドをカプセル化するプラグイン (つまり、オブジェクト レベルの開発)
このタイプのプラグインは、今日はプラグインについて話さなければなりません。
(2) グローバル関数をカプセル化するプラグイン (クラスレベル開発)
は、JQuery 名前空間に独立した関数を追加できることを意味します。
グローバル関数を追加するには、次のように定義するだけです:
jQuery.foo = function() {
alert('これはテストです。これは単なるテストです。'); 🎜>};
もちろん、複数のグローバル関数を追加することもできます:
jQuery.bar = function( param) {
alert ('この関数は「' param '」というパラメーターを受け取ります。');
呼び出されるときは、関数と同じです。 : jQuery.foo();jQuery.bar(); または $.foo();$.bar('bar');
(3) セレクタプラグイン
1.2 JQuery プラグインを作成する際の注意点-ins:
(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 '」というパラメーターを受け取ります。');
名前空間を使用します。は依然としてグローバル関数であり、呼び出し時に使用されるメソッド:
2. 🎜>
JQuery プラグインを作成する必要がある場合は、$.fn オブジェクトの後に属性名を追加する必要があります。この属性名は実際にはプラグイン名です。その一般的なフレームワークは次のとおりです。
})( jQuery ); >次に、次のように記述する必要があります。 プラグインの機能は非常に単純で、オブジェクトをゆっくりと非表示にすることです。 fadeOut() メソッドを使用するだけです。
OK、VS 2012 を開いてみましょう。新しい jscript ファイルを作成して MyPlugin.js という名前を付け、その中に次のコードを追加します:
コードは次のとおりです:
新しい HTML ページを作成し、jquery ファイルと MyPlugin.js ファイルをこのページにインポートします。次のように:
コードは次のとおりです:
HTML コード:
コードをコピーします
コードは次のとおりです:
私の神
行きましょう！
3. プラグインは複数の要素コントロールで使用されます。
3.1 複数要素コントロールでの利用
上記のJQueryプラグインを書く際の注意点の4つ目に、トラバースしたい場合はこれを使えば良いと書いてあります。それぞれの方法。 $("ID").each は、jquery オブジェクト、配列、コレクションを走査できます。
わかりました。これを踏まえて、新しいコードは次のようになります:
コードをコピー
コードは次のようになります:
(function ($) {
$.fn.hoverElement = function () {
})(jQuery);
上記は主に .each() メソッドを使用してトラバースします。コードは非常に単純で、現在のオブジェクトの背景色の CSS スタイルを「追加」と「削除」の間で直接切り替えるだけです。
HTML コードは次のとおりです:
コードをコピーします
コードは次のとおりです:
最初のボタン..
2 番目のボタン..
JS コード:
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
JavaScriptの文字列文字を交換します
Mar 11, 2025 am 12:07 AM
JavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi
独自のAjax Webアプリケーションを構築します
Mar 09, 2025 am 12:11 AM
それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか？ Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました
独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？
Mar 18, 2025 pm 03:12 PM
記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。
ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか？
Mar 18, 2025 pm 03:14 PM
この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。
jQueryマトリックス効果
Mar 10, 2025 am 12:52 AM
マトリックスの映画効果をあなたのページにもたらしましょう！これは、有名な映画「The Matrix」に基づいたクールなJQueryプラグインです。プラグインは、映画の古典的な緑色のキャラクター効果をシミュレートし、画像を選択するだけで、プラグインはそれを数値文字で満たされたマトリックススタイルの画像に変換します。来て、それを試してみてください、それはとても面白いです！ それがどのように機能するか プラグインは画像をキャンバスにロードし、ピクセルと色の値を読み取ります。 data = ctx.getimagedata（x、y、settings.greasize、settings.greasize）.data プラグインは、写真の長方形の領域を巧みに読み取り、jQueryを使用して各領域の平均色を計算します。次に、使用します
ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか？
Mar 18, 2025 pm 03:16 PM
この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。
シンプルなjQueryスライダーを構築する方法
Mar 11, 2025 am 12:19 AM
この記事では、jQueryライブラリを使用してシンプルな画像カルーセルを作成するように導きます。 jQuery上に構築されたBXSLiderライブラリを使用し、カルーセルをセットアップするために多くの構成オプションを提供します。 今日、絵のカルーセルはウェブサイトで必須の機能になっています - 1つの写真は千の言葉よりも優れています！ 画像カルーセルを使用することを決定した後、次の質問はそれを作成する方法です。まず、高品質の高解像度の写真を収集する必要があります。 次に、HTMLとJavaScriptコードを使用して画像カルーセルを作成する必要があります。ウェブ上には、さまざまな方法でカルーセルを作成するのに役立つ多くのライブラリがあります。オープンソースBXSLiderライブラリを使用します。 BXSLiderライブラリはレスポンシブデザインをサポートしているため、このライブラリで構築されたカルーセルは任意のものに適合させることができます
Angularを使用してCSVファイルをアップロードおよびダウンロードする方法
Mar 10, 2025 am 01:01 AM
データセットは、APIモデルとさまざまなビジネスプロセスの構築に非常に不可欠です。これが、CSVのインポートとエクスポートが頻繁に必要な機能である理由です。このチュートリアルでは、Angular内でCSVファイルをダウンロードおよびインポートする方法を学びます
