セレクタ

jQuery

基本は$('要素')

  • html要素(p h1 ul ...) ⇨ そのまま
【html部】
<p>jQueryの練習</p>

【jQuery部】
// p要素を赤文字にする
$('p').css('color','red');
  • id ⇨ #'id名'
【html部】
<p id="main">jQueryの練習</p>

【jQuery部】
// idがmainの要素を赤文字にする
$('#main').css('color','red');
  • class ⇨ .'class名'
【html部】
<p class="title">jQueryの練習</p>

【jQuery部】
// classがtitleの要素を赤文字にする
$('.title').css('color','red');
  • その他要素の指定
    • > ⇨ 直下の子要素
    • (空白) ⇨ それ以下の要素
    • , ⇨ 複数の要素
    • + ⇨ 隣接する要素
// main直下のitemクラスを赤字にする
$('#main>.item').css('color','red');
// main以下の全itemクラスを赤字にする
$('#main .item').css('color','red');
// p要素とitemクラスを赤字にする
$('p, .item').css('color','red');
// itemクラスに隣接するitemクラスを赤字にする
$('.item + .item').css('color','red');
  • フィルタを利用した要素指定
    • :eq(index), :gt(index), :lt(index) *1
    • :even, :odd
    • :contains(value)
    • :first, :last
// sub直下で2番目のli要素を赤字にする
$('#sub>li:eq(2)').css('color','red');
// sub直下で2番目以降のli要素を赤字にする
$('#sub>li:gt(1)').css('color','red');
// sub直下で偶数番目のli要素を赤字にする
$('#sub>li:even').css('color','red');
// sub直下のli要素で値に2を含むものを赤字にする
$('#sub>li:contains(2)').css('color','red');
// sub直下の最初のli要素を赤字にする
$('#sub>li:first').css('color','red');
  • メソッドを利用した要素指定
    • parent(), children()
    • next(), prev()
    • siblings()
// subとsubの親要素を赤字にする
$('#sub').parent().css('color','red');
// sub直下で2番目の次のli要素を赤字にする
$('#sub > li:eq(2)').next().css('color','red');
// sub直下で2番目のli要素の兄弟要素を赤字にする
$('#sub > li:eq(2)').siblings().css('color','red');
  • 属性セレクタ
    • =, !=, *=(〜を含む), ^=(〜で始まる), $=(〜で終わる)
// hrefが"http://google.com"の背景色を赤字にする
$('a[href="http://google.com"]').css('background','red');
// hrefが"http://google.com"以外の背景色を赤字にする
$('a[href="http://google.com"]').css('background','red');

*1:要素のindexは0から