スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

jQueryでDOM要素を作成し、DOMツリーを構築する方法

「jQuery DOM ツリー 構築 or 生成」などで検索しても、jQueryでDOM要素を作成/生成し、DOMツリーを1から作る方法が出てこなかったので、せっかくだから基礎の基礎をまとめてみる。

1)jQueryオブジェクトを作る
jQueryオブジェクトとは、jQueryの関数(メソッド)が使用できるDOM要素(またはその配列)のこと。DOMツリーに含まれてない要素も含む。
jQueryオブジェクトは、セレクタで抽出して取得することが多いが、1から作ることもできる。
jQueryオブジェクトの作成には、$()関数を使用する。
<例>
// <div></div>という要素のjQueryオブジェクトを作成し、$jqObjに格納する
var $jqObj = $("<div/>");  
変数名の先頭に $ をつける必要は無いが、「jQueryオブジェクトが格納されている変数であること」を明示するために $ を付けた方が、ソースコードを読み易い。

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などを参照。

<body>を親要素とする場合は、
$("body").append($jqObj);
とすればよい。

以上です。
自分が見たいくつかのjQuery入門サイトでは、ここら辺についての記述は無かった。
スポンサーサイト

コメント

承認待ちコメント

このコメントは管理者の承認待ちです

コメントの投稿

非公開コメント

プロフィール

himax64

Author: 南西
30代後半の無職です。
就活もせずダラダラ生きてます。
作ったもの

最新記事
人気記事
検索フォーム
カテゴリ
月別アーカイブ
最新コメント
最新トラックバック
RSSリンクの表示
QRコード
QRコード
カウンター
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。