jQuery操作系API(続き)

categories: javascript

前回の続きで、今日もDOM操作系をもくもくと。ベースの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" />
		<link rel="stylesheet" type="text/css" href="style.css" />
		<script type="text/javascript" src="jquery-1.4.4.js"></script>
		<title>jQuery manipulation</title>
	</head>
	<body>
		<h1 class="title">タイトル</h1>
		<p id="text">本文</p>
		<p><a href="http://utbrew.com/" id="link">リンク</a></p>
		<div id="box">
			<input id="input" value="123" />
		</div>
	</body>
</html>
@charset "utf-8";

.title {
	color: blue;
}

.red {
	color: red;
}

#box {
	width: 200px;
	height: 200px;
	background-color: gray;
}

要素を削除

id=”text’を削除。(「本文」が消える。)

$('#text').remove();
var text = document.getElementById('text');
text.parentNode.removeChild(text);

要素を入れ替える

「<p id=”text”>本文</p>」を「<h2>章</h2>」に書き換える。(「章」と表示される。)

$('#text').replaceWith('<h2>章</h2>');
var h2 = document.createElement('h2');
h2.appendChild(document.createTextNode('章'));
var text = document.getElementById('text');
text.parentNode.replaceChild(h2, text);

要素を要素で囲む

id=”link’を「<em></em>」で囲む。(「リンク」と表示される。)

$('#link').wrap('<em></em>');
var link = document.getElementById('link');
var em = document.createElement('em');
link.parentNode.insertBefore(em, link);
em.appendChild(link);

内容を要素で囲む

「本文」を「<strong></strong>」で囲む。(「本文」と表示される。)

$('#text').wrapInner('<strong></strong>');
var text = document.getElementById('text');
var strong = document.createElement('strong');
strong.appendChild(text.childNodes[0]);
text.appendChild(strong);

属性値を取得

id=”link”のhrefを取得してダイアログに表示。(「http://utbrew.com/」と表示される。)

var href = $('#link').attr('href');
alert(href);
var href = document.getElementById('link').href;
alert(href);

属性値を設定

id=”link”のhrefを「http://utbrew.com/blog/」に変更。

$('#link').attr('href', 'http://utbrew.com/blog/');
document.getElementById('link').href = 'http://utbrew.com/blog/';

属性を削除

h1のclass=”title”を削除。(「タイトル」が黒で表示される。)

$('.title').removeAttr('class');
document.getElementsByTagName('h1')[0].removeAttribute('class');

クラス属性を追加

id=”text”にclass=”red”を追加。(「本文」が赤で表示される。)

$('#text').addClass('red');
document.getElementById('text').setAttribute('class', 'red');

クラス属性を削除

h1のclass=”title”を削除。(「タイトル」が黒で表示される。)

$('.title').removeClass('title');
document.getElementsByTagName('h1')[0].removeAttribute('class');

値を取得

id=”input”の値を取得しダイアログに表示。(「123」と表示される。)

var value = $('#input').val();
alert(value);
var value = document.getElementById('input').value;
alert(value);

値を設定

id=”input”の値を「456」に変更する。

$('#input').val('456');
document.getElementById('input').value = '456';

幅・高さを取得

id=”box”のwidth, heightを取得しダイアログに表示。(「200」「200」が表示される。)

var width = $('#box').width();
alert(width);
var height = $('#box').height();
alert(height);
// IEは未対応(currentStyle等を使う)
var box = document.getElementById('box');
var width = document.defaultView.getComputedStyle(box, null).getPropertyValue('width');
// 200pxと表示されるね
alert(width);
var height = document.defaultView.getComputedStyle(box, null).getPropertyValue('height');
// 200pxと表示されるね
alert(height);

幅・高さを設定

id=”box”をwidth=300px, height=300pxに変更する。

$('#box').width('300px');
$('#box').height('300px');
// IEは未対応(currentStyle等を使う)
var box = document.getElementById('box');
box.style.width = '300px';
box.style.height = '300px';

jQuery使うと楽だわー。次回はイベント関係をやる予定

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