jQuery勉強メモ
①
書き方は、 $(document).ready(function(){
このdocumentが読み込まれたら、次の処理をしない、の意味
となるが、もっと簡単に書くことが出来、
$(document).ready(function(){は、もっと短く書く事が出来、$(function()と記述することも出来る
② JQueryの勉強方法は、セレクターとメゾッドを覚えること。
//セレクター：処理対象となるDOM要素を指定すること
// メソッド：処理
③
メソッドは、続けて書くことができる
$('p').css('color', 'red').hide('slow');
と書くと、カラーを赤字にして、ゆっくり消す といった処理ができる様になる。
※メソッドを続けて書くことを、「メソッドチェーン」と言う
③
・セレクターは、$('ｘｘｘ')と記述する
・html要素を指定する場合は、そのまま p とか、h1とかulとか記述すればok
・id要素へ指定する場合は、css同様に、 #をつけて記述する。例： #main , #sab 等
・class要素の場合は、. ドットをつけてあげる。 例： .item
④
・item クラスがついているものだけを赤くしたい場合
$(".item").css('color', 'red');
・subのid要素を赤くしたい場合
$("#sub").css('color', 'red');
⑤ セレクターとメゾットはいろいろな記号を使って便利に処理が出来る
例えば、、
「 > 」は、直下の子要素
「 」（空白）は、それ以下の要素
「 , 」は、複数の要素
「 + 」は、隣接する要素
⑥
・例えば、メインidの直下のclass のitem 要素だけをピンク色にしたい場合。
$("#main > .item").css('color', 'pink');
・例えば、メインidの以下のclass のitem 要素だけをピンク色にしたい場合。
$("#main .item").css('color', 'pink');
※ 空白にすれば、それ以下の要素がピンク色になる。
⑦
・例えば、ｐ要素とitem 要素だけを青色にしたい場合。
$("p, .item").css('color', 'blue');
と記述する
⑧
・例えば、item 要素に隣接するitem要素だけを青色にしたい場合。
$(".item + .item").css('color', 'blue');
とする。
⑨ セレクターで使えるフィルターの基本
基本の種類
:eq() カッコの中の添字（最初が０番目、からカウント）数字の部分だけ処理したい場合
:gt() カッコの中より大きい
greater thanの意味
:lt() カッコの中より小さい
less thanの意味
:even 偶数（指定不要なのでカッコは無し）
:odd() 奇数（上記同様、カッコ無し）
：contains()カッコの中の数字等がある中身を指定出来る
：first 最初
：last 一番最後
といった用語がある
・例えば、subの直下のliの要素に対して、選ぶ場合、
$("#sub > li").css('color', 'yellow');
と記載する。
・例えば、eq番目だけの色を黄色に変えたい場合、
$("#sub > li:eq(2)").css('color', 'yellow');
と記載する。
・例えば、gtを使うと、1番目以降の色を黄色に変えたい場合、
$("#sub > li:gt(1)").css('color', 'yellow');
と記載する。
・例えば、奇数番目の色を黄色に変えたい場合、
$("#sub > li:odd").css('color', 'yellow');
と記載する。
・例えば、中の文字などに4が記載されている所だけ黄色に変えたい場合、
$("#sub > li:contains('4')").css('color', 'yellow');
と記載する。
・例えば、最初の箇所だけ黄色に変えたい場合、
$("#sub > li:first").css('color', 'yellow');
と記載する。
⑩
メゾッドを使ったDOM要素の指定を勉強
parent()ある要素の親要素を指定したい時
children()ある要素の子要素を指定したい時
next()次の要素を指定したい時
prev()前要素を指定したい時
siblings() 兄弟要素 指定された要素の同列の要素を指定したい時
といった内容がある。
・例えば、subの親要素全体を指定したい時、 $("#sub").parent().css('color', 'red');
});
と記述する
・例えば、subの子要素全体を指定したい時、
$("#sub").children().css('color', 'red');
});
と記述する
・例えば、subのliの要素の上から２番目（0,1,2番目）の次（next)の要素を指定したい時、
$("#sub > li:eq(2)").next().css('color', 'red');
});
と記述する
・例えば、subのliの要素の上から２番目（0,1,2番目）の要素と同列の要素を指定したい時、
$("#sub > li:eq(2)").siblings().css('color', 'red');
});
と記述する