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 高可用性クラスタの構築のチュートリアル図

推薦する

mysql 8.0.12 winx64 のダウンロードとインストールのチュートリアル

MySQL 8.0.12のダウンロードとインストールのチュートリアルは参考までに、具体的な内容は次の...

JS配列の次元削減のいくつかの方法の詳細な説明

2次元配列の次元削減配列インスタンスメソッド concat と ES6 スプレッド演算子を使用した次...

Vueライフサイクルカメラの8つのフック関数

目次1. beforeCreateとcreated関数2. beforeMountとmount関数3...

ウェブデザインにおける装飾要素の応用の概要

<br />序文: このチュートリアルを読む前に、序文を注意深く読んでください。そうしな...

xtrabackup による MySQL データベースのバックアップと復元

mysqldump バックアップは、その独自の特性 (テーブルのロック、基本的に挿入スクリプトまたは...

ウェブサイトのユーザーエクスペリエンスデザイン(UE)

Google Reader で、JunChen が書いた「フロー理論と設計」というタイトルの投稿を見...

VueはEchartsを使用して3次元棒グラフを実装します

この記事では、Echartsを使用して3次元棒グラフを実装するVueの具体的なコードを参考までに共有...

MySQL の日付と時刻関数の概要 (MySQL 5.X)

1. MySQLは現在の日付と時刻を取得する関数1.1 現在の日付 + 時刻 (日付 + 時刻) ...

VMware Workstation16 と Navicat リモート接続での Centos7 での MySQL8.0 インストール プロセス

目次1. CentOS7+MySQL8.0、yumソースインストール2. MySQLにログインしてパ...

MySQL でグループ化した後、各グループの最大値を取得する詳細な例

MySQL でグループ化した後、各グループの最大値を取得する詳細な例1. テストデータベーステーブル...

Linux で FastDFS ファイル サーバーを構築するための実装手順

目次1. ソフトウェアパッケージ2. gccをインストールする3. libfastcommonをイン...

HTML <!--...--> コメントタグの役割の詳細な分析

多くのウェブサイトのソースコードを確認すると、多くのコメントが見つかります。特に、ソース文書にコメン...

VMware ESXi 6.0 および仮想マシンのインストール チュートリアルの展開 (画像とテキスト)

社内には以前からアイドル状態だった、構成の整ったサーバーがあったので、EXSI 6.0 を使って複数...

CSSは複数の要素をボックスの両端に揃える効果を実現します

要素の両端を揃える配置レイアウトは、実際の開発のいたるところで見られます。これは、フレックスレイアウ...

検索データ表示を実装するJavaScript

この記事ではJavaScript検索のデータ表示コードを参考までに共有します。具体的な内容は以下のと...