今回はセレクタの超基本となるものをご紹介していきたいと思います。
それではいってみましょう(*^^)v
Menu
子（直下）セレクター（>）
指定は → >
$(‘親要素 > 子要素’)
1 2 3 | $('button').click(function() { $('.sample1 > li').css('color', 'red'); }); |
1 2 3 4 5 6 7 8 9 10 11 12 | <h2>サンプル</h2> <ul class="sample1"> <li>aaa</li> <li>bbb</li> <li>ccc</li> <ul class ="sample2"> <li>ddd</li> <li>eee</li> <li>fff</li> </ul> </ul> <button>ボタン</button> |
【解説】
ulのsampleクラスの子のliにstyle属性が効きます。
【結果】
子孫セレクタ（空白）
指定は → 空白
$(‘親要素 子要素’)
1 2 3 | $('button').click(function() { $('.sample1 li').css('color', 'red'); }); |
1 2 3 4 5 6 7 8 9 10 11 12 | <h2>サンプル</h2> <ul class="sample1"> <li>aaa</li> <li>bbb</li> <li>ccc</li> <ul class ="sample2"> <li>ddd</li> <li>eee</li> <li>fff</li> </ul> </ul> <button>ボタン</button> |
【解説】
ulのsample1クラスの子孫のliにstyle属性が効きます。
【結果】
兄弟（同階層）の1つ後ろのみ（+）
指定は → +
$(1個前要素 + 1個後要素’)
1 2 3 | $('button').click(function() { $('h3+li').css('color', 'red'); }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <h3>サンプル</h3> <ul class="sample1"> <h3>sample1</h3> <li>aaa</li> <li>bbb</li> <li>ccc</li> <ul class="sample2"> <h3>sample2</h3> <li>ddd</li> <li>eee</li> <li>fff</li> </ul> </ul> <button>ボタン</button> |
【解説】
h3要素の次のli要素のみにstyle属性が効きます。
【結果】
兄弟（同階層）の後ろ全部（～）
指定は → ~
$(‘前要素 ~ 後要素’)
1 2 3 | $('button').click(function() { $('h3~li').css('color', 'red'); }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <h3>サンプル</h3> <ul class="sample1"> <h3>sample1</h3> <li>aaa</li> <li>bbb</li> <li>ccc</li> <ul class="sample2"> <h3>sample2</h3> <li>ddd</li> <li>eee</li> <li>fff</li> </ul> </ul> <button>ボタン</button> |
【解説】
h3要素の後ろのli要素全部にstyle属性が効きます。
【結果】
まとめ
今回はJQueryの基本のセレクターについてデモしてみました。
jQueryにはまだまだ複雑に取得するセレクタが多数用意されているのでほぼ取得できないということはないと思います。
次回はもうちょっと複雑な取得の方法を解説していきたいと思います！
以上です(^O^)
