jQueryのセレクタ
readyメソッドについて
HTMLの読込みが終わった後に実行させるためのメソッドです。これがないとbody要素内のHTMLよりも先にhead要素内のjQuaryが実行されてしまいます。
readyメソッドの書き方
$(document).ready(function(){
//ここにjQueryの処理を記述
});
省略形の書き方
$(function(){
//ここにjQueryの処理を記述
});
セレクタ―
jQueryのスクリプトでは、（１）どのHTML要素を操作するかを「セレクタ―」で指定し、（２）操作する内容（メソッド）を記述します。jQueryは、ほぼこの形式で処理を記述します。
$(function(){
});
セレクタの種類
CSSでよく利用されるセレクタ―
要素セレクタ― $('要素名') 特定の要素
IDセレクタ― $('#ID名') 特定のID属性を持つ要素
クラスセレクター $('.クラス名') 特定のclass属性を持つ要素
子孫セレクター $('要素1 要素2') 特定の要素の内側にある要素
ユニバーサルセレクタ― $('*') 全ての要素
グループセレクタ― $('セレクタ―1, セレクタ―2,・・・') 複数のセレクタ―
CSS2.1のセレクタ―
子セレクター $('親要素名>子要素名') 特定の要素の直下の子要素
隣接セレクター $('要素1+要素2') 特定の要素の次の要素
first-child疑似クラス $('要素:first-child') 同一要素内の最初の要素
CSS3のセレクタ―
間接セレクタ― $('要素1~要素2') 特定の要素の後に出現する要素
否定疑似クラス $('要素1:not(要素2)') 特定要素のうち要素2の条件を除く
empty疑似クラス $('要素:empty') 子要素やテキストを含まない要素
ntn-child疑似クラス $('要素:nth-child(番号)') 要素内の指定した番号の要素
last-child疑似クラス $('要素:last-child') 要素内の最後の要素
only-child疑似クラス $('要素:only-child') 特定の要素が1つだけ含まれる要素
nth-last-child疑似クラス $('要素:nth-last-child(番号)') 要素内を後ろから数えて指定した番号にある要素
nth-of-type疑似クラス $('要素:nth-of-type(番号)') 同一要素で指定した番号にある要素
nth-last-of-type疑似クラス $('要素:nth-last-of-type(番号)') 同一要素で後ろから数えて指定した番号にある要素
first-of-type疑似クラス $('要素:first-of-type') 同一要素で最初に当たる要素
last-of-type疑似クラス $('要素:last-of-type') 同一要素で最後に当たる要素
only-of-type疑似クラス $('要素:only-of-type') 1つだけ存在する要素
lang疑似クラス $(':lang(言語)') 特定の言語を指定された要素
CSSの属性セレクタ―
[attribute] $('[属性名]') 特定の属性を持つ要素
[attribute='value'] $('[属性名="値"]') 特定の属性が指定した値を持つ要素
[attribute!='value'] $('[属性名!="値"]') 特定の属性が指定した値を持たない要素
[attribute^='value'] $('[属性名^="値"]') 特定の属性が指定した値で始まっている要素
[attribute$='value'] $('[属性名$="値"]') 特定の属性が指定した値で終わっている要素
[attribute*='value'] $('[属性名*="値"]') 特定の属性が指定した値を含んでいる要素
[attributeFilter1] $('[属性セレクタ―1][属性セレクタ―2]') 複数の属性セレクタ―に該[attributeFilter2] 当する要素
jQueryの独自セレクタ―
firstセレクタ― $('要素:first') 指定した要素の最初の要素
lastセレクタ― $('要素:last') 指定した要素の最後の要素
evenセレクタ― $('要素:even') 指定した要素の偶数番目の要素（0から数える）
oddセレクタ― $('要素:odd') 指定した要素の奇数番目の要素（0から数える）
eqセレクタ― $('要素:eq(番号)') 指定した番号の要素（0から数える）
ltセレクタ― $('要素:lt(番号)') 指定した番号より前の要素（0から数える）
gtセレクタ― $('要素:gt(番号)') 指定した番号より後の要素（0から数える）
headerセレクタ― $('.header') h1～h6までのheading要素
containsセレクタ― $('要素:contains(文字列)') 特定の文字列が含まれている要素
hasセレクタ― $('要素1:has(要素2)') 特定の要素が含まれている要素
parentセレクタ― $('要素:parent') 子要素やテキストを含む要素
セレクタ―を使ってみる
セレクタ―練習1
<script>
//jQueryコードを記述
$(function(){
$('h1').css('color','red');//要素セレクタ
$('li').css('color','red');//要素セレクタ
$('#top').css('color','blue');//idセレクタ
$('#last a').css('color','green');//idセレクタ
$('.li > span').css('color','yellow');//idセレクタ
});
</script>
</head>
<body>
<h1>大見出し</h1>
<ul>
<li id="top">テキストテキスト</li>
<li class="li"><span>テキスト</span>テキスト</li>
<li class="li">テキストテキスト</li>
<li id="last"><a href="#">テキストテキスト</a></li>
</ul>
</body>
jQueryを実行前のテキスト
jQueryを実行後のテキスト
セレクタ―練習2
<script>
//jQueryコードを記述
$(function(){
$('#first ~ li').css('color','blue');//間接セレクタ―
$('#first + li').css('color','green');//隣接セレクター
$('[class]').css('color','red');//CSS属性セレクタ―
$('[title="two"]').css('color','red');//CSS属性セレクタ―
});
</script>
</head>
<body>
<h1>大見出し</h1>
<ul>
<li id="first">テキストテキスト</li>
<li>テキストテキスト</li>
<li>テキストテキスト</li>
<li class="second">テキストテキスト</li>
<li title="two" id="third">テキストテキスト</li>
<li id="fourth">テキストテキスト</li>
</ul>
</body>
jQueryを実行前のテキスト
jQueryを実行後のテキスト
セレクタ―練習3
<script>
//jQueryコードを記述
$(function(){
$('li:not(:first-child)').css('color','red');//否定疑似クラス
});
</script>
</head>
<body>
<h1>大見出し</h1>
<ul>
<li id="first">テキストテキスト</li>
<li>テキストテキスト</li>
<li>テキストテキスト</li>
</ul>
</body>
jQueryを実行前のテキスト
jQueryを実行後のテキスト
