#TIL26 (2)


chain

  • jQueryのメソッドには、自分を戻り値として返さなければならないルールがあります.
  • により、一度に選択されたオブジェクトを連続的に制御することができる.
  • チェーンの利点

  • コードが簡潔になります.
  • は人間の言語と類似しており、思考の自然過程と一致している.
  •   <a class="site" href="http://www.naver.com" 
      target="_self" title="네이버">네이버</a>

    jQueryを使用してエンコードを行います。


    $('a.site').html(「次へ」)です.attr('href',' http://www.daum.net' )
    .attr('target','_blank').attr(「title」,「次」)です.css('color','orange');

    JavaScriptのDOMを使用してエンコードを行います。


    const siteEl = document.querySelector('a.site');
    siteEl.textContent="次へ";
    siteEl.setAttribute('href',' http://www.daum.net' );
    siteEl.setAttribute('target','_blank');
    siteEl.setAttribute(「title」,「次へ」)
    siteEl.style.color = 'orange';
    以前

    後.

     

    ナビゲーション(遍歴)

  • チェーンのオブジェクトを変更することによってチェーンを延長し続ける方法
  • .
  • 、すなわち、ループを使用してチェーン内でオブジェクトを移動することができる.
  • 複雑すぎるチェーンは、コードの可読性を低下させる
  • .
    <例>
      <ul class="menu">
        <li class="item1">item1</li>
        <li class="item2">item2</li>
        <li class="item3">item3</li>
        <li class="item4">item4</li>
      </ul>
    
    $('ul.menu').find('.item1').css('background-color','red').end().find('.item4').css('background-color','blue');