jQueryチェーン呼び出しの詳細な説明

jQueryチェーン呼び出しの詳細な説明

チェーン呼び出し

jQuery オブジェクトが任意のメソッド (ノード関係メソッドを除く) を呼び出した後、メソッドには戻り値があり、それが jQuery オブジェクト自体になります。この現象は利便性を提供し、実行結果に基づいて jQuery メソッドとプロパティを引き続き呼び出すことができます。つまり、jQueryオブジェクトを使用して連続ドット呼び出しを行うことができます。

console.log($(this).css("背景色", "ピンク").html("こんにちは"));

ノード関係メソッドに加えて、jQuery オブジェクトの他のメソッドの実行後、戻り値はオブジェクト自体であり、チェーン内で他の jQuery オブジェクトのメソッドとプロパティを継続的に呼び出すことができます。これによりコード記述が簡素化されます

小さなケース

要素をクリックすると、その要素はピンク、その兄弟は黄色、その親は青、その親の兄弟は色、その親の兄弟はオレンジになります。

<スタイル>
  * {
       マージン: 0;
       パディング: 0;
     }

  。箱 {
       幅: 400ピクセル;
       高さ: 60px;
       境界線: 1px実線 #000;
       上マージン: 2px;
      }

  .box p,.box h2 {
       フロート: 左;
       幅: 60ピクセル;
       高さ: 60px;
       右マージン: 20px;
       背景色: rgb(164, 247, 233);
    }
</スタイル>
<!------------------------------------------------------------------>

<本文>
  <div class="box">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <h2>h2</h2>
  </div>
  <div class="box">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <h2>h2</h2>
  </div>
  <div class="box">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <h2>h2</h2>
  </div>
  <div class="box">
     <p></p>
     <p></p>
     <p></p>
     <p></p>
     <h2>h2</h2>
  </div>
  <script src="../jq/jquery-1.12.4.min.js"></script>
  <スクリプト>
     var $p = $("p");
     var $box = $(".box")
     $p.click(関数() {
      // チェーン呼び出しの実装 $(this).css("background-color","pink") // 自身を pink に変更します。siblings().css("background-color","yellow") // 自身の兄弟を yellow に変更します。parent().css("background-color","skyblue") // そしてその親を blue に変更します。siblings().css("background-color","lightgreen") // 親の兄弟を light green に変更します。children().css("background-color","orange") // 親の兄弟を orange に変更します。}) 

以上がjQueryチェーン呼び出しの詳しい説明です。jQueryチェーン呼び出しの詳細については、123WORDPRESS.COMの他の関連記事をご覧ください。

以下もご興味があるかもしれません:
  • JQuery の特殊効果とチェーン呼び出し操作の例
  • PythonはjQueryに似たチェーン呼び出しの例を実装しています
  • jQueryチェーン呼び出しの簡単な分析と知識の表示
  • jQueryの各関数のチェーン呼び出しの簡単な分析
  • jQueryのチェーン呼び出しの簡単な分析
  • Javascript チェーン呼び出し実装コード (jquery を参照)
  • jQueryの各関数のチェーン呼び出しを模倣する

<<:  MySQL5.7.17 winx64 インストール バージョン構成方法 Windows Server 2008 R2 でのグラフィック チュートリアル

>>:  ZooKeeper をベースにした Hadoop 高可用性クラスタの構築のチュートリアル図

推薦する

ウェブページに埋め込まれた Flash と IE、FF、Maxthon の互換性の問題

いろいろ苦労した後、インターネットで検索したり、以前の会社のプロジェクトを探したり、他の人のプロジェ...

Linux lessコマンド例の詳細な説明

ファイル名が少ないファイルを表示ファイル名を少なく | grep -n コンテンツを検索内容に応じて...

Zabbix でフィルターを使用して監視を実装する方法

最近、監視機器の作業をしていたとき、ポートがダウンしているというアラームが常に出ていました。データを...

MySql 学習ノートにおけるトランザクション分離レベルの詳細な説明

背景トランザクションについて話すとき、誰もがそれに精通している必要があります。MySQL データベー...

時点別のMySQLデータベース復旧実績

はじめに: 時間ポイントによる MySQL データベースの復旧どの企業にとっても、データは最も価値の...

JavaScript でカルーセル効果を実装する

この記事では、カルーセルの効果を実現するためのJavaScriptの具体的なコードを参考までに共有し...

HTML 5 プレビュー

<br />オリジナル: http://www.alistapart.com/artic...

Docker Compose を使用して nginx のロード バランシングを実装する方法

Dockerネットワーク管理とコンテナIP設定に基づいてNginxロードバランシングを実装するすべて...

DockerにMySQL 8.0をインストールする方法

環境: MacOS_Cetalina_10.15.1、Mysql8.0.18、Docker_2.0....

ブラウザは関連するHTTPヘッダーをキャッシュし、HTTPリクエストの数を最小限に抑えます。

最近、Yahoo の 34 の黄金律を読み、ウェブサイトのパフォーマンスを最適化する方法を学びました...

Windows に MySQL 8.0.16 をインストールする手順とエラーの解決方法

1. はじめに: mysql8以降は、これまでよく使われていたバージョンと比べてかなり変更点が大きい...

CSSとHTMLを組み合わせる4つの方法

(1)各HTMLタグには属性スタイルがあり、CSSとHTMLを組み合わせている。 <div s...

Elementはスクリプトを使用して新しいコンポーネントを自動的に構築します

目次背景element-ui の自動構築はどのように機能しますか?メイクファイル新しい.jsファイル...

React Fiberの仕組みの詳細な説明

目次React Fiberとは何ですか?なぜReact Fiberなのか? React Fiberは...

CSS でのフレックスレイアウトの詳細な説明

フレックス レイアウトは、エラスティック レイアウトとも呼ばれます。任意のコンテナーをフレックス レ...