DOMオブジェクトの基本操作 (4/5)
作成:2010-04-04 12:10
更新:2012-05-25 11:55
更新:2012-05-25 11:55
■エレメントの作成と組み込み
$関数は、エレメントを新たに作成したり組み込んだりするのにも役立ちます。これも、非常に単純な操作で作成することができます。
●エレメントの作成
まずは、新しいエレメントの作成です。これは、$の引数に、作成するHTMLのソースコードをそのまま記述してしまえばいいのです。それにより、そのHTML要素のエレメントを扱うjQueryオブジェクトが生成されます。例えば、
●エレメントの組み込み
作成したエレメント（jQueryオブジェクト）は、やはりjQueryオブジェクトのメソッドを呼び出して、他のエレメント内に簡単に組み込むことができます。これには以下のようなメソッドが用意されています。
※利用例
簡単な利用例を下にあげておきましょう。入力フィールドに色の値を記述してボタンを押すと、背景色をその色に指定して要素をメッセージの下に追加していきます。ここでは、<div id="container">の中にappendで追加をしていますが、例えば<div id="message1">の下にbeforeで追加しても同じことができます。
ここでの$('#container').append(element);の部分を、いろいろと書き換えて動作を確かめてみるとよいでしょう。appendメソッドを他のメソッドに変更して呼び出すと、いろいろと不思議な組み込み方がされるはずです。
※メソッドチェーンについて
ここでは、最初に新しい<div>タグのjQueryオブジェクトを生成してからそれを組み込んでいますが、この生成部分でちょっと面白い書き方をしていますね。
このメソッドチェーンの書き方を覚えると、複数の操作を１行にまとめて記述することが可能になります。慣れてしまうと、この書き方は実に強力です。なにより、複雑な操作を、見た目にもシンプルでわかりやすく記述することができます。
●エレメントの作成
まずは、新しいエレメントの作成です。これは、$の引数に、作成するHTMLのソースコードをそのまま記述してしまえばいいのです。それにより、そのHTML要素のエレメントを扱うjQueryオブジェクトが生成されます。例えば、
$('<p>ABC</p>')このようにすると、ABCとテキストを表示する<p>タグのjQueryオブジェクトが作成されるのです。後は、これをいろいろと操作すればいいのです。●エレメントの組み込み
作成したエレメント（jQueryオブジェクト）は、やはりjQueryオブジェクトのメソッドを呼び出して、他のエレメント内に簡単に組み込むことができます。これには以下のようなメソッドが用意されています。
《jQuery》.append(《jQuery》);引数に渡したエレメントを自身の内部に組み込みます。
《jQuery》.wrap(《jQuery》);これは、appendの逆です。つまり、引数で渡したエレメントで自身を囲みます。これには２通りの囲み方があります。自身のjQueryオブジェクトが複数の要素を持っている場合、wrapを使うと、１つ１つの要素を囲みます。wrapAllを使うと、すべての要素をまとめて囲みます。
《jQuery》.wrapAll(《jQuery》);
《jQuery》.before(《jQuery》);これらは、自身と同じ位置への追加です。beforeは自身の前に、afterは後にそれぞれ引数のエレメントを追加します。
《jQuery》.after(《jQuery》);
※利用例
簡単な利用例を下にあげておきましょう。入力フィールドに色の値を記述してボタンを押すと、背景色をその色に指定して要素をメッセージの下に追加していきます。ここでは、<div id="container">の中にappendで追加をしていますが、例えば<div id="message1">の下にbeforeで追加しても同じことができます。
ここでの$('#container').append(element);の部分を、いろいろと書き換えて動作を確かめてみるとよいでしょう。appendメソッドを他のメソッドに変更して呼び出すと、いろいろと不思議な組み込み方がされるはずです。
※メソッドチェーンについて
ここでは、最初に新しい<div>タグのjQueryオブジェクトを生成してからそれを組み込んでいますが、この生成部分でちょっと面白い書き方をしていますね。
var element = $('<div></div>').text(str).css('background',str);$関数の後に、text、cssといったメソッドが連なっています。これは「メソッドチェーン」と呼ばれるものです。jQueryでは、$関数やjQueryオブジェクトのメソッドは、呼び出すとそのjQueryオブジェクト自身を返すようになっています。これにより、jQueryオブジェクトのメソッドを次々と連続して呼び出していくことが可能になっているのです。このメソッドチェーンの書き方を覚えると、複数の操作を１行にまとめて記述することが可能になります。慣れてしまうと、この書き方は実に強力です。なにより、複雑な操作を、見た目にもシンプルでわかりやすく記述することができます。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<script src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
<!--
function doAction(){
var str = $('#text1').val();
var element = $('<div></div>').text(str).css('background',str);
$('#container').append(element);
}
//-->
</script>
</head>
<body>
<H1>TEST.</H1>
<div id="container">
<div id="message1">色の値を入力：</div>
</div>
<input type="text" id="text1">
<input type="button" onclick="doAction();" value="Click">
</body>
</html>
※関連コンテンツ