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使うと楽だわー。次回はイベント関係をやる予定
2011/01/18 01:11 | 1 Comment
Comments
Trackbacks
[…] 前回の続きで、今回はイベントをJavaScriptと比較しながらやってみる。クリックしたとかマウスオーバーとかその辺ね。使用するHTML / CSSは次の通り。 […]
Trackback URL