チェーンプログラミングの実装原理jQuery を使用すると、開発者は常にドット構文を使用して独自のメソッドを呼び出すことができます。主な理由は、jQuery がそれを実装するために内部的に js オブジェクトを使用するためです。 jQueryでは、同じ要素や他の関連する要素(兄弟要素、親子要素)に対して操作を続ける場合は、. 構文(ドット構文)を使用して記述を続けることができます。 $("#box").css("背景", "ピンク").css("フォントサイズ":"29px"); $("#box").siblings().css("背景", ""); 次のように書くことができます: $("#box").css("背景", "ピンク").siblings().css("背景", "赤"); チェーンプログラミングを実装するには、jQuery セレクター自体が jQuery オブジェクトになります。 jQuery はこれを内部的に使用して自分自身を返します。 //js でオブジェクトを宣言します var obj = { name:"名前", 説明: 関数(){ console.log(this); // 現在のオブジェクトを出力します console.log(this.name); // オブジェクトのプロパティを呼び出します return this; // チェーンプログラミングの原則は、メソッドを呼び出した後、メソッド自体がオブジェクトを返すことです。 }, 読み取り: 関数(){ console.log("こんにちは!"); これを返します。 }} jQuery のチェーンプログラミングスタイルの例まず、jQuery のチェーン プログラミング スタイルをケースを使って説明します。まず、リストを表示するページを作成します。コードは次のとおりです。 <本文> <div> <ul class="メニュー"> <li class="level1"> <a href="#">フルーツ</a> <ul class="level2"> <li><a href="#">アップル</a></li> <li><a href="#">パイナップル</a></li> <li><a href="#">カンタロープ</a></li> </ul> </li> <li class="level1"> <a href="#">主食</a> <ul class="level2"> <li><a href="#">麺類</a></li> <li><a href="#">マントウ</a></li> <li><a href="#">米</a></li> </ul> </li> </ul> </div> </本文> <script type="text/javascript"> $(関数() { $(".level1 > a").click(function() { $(this).addClass("current").next().show().parent.siblings().children("a").removeClass("current").next().hide(); false を返します。 }); }); </スクリプト> コードを実行した後の効果を下の図に示します。 上記のコードの拡張効果は、jQuery のチェーン操作によって実現されます。現在のクラスを追加する操作、子要素を照会するためのメソッド呼び出し、アニメーション メソッドの呼び出しはすべて同じ要素に対して実行されます。したがって、jQuery オブジェクトを取得した後、後続のすべてのメソッドと属性の呼び出しは、"." を通じて連続的に呼び出されます。このモードはチェーン操作です。 コードの可読性と保守性を高めるために、上記のチェーンコード形式を次のように変更します。 <script type="text/javascript"> $(関数() { $(".level1 > a").click(function() { // 現在のスタイルを現在の要素に追加します $(this).addClass("current") // 次の要素が表示されます。next().show() // 親要素の兄弟要素の子要素 a から現在のスタイルを削除します。element.parent.siblings().children("a").removeClass("current") // 次の要素は hidden.next().hide(); です。 false を返します。 }); }); </スクリプト> 標準形式を調整すると、コードが読みやすくなり、その後のメンテナンスも便利になります。 同時に、同じ jQuery オブジェクトに対してチェーン操作を実行する場合は、主に次の 3 つの形式仕様に従います。 (1)同じオブジェクトに対する3つ以下の操作は、1行で直接記述することができます。コードは次のようになります。 <script type="text/javascript"> $(関数() { $("li").show().unbind("click"); }); </スクリプト> (2)同じオブジェクトに対して複数の操作を行う場合は、1行に1つの操作を記述することをお勧めします。コードは次のようになります。 <script type="text/javascript"> $(関数() { $(this).removeClass("マウスアウト") .addClass("マウスオーバー") 。停止() .fadeTo("速い", 0.5) .fadeTo("速い", 1) .unbind("クリック") .click(関数() { ....... }); }); </スクリプト> (3)複数のオブジェクトに対する少数の操作の場合は、オブジェクトごとに1行記述することができます。サブ要素が関係する場合は、適切なインデントを考慮してください。コードは次のとおりです。 <script type="text/javascript"> $(関数() { $(this).addClass("highLight") .children("a").show().end() .siblings().removeClass("highLight") .children("a").hide(); }); </スクリプト> 上記はjQueryのチェーンプログラミングスタイルについてです。 要約するjQuery チェーン プログラミング スタイルに関するこの記事はこれで終わりです。jQuery チェーン プログラミングに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL クエリにおける LIMIT の大きなオフセットによって引き起こされるパフォーマンス低下の分析
>>: CentOS 7へのJenkinsのインストール手順の詳細な説明
SQL (Structured Query Language) ステートメント、つまり構造化クエリ言...
esインストール docker pull elasticsearch:7.4.0 # -d : バッ...
システムでさまざまな IO ボトルネック、メモリ使用量の増加、CPU 使用率の増加などの問題が発生し...
1. 問題の説明今日、システム ログ ファイルを確認する必要がありますが、/var/log/mess...
この記事では、適切なスライドアウトレイヤーアニメーションを実装するためのVueの具体的なコードを例と...
昨年の前半から開発と娯楽のために Linux を使い始めましたが、今では Windows には戻れま...
目次背景インスピレーションは人生から生まれる速達配送の最適化原則GaussDB の最適化 (MySQ...
この記事の例では、画像比較を実現するためのjQueryプラグインの具体的なコードを参考までに共有して...
MySQL スロー クエリ (正式名称はスロー クエリ ログ) は、MySQL によって提供されるロ...
目次スケルトンスクリーンとは何ですか?デモデザインのアイデア具体的な実装スケルトンスクリーンとは何で...
まず、いくつかの概念を明確にします。 JDBC: Javaデータベース接続、Oricalによって規定...
今日、リモートデスクトップを実行してログインしているときにこのプロンプトを見つけました「MySQL ...
目次iview-admin2.0 組み込み権限管理権限に基づいてコンポーネントの表示を制御するカスタ...
SSHPASSをインストールする最新のオペレーティング システムでは、sshpass パッケージはデ...
この記事では、バウンドボールゲームを実装するためのjQueryの具体的なコードを参考までに共有します...