jqueryの基本的な使い方をまとめる #2 — 超メモ帳（web式）@復活

1日目:jqueryの基本的な使い方をまとめる #1 - 超メモ帳（Web式）

2日目:ここ

3日目:jqueryの基本的な使い方をまとめる #3 - 超メモ帳（Web式）

4日目:jqueryの基本的な使い方をまとめる #4 - 超メモ帳（Web式）

5日目:jqueryの基本的な使い方をまとめる #5 - 超メモ帳（Web式）

昨日の続き。ドットインストールで勉強した内容をまとめてるだけです。

DOM要素をメソッドでコントロールする

DOM(Document Object Model)とは要するにhtmlの

とかの事。

セレクタで指定するのが普通だが、メソッドを使っても指定できます。

parent() 親要素を指定する
children() 子要素を指定する
next() 次の要素を指定する
prev() 前の要素を指定する
siblings() 兄妹要素を指定する

次のように書きます。いわゆるメソッドチェーンで使います。

// idがsubの親クラスを指定する
$("#sub").parent().css('color', 'red');

兄妹要素というのがわかりにくかった。つまり下記のように指定した要素で選択したもの以外がが指定される。

<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>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
	$(function() {
		$("#sub > li:eq(2)").siblings().css("color", "red");
	});
</script>

上記は下記のようになります

0
1
2
3
- 3-0
- 3-1
- 3-2
- 3-3
- 3-4

属性セレクタ

例えばaタグの中のhrefの文字列検索などができます。これにもいくつかのオプションがあります。

通常指定するにはこんなかんじ。

<p><a href="http://www.google.com">Google</a></p>
<p><a href="http://yahoo.co.jp">Yahoo!</a></p>
<p><a href="http://dotinstall.com">Dotinstall</a></p>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	$(function() {
		$('a[href="http://google.com"]').css("background", "red");
	});
</script>

Googleのリンクの背景が赤くなります

= 属性と等しい
!= 属性と等しくない
*= 属性に含まれる
^= 属性と行頭が一致する
$= 属性と末尾が一致する

メソッドの使い方

メソッドは色々な使い方が出来る。要素のCSSを変更するCSSメソッドでは下記の使い方が出来る。

// メソッドチェーンで文字色を赤、背景色を青に指定
$("p").css("color", "red").css("background", "blue");

// 文字色を取得して表示
// cssメソッドは第二引数を省略すると文字色を受け取ります
console.log($('p').css('color'));

console.logはコンソールにメッセージを送るメソッド。chromeやfirebugなどを使ったプリントデバッグで使えそう。

正常に動作していると”rgb(255, 0, 0)“というメッセージが帰ってきます。

CSSのクラスを指定するメソッドはaddClass。逆に削除するクラスはremoveClass。下記のようにするとCSSのクラスを要素に適応できます。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title>jQueryの勉強</title>
		<style>
			.mystyle{
				border: 5px solid green;
				font-size: 48px;
			}
		</style>
	</head>
	<body>
		<p>jQueryの勉強</p>
		<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
		<script>
			$(function() {
				// スタイルを適応
				$("p").addClass("mystyle");

				// スタイルを外す
				$("p").removeClass();
			});
		</script>
</body>
</html>

動的にCSSを切り替えるときに使えそうです。