jQueryの基本操作

参考

jQuery

セレクター

セレクター
ソース 概要
$(‘body’) [存在] <body> タグの要素を選択
$(‘#id1’) [存在] ID名 id1 の要素を選択
$(‘.class1’) [存在] クラス名 class1 の要素を選択
$(‘li:not(”.class1”)’) [NOT] <li>タグでクラス名 class1 が指定されていない要素を選択
$(‘.class1 , .class2’) [OR] クラス名 class1もしくは クラス名 class2 の要素を選択
$(‘.class1.class2’) [AND] クラス名 class1 class2 2つ持つ要素を選択
$(‘.class1 .class2’) [孫] クラス名 class1 の要素の にあるクラス名 class2 の要素を選択
$(‘.class1 > .class2’) [孫] クラス名 class1 の要素の 直下 にあるクラス名 class2 の要素を選択
$(‘[disabled][readonly]’) 属性[存在] disabled属性とreadonly属性がある要素 を選択
$(‘a[href = “value”]’) 属性[完全一致] <a>タグのhref属性の値が valueの要素 を選択
$(‘a[href != “value”]’) 属性[否定] <a>タグのhref属性の値が valueでない要素 を選択
$(‘a[href ^= “value”]’) 属性[前方一致] <a>タグのhref属性の値が valueから始まる要素 を選択
$(‘a[href $= “value”]’) 属性[後方一致] <a>タグのhref属性の値が valueで終わる要素 を選択
$(‘a[href *= “value”]’) 属性[部分一致] <a>タグのhref属性の値に valueが含まれている要素 を選択

トラバース (兄弟関係のみ)

<div><!-- 先祖 -->
  <div><!-- 親 -->
    <div><!-- 兄 --></div>
    <div id="self"><!-- 自分 -->
      <div><!-- 子 -->
        <p><!-- 孫 --></p>
      </div>
    </div>
    <div><!-- 弟 --></div>
  </div>
</div>
トラバース
ソース 概要
$(‘#self’).find(‘.class1’) [子孫] 自分の 中の クラス名 class1 の要素を選択
$(‘#self’).children(‘.class1’) [子] 自分の 直下の クラス名 class1 の要素を選択
$(‘#self’).parent() [親] 自分の 直上の 親要素を選択
$(‘#self’).parents() [親、先祖] 自分の親、および先祖要素を選択
$(‘#self’).parents(‘.class1’) [親、先祖] 自分の親、および先祖要素でクラス名 class1 の要素を選択
$(‘#self’).closest(‘.class1’) [親、先祖] 自分から 最も近い クラス名 class1 の親、および先祖要素を選択
$(‘#self’).siblings() [兄弟] 兄弟要素を選択
$(‘#self’).siblings(‘p’) [兄弟] 兄弟要素の中で <p> タグの要素を選択
$(‘#self’).next() [兄弟] 隣接する弟要素を選択
$(‘#self’).next(‘.class1’) [兄弟] 隣接する弟要素の中でクラス名 class1 の要素であれば選択(それ以外であれば選択しない)
$(‘#self’).prev() [兄弟] 隣接する兄要素を選択
$(‘#self’).next(‘.class1’) [兄弟] 隣接する兄要素の中でクラス名 class1 の要素であれば選択(それ以外であれば選択しない)

挿入

before, after, prepend, append

<!-- before -->
<p id="target">
  <!-- prepend -->
    ターゲット
  <!-- append -->
<p>
<!-- after -->
$('#target')
  .before('<div>before</div>')
  .after('<div>after</div>')
  .prepend('<span>prepend</span>')
  .append('<span>append</span>');

insertAfter, insertBefore, prependTo, appendTo

<!-- insertBefore -->
<p id="target">
  <!-- prependTo -->
  ターゲット
  <!-- appendTo -->
</p>
<!-- insertAfter -->
$('<div>insertBefore</div>').insertBefore('#target');
$('<div>insertAfter</div>').insertAfter('#target');
$('<span>prependTo</span>').prependTo('#target');
$('<span>appendTo</span>').appendTo('#target');