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

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

<スタイル>
  * {
       マージン: 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 に変更します。})