jQuery：基本１ - Webデザインのこと、いろいろ

01　cssをかえる
jQueryの練習 - p26：完成版にリンク

<script>
$(document).ready(function() {
  $('li').css('color','red'); // シングルクォーテーションでよい
});
</script>
</head>

<body>
<ul>
<li>HTML5+CSS3</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>ActionScript</li>
<li>PHP+MySQL</li>
</ul>
</body>

02　idを指定してcssをかえる
jQueryの練習 - p28：完成版にリンク

<script>
$(document).ready(function(){
	$('#first').css('color','red');
	// id名はひとつしかないのでliは書かない時代
});
</script>
</head>

<body>
<ul>
<li id="first">HTML5+CSS3</li>
<li id="second">JavaScript</li>
<li id="third">jQuery</li>
<li id="fourth">ActionScript</li>
<li id="fifth">PHP+MySQL</li>
</ul>
</body>

03　idを２つ指定してcssをかえる
jQueryの練習 - p29：完成版にリンク

<script>
//クラスセレクター
$(document).ready(function(){
	$('.second').css('color','red');
	$('.fourth').css('color','blue');
});
</script>
</head>

<body>
<ul>
<li class="first">HTML5+CSS3</li>
<li class="second">JavaScript</li>
<li class="third">jQuery</li>
<li class="fourth">ActionScript</li>
<li class="fifth">PHP+MySQL</li>
</ul>
</body>

04　子孫セレクターでcssをかえる
jQueryの練習 - p30：完成版にリンク

<script>
//子孫セレクター
$(document).ready(function(){
	$('.first strong').css('color','yellow');
	$('#fifth>strong').css('color','red'); //コチラのほうがよく使う
});
</script>
</head>

<body>
<ul>
<li class="first"><strong>テキストテキスト</strong>テキストテキストテキスト</li>
<li class="second"><strong>テキストテキスト</strong>テキストテキストテキスト</li>
<li class="third"><strong>テキストテキスト</strong>テキストテキストテキスト</li>
<li class="fourth"><strong>テキストテキスト</strong>テキストテキストテキスト</li>
<li id="fifth"><strong>テキストテキスト</strong>テキストテキストテキスト</li>
</ul>
</body>

05　ユニバーサルセレクター
全ての要素を選択できる *
jQueryの練習 - p31：完成版にリンク

<script> 
$(document).ready(function(){
	$('li *').css('color','red');  //半角とアスタリスク
});
</script>
</head>

<body>
<ul>
<li><strong>テキスト</strong>テキストテキストテキスト</li>
<li><em>テキスト</em>テキストテキストテキスト</li>
<li><span>テキスト</span>テキストテキストテキスト</li>
<li>テキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキスト</li>
</ul>
</body>

06　グループセレクター
jQueryの練習 - p32：完成版にリンク

<script>
$(document).ready(function(){
	$('#first , #third').css('color','red');
});
</script>
</head>

<body>
<ul>
<li>HTML5+CSS3</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>ActionScript</li>
<li>PHP+MySQL</li>
<li id="first">テキストテキストテキストテキスト</li>
<li id="second">テキストテキストテキストテキスト</li>
<li id="third">テキストテキストテキストテキスト</li>
<li id="fourth">テキストテキストテキストテキスト</li>
<li id="fifth">テキストテキストテキストテキスト</li>
</ul>
</body>

07　子セレクター
jQueryの練習 - p32：完成版にリンク

<script>
$(document).ready(function(){
	$('li > strong').css('color','red');
});
</script>
</head>

<body>
<ul>
<li>HTML5+CSS3</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>ActionScript</li>
<li>PHP+MySQL</li>
<li><strong>テキストテキスト</strong>テキストテキスト</li>
<li>テキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキスト</li>
<li><div><strong>テキスト</strong></div>テキストテキスト<span>テキスト</span></div></li>
<li>テキストテキストテキストテキスト</li>
</ul>
</body>

08　隣接セレクター　よく使う！！
jQueryの練習 - p33：完成版にリンク

<script>
$(document).ready(function(){
	$('#second + li').css('color','red'); //次にくる要素が赤色になる
	$('#third ~ li').css('color','violet'); //~チルダ
	$('li:not(#third)').css('color','blue'); // #thirdじゃなかったら
	// 否定擬似クラス　else～じゃなかったら　といっしょ
});
</script>
</head>

<body>
<ul>
<li id="first">HTML5+CSS3</li>
<li id="second">JavaScript</li>
<li id="third">jQuery</li>
<li id="fourth">ActionScript</li>
<li id="fifth">PHP+MySQL</li>
</ul>
</body>

09　first-child擬似クラス
jQueryの練習 - p34：完成版にリンク

<script>
$(document).ready(function(){
	$('li:first-child').css('color','red');
	$('li:last-child').css('color','violet');
});
</script>
</head>

<body>
<ul>
<li id="first">HTML5+CSS3</li>
<li id="second">JavaScript</li>
<li id="third">jQuery</li>
<li id="fourth">ActionScript</li>
<li id="fifth">PHP+MySQL</li>
</ul>
<ul>
<li id="first">HTML5+CSS3</li>
<li id="second">JavaScript</li>
<li id="third">jQuery</li>
<li id="fourth">ActionScript</li>
<li id="fifth">PHP+MySQL</li>
</ul>
</body>

10　nth-child擬似クラス
任意の要素だけに命令できる
jQueryの練習 - p34：完成版にリンク

<script>
$(document).ready(function(){
	$('li:nth-child(3)').css('color','blue');
	});
</script>
</head>

<body>
<ul>
<li>HTML5+CSS3</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>ActionScript</li>
<li>PHP+MySQL</li>
</ul>
</body>