爆速でマスターするため、専門的なことはハショってます!
はい!覚え書きです!
いじる要素(DOM要素)の指定方法
idとかclassで指定
下記のようなhtmlの場合
<ul id="main">
<li>0</li>
<li class="item">1</li>
<li class="item">2</li>
<li>
3
<ul id="sub">
<li>3-0</li>
<li>3-1</li>
<li class="item">3-2</li>
<li class="item">3-3</li>
</ul>
</li>
</ul>
こんな感じで指定できます。
//id指定
$('#sub').css('color','red');
//class指定
$('.item').css('color','red');
idとかclassに記号を加えたもの
// > 直下の子要素
// , 複数の要素
// + 隣接する要素
// > 直下の子要素
$('#main > .item').css('color','red');
// , 複数の要素
$('p, .item').css('color', 'red');
// + 隣接要素(この場合.itemの横の.itemのテキストが赤くなる)
$('.item + .item').css('color', 'red');
フィルタを使う
//eqフィルタ
//番号で指定した要素を指定できる(※0からカウントが始まる)
$('#sub > li:eq(3)').css('color', 'red');
//:gt() greater than(指定した数字より大きい物を選択)
//:lt() less than (指定した数字より小さい物を選択)
$('#sub > li:gt(0)').css('color', 'red');
$('#main > li:lt(2)').css('color', 'blue');
※以上、以下ではないので注意
// :even 偶数
// :odd 奇数
$('#sub > li:even').css('color', 'red');
$('#main > li:odd').css('color', 'blue');
// :contains
//('pならp要素の中のものを指定する
//<p>ちょめhoge</p>なら「ちょめ」でも「hoge」でもOK')
$('#sub > li:contains("hoge")').css('font-weight', 'bold');
メソッドを使ったいじる要素(DOM要素)の指定
//parent(), children() 親要素と子要素
$('#sub').parent().css('color', 'red');
//※この場合#subの親要素のみではなく、#sub自身も含む
$('#sub').children().css('color', 'red');
//※この場合#subの子要素のみではなく、#sub自身も含む
// next() 1つ次の要素
$('#sub li:eq(2)').next().css('color', 'red');
// prev() 1つ前の要素
$('#sub li:eq(2)').prev().css('color', 'red');
属性で指定
// 属性による指定とは?
/* 例
<a href="http://google.com">google</a>
があったとしたら「a要素の href属性が http://google.comのもの」を指定する。
ということ。
*/
$('a[href="http://google.com"]').css('background-color', 'red');
// href="http://google.com"のイコール部分は判定なのでほかにもいくつかある。
// =
// != 否定
$('a[href!="http://google.com"]').css('background-color', 'red');
// *= 〜が含まれる (先頭はアスタリスク)
$('a[href*="dotinstall"]').css('background-color', 'green');
// $= 〜で終わる
$('a[href$="com"]').css('font-weight', 'bold');
// ^= 〜で始まる
$('a[href^="v"]').css('text-decoration', 'underline');