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