jQueryでDOM要素を作成し、DOMツリーを構築する方法
「jQuery DOM ツリー 構築 or 生成」などで検索しても、jQueryでDOM要素を作成／生成し、DOMツリーを１から作る方法が出てこなかったので、せっかくだから基礎の基礎をまとめてみる。
1)jQueryオブジェクトを作る
jQueryオブジェクトとは、jQueryの関数(メソッド)が使用できるDOM要素(またはその配列)のこと。DOMツリーに含まれてない要素も含む。
jQueryオブジェクトは、セレクタで抽出して取得することが多いが、１から作ることもできる。
jQueryオブジェクトの作成には、$()関数を使用する。
＜例＞
2)jQueryオブジェクトに属性などを追加する
1)で作成したjQueryオブジェクトに、
attr()で属性を追加
addClass()でCSSクラスを追加、css()でCSSプロパティを設定
text()でテキストを追加
などを行い、子要素を作成する。
詳細はAttributes APIなどを参照。
3)親要素を取得し、jQueryオブジェクトを子要素として登録する
親要素をセレクタなどで抽出する。
抽出した親要素に対して、2)で作成した子要素をappend()などで登録し、DOMツリーを構築する。
＜例＞
<body>を親要素とする場合は、
以上です。
自分が見たいくつかのjQuery入門サイトでは、ここら辺についての記述は無かった。
1)jQueryオブジェクトを作る
jQueryオブジェクトとは、jQueryの関数(メソッド)が使用できるDOM要素(またはその配列)のこと。DOMツリーに含まれてない要素も含む。
jQueryオブジェクトは、セレクタで抽出して取得することが多いが、１から作ることもできる。
jQueryオブジェクトの作成には、$()関数を使用する。
＜例＞
// <div></div>という要素のjQueryオブジェクトを作成し、$jqObjに格納する
var $jqObj = $("<div/>");
変数名の先頭に $ をつける必要は無いが、「jQueryオブジェクトが格納されている変数であること」を明示するために $ を付けた方が、ソースコードを読み易い。var $jqObj = $("<div/>");
2)jQueryオブジェクトに属性などを追加する
1)で作成したjQueryオブジェクトに、
attr()で属性を追加
addClass()でCSSクラスを追加、css()でCSSプロパティを設定
text()でテキストを追加
などを行い、子要素を作成する。
詳細はAttributes APIなどを参照。
3)親要素を取得し、jQueryオブジェクトを子要素として登録する
親要素をセレクタなどで抽出する。
抽出した親要素に対して、2)で作成した子要素をappend()などで登録し、DOMツリーを構築する。
＜例＞
var bcolorArr = new Array(略); // 子要素の色
var $div = $("#main"); // 親要素取得
var $jqObj; // 子要素
for(var i=0;i<bcolorArr.length;i++){
// jQueryオブジェクトを作成し、CSSクラス、CSSプロパティ、id属性を付与する
$jqObj = $("<div/>").addClass("box").css("backgroundColor",bcolorArr[i])
.attr("id","id" + (i+1));
// jQueryオブジェクトを子要素として追加する
$div.append($jqObj);
}
DOM要素を追加する関数(メソッド)の詳細は、Manipulation APIなどを参照。var $div = $("#main"); // 親要素取得
var $jqObj; // 子要素
for(var i=0;i<bcolorArr.length;i++){
// jQueryオブジェクトを作成し、CSSクラス、CSSプロパティ、id属性を付与する
$jqObj = $("<div/>").addClass("box").css("backgroundColor",bcolorArr[i])
.attr("id","id" + (i+1));
// jQueryオブジェクトを子要素として追加する
$div.append($jqObj);
}
<body>を親要素とする場合は、
$("body").append($jqObj);
とすればよい。以上です。
自分が見たいくつかのjQuery入門サイトでは、ここら辺についての記述は無かった。
