JavaScript (HTML5): はじめての jQuery

jQuery

IE/FF/Chrome/Safari/iOS/Android など様々な環境に対して差異無いコードを書く事ができるようにするための JavaScript ライブラリ。

http://jquery.com/

ここからダウンロードするか、jQuery への直リンクが許可されているので HTML 内に URL を記述する。

JavaScript を生で書くと、凄く長い命令になる事が多いが、ショートカットでコードが書けるようになっているので様々な環境で採用されている。

 

練習用のテンプレート HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test</title>
	</head>
	<body>
		<!-- HTML タグを書く -->

		<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
		<script>
		// JavaScript のコードを書く
		$(function() {
			// jQuery のコードを書く

		});
		</script>
	</body>
</html>

 

セレクタ

JavaScript から、HTML のタグ要素を選択する方法をセレクタといいます。
セレクタでタグを選択して、メソッドによって何らかの処理をしてやる、というのが jQuery の基本になります。

画面にある p タグの色を赤変更する

$('p').css('color', 'red');

画像をフェードアウトする

$('p').hide('slow');

 

class や id をセレクトする

実はセレクタは、 CSS でスタイルを指定する要素を定義するときのセレクタとほぼ同等のものが使えます。

.warning を黄色にする

<span class="warning">あぶなーい</span>
$('.warning').css('color', 'yellow').css('font-weight', 'bold');

#main をフェードインする

<div id="main"></div>
$('#main').fadeIn('slow');

#list .item の色を様々なパターンで変更する

<ul id="list">
	<li class="item"></li>
	<li class="item2"></li>
	<ul>
		<li class="item2"></li>
		<li class="item"></li>
	</ul>
</ul>
<p class="item"></p>
// #list のすぐ下にある item を選択
$('#list > .item').css('color', 'blue');
// item と item2 クラスを選択
$('.item, .item2').css('color', 'blue');
// .item の次の .item2 を選択する
$('.item + .item2').css('color', 'blue');