jQuery勉強めも①
jQueryのことで勉強したことめも
全く初心者なので書き方とかほんとに基本のとこから
準備
jQueryをローカルに落として、headの中に読み込ませます
<script src="files/js/jquery.js"></script>
記述
jQueryを読み込ませた後、ready関数（jQueryを実行するのに必要な関数）で処理を実行させます
$(document)ready(function(){
// 処理
}); htmlのページ構成（document）が読み込まれたら（ready）、｛ ｝の処理を実行します。
これは、以下の様に省略して書けます
$(function(){
// 処理
}); セレクタとメソッド
jQueryではセレクタとメソッドを使って処理を実行させます。
・セレクタ：処理対象となる要素を指定する記法
・メソッド：行いたい処理
htmlのp要素の文字を赤色にしたい場合、
$(function)(){
$("p").css('color','red');
}); となり、$("")の中にあるpがセレクタ、.css('color','red')がメソッドとなります
セレクタの指定は、htmlの要素を指定する場合は、$("p")とそのまま
mainというidを指定するときは$("#main")、classを指定するときは$(".main")と記述します
セレクタいろいろ
以下のhtmlを、セレクタを使って文字色を赤にします
<p>jQueryの勉強</p> <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> <li>3-4</li> </ul> </li> </ul>
①「>」直下の子要素
$(function)(){
$("#main>.item").css('color','red');
});#mainのすぐ下の.itemにだけ反映されます
<li class="item">1</li> <li class="item">2</li>
②「 」（空白）それ以外の子要素
$(function)(){
$("#main .item").css('color','red');
});空白にすると、#mainの下のすべての.itemに反映されます
<li class="item">1</li> <li class="item">2</li>
この部分と
<li class="item">3-2</li> <li class="item">3-3</li>
この部分です
③「,」複数の要素
$(function)(){
$("p,.item").css('color','red');
});「,」で区切ると、p要素と、.itemの両方に反映されます
<p>jQueryの勉強</p>
p要素と、
<li class="item">1</li> <li class="item">2</li>
#mainの下の.itemと
<li class="item">3-2</li> <li class="item">3-3</li>
#mainの下のすべての.itemに反映されます
④「+」隣接する要素
$(function)(){
$(".item+.item").css('color','red');
});.itemに隣接する.itemにだけ反映されます
一つ目のitemが付いている「1」に隣接する以下の部分と、
<li class="item">2</li>
#mainの中の#subの下の、一つ目のitemが付いている「3-2」に隣接する
<li class="item">3-3</li>
この部分です
