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');
});
と記述する