JQueryのセレクタ指定の方法

この記事について

JQueryのセレクタの指定方法をまとめています。

指定方法

指定方法はいくつかあるが、ここでは基本的なものだけまとめる。

＜指定方法＞
$('hoge')
→htmlのhogeタグ要素を指定

$('hoge > huga')
→hoge要素直下のhuga要素を指定

$('hoge huga')
→hoge要素内のhuga要素を指定

$('hoge, huga')
→hoge要素とhuga要素を指定

$('hoge + huga')
→hoge要素に隣接するhuga要素を指定

$('#hoge')
→id="hoge"を指定

$('.hoge')
→class="hoge"を指定

サンプルコード

上記の指定方法のわかりにくものだけ抜粋

sample.html

    <ul id="main">
        <li>0</li>
        <li class="hoge">1</li>
        <li class="hoge">2</li>
        <li>
            3
            <ul id="sub">
                <li>3-0</li>
                <li>3-1</li>
                <li class="hoge">3-2</li>
                <li class="hoge">3-3</li>
                <li>3-4</li>
            </ul>
        </li>
    </ul>
  <script>
    $(function(){
      $('#main > .hoge').css('color', 'red');
    });
  </script>
/１と２が赤に変わる

もういっちょ

sample.html

    <ul id="main">
        <li>0</li>
        <li class="hoge">1</li>
        <li class="hoge">2</li>
        <li>
            3
            <ul id="sub">
                <li>3-0</li>
                <li>3-1</li>
                <li class="hoge">3-2</li>
                <li class="hoge">3-3</li>
                <li>3-4</li>
            </ul>
        </li>
    </ul>
  <script>
    $(function(){
      $('.hoge + .hoge').css('color', 'blue');
    });
  </script>
/2と3-3が青に変わる