セレクタはDOM(Document Object Model)要素を選択する。
記述スタイル
セレクタに続けてメソッドをチェインして記述できる (メソッドチェイン)。
|
1 |
$('セレクタ').css(....).hide(...) |
セレクタで使われる記号
- > 直下の子要素
- スペース それ以下の要素
- / 複数の要素
- + 隣接する要素
セレクタ適用例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ul id="main"> <li>1</li> <li class="item">2</li> <li class="item">3</li> <li>4 <ul> <li>4-1</li> <li class="item">4-2</li> <li class="item">4-3</li> <li>3-4</li> </ul> </li> </ul> |
main直下のitemを選択
|
1 |
$('#main > .item').css('color','red'); |
main以下のitemを選択
|
1 |
$('#main .item').css('color','red'); |
pとitemを選択
|
1 |
$('p, .item').css('color','red'); |
itemに隣接するitemを選択
|
1 |
$('.item + .item').css('color','red'); |
フィルタ
- :eq()
- :gt()
- :lt()
- :even
- :odd
- :contains()
- :first
- :last
フィルタ適用例
3番目にあるitemを選択
|
1 |
$('.item:eq(2)').css('color','red'); |
最後にあるitemを選択
|
1 |
$('.item:last').css('color','red'); |
DOM要素を指定するメソッド
- parent()
- children()
- next()
- prev()
- siblings()