はじめに
jQueryオブジェクトを指定する時に、たまに書き方を忘れたり、あーこうゆう書き方もあったなとなることがあるので、まとめておきます。
cssのセレクタでの指定方法
| 指定対象 |
記述方法 |
記述例 |
| id |
$('#指定するID') |
$('#target') |
| class |
$('.指定するクラス') |
$('.target') |
| タグ名 |
$('指定するタグ名') |
$('div') |
| 複数のセレクタ |
$('セレクタ１,セレクタ2') |
$('#target, .target') |
| 全ての要素 |
$('*') |
$('*') |
| 親子関係 |
$('parent > child') |
$('#target > div') |
| 前後関係 |
$('prev + next') |
$('.target + div') |
| 属性 |
$('[属性名]') |
$('.target[type]') |
| 属性値 |
$('[属性名="属性値"]') |
$('.target[type="button"]') |
| 利用可能な要素 |
$(':enabled') |
$('selected:enable') |
| 利用不可状態な要素 |
$(':disabled') |
$('selected:disabled') |
| チェック済みのチェックボックス |
$(':checked') |
$('selected:checked') |
jQuery独自の擬似セレクタでの指定方法
| 指定対象 |
記述方法 |
記述例 |
| 最初の要素 |
$(':first') |
$('.target:first') |
| 最後の要素 |
$(':last') |
$('.target:last') |
| 偶数番目の要素 |
$(:even') |
$(tr:even') |
| 奇数番目の要素 |
$(':odd') |
$('tr:odd') |
| テキストボックス |
$(':text') |
$('.target:text') |
| ラジオボタン |
$(':radio') |
$('.target:radio') |
| チェックボックス |
$(':checkbox') |
$('.target:checkbox') |
| 見えている要素 |
$(':visible') |
$('div:visible') |
| 見えていないの要素 |
$(':hidden') |
$('div:hidden') |
| 子供を持つ要素 |
$(':parent') |
$('div:parent') |
| 子供を持たない要素 |
$(':empty') |
$('div:empty') |
| アニメーション中の要素 |
$(':animated') |
$('img:animated') |
