jQueryのセレクタ

categories: javascript

前回の続き。DOM要素を選択するためのセレクタをCSS, JavaScriptと比較しながら淡々と試す。次のHTMLに対してCSSの操作をします。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="jquery-1.4.4.js"></script>
		<title>jQuery selector</title>
	</head>
	<body>
		<div id="header">
			<h1>Header</h1>
			<p>ヘッダーのp要素</p>
		</div>
		<div id="main">
			<h2>Main</h2>
			<div class="section">
				<h3>Section 1</h3>
				<p>セクションのp要素</p>
			</div>
			<div class="section">
				<h3>Section 2</h3>
			</div>
			<div class="section">
				<h3>Section 3</h3>
			</div>
		</div>
		<div id="footer">
			<h2>footer</h2>
			<p>フッターのp要素</p>
		</div>
	</body>
</html>

要素指定(タグ)

h1の色を赤にする。

$('h1').css('color', 'red');
h1 { color: red; }
var elements = document.getElementsByTagName('h1');
for (var i = 0; i < elements.length; i++) {
	elements[i].style.color = 'red';
	// 次のような書き方も出来るけど、IEは未対応
	// elements[i].style.setProperty('color', 'red');
}

// h1は本来1つしかないはずなので、次の書き方でもいいかもしれない
// document.getElementsByTagName('h1')[0].style.color = 'red';

ID指定

id=”header”の背景色を青にする。

$('#header').css('background-color', 'blue');
#header { background-color: blue; }
document.getElementById('header').style.backgroundColor = 'blue';

クラス指定

class=”section”の背景色をシアンにする。

$('.section').css('background-color', 'cyan');
.section { background-color: cyan; }
var elements = document.getElementsByClassName('section');
for (var i = 0; i < elements.length; i++) {
	elements[i].style.backgroundColor = 'cyan';
}

複数指定

h1とh2の色を緑にする。

$('h1, h2').css('color', 'green');
h1, h2 { color: green; }
var h1 = document.getElementsByTagName('h1');
for (var i = 0; i < h1.length; i++) {
	h1[i].style.color = 'green';
}

var h2 = document.getElementsByTagName('h2');
for (var i = 0; i < h2.length; i++) {
	h2[i].style.color = 'green';
}

子孫要素指定

「セクションのp要素」(divのdivのp)の色を黄色にする。

$('div div p').css('color', 'yellow');
div div p { color: yellow; }
var parents = document.getElementsByTagName('div');
for (var i = 0; i < parents.length; i++) {
	var children = parents[i].getElementsByTagName('div');
	for (var j = 0; j < children.length; j++) {
		var grandchildren = children[j].getElementsByTagName('p');
		for (var k = 0; k < grandchildren.length; k++) {
			grandchildren[k].style.color = 'yellow';
		}
	}
}

属性指定

<input type=”text”>の背景色をグレーにする。

$('input[type="text"]').css('background-color', 'gray');
input[type="text"] { background-color: gray; }
var elements = document.getElementsByTagName('input');
for (var i = 0; i < elements.length; i++) {
	if (elements[i].type === 'text') {
		elements[i].style.backgroundColor = 'gray';
	}
}

jQueryのセレクタ表記はCSSと同じですね。
次回はDOM操作系をやる予定

tags: , ,

Comments

Trackbacks

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です。コメントは承認制です。

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

Trackback URL