読者です 読者をやめる 読者になる 読者になる

Webデザインのこと、いろいろ

Webデザインの学習をはじめた初心者のブログです。

jQuery:基本1

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を2つ指定して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>
広告を非表示にする