デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

jQuery(html)html要素を作成

構文

html要素を作成返値:jQueryオブジェクト
jQuery( html要素, [ownerDocument] )ver1.0〜
jQuery( html要素, 属性 )ver1.4〜
※jQueryは$で置き換えることができます。 例:$("<div>")

機能

第1引数で文字列を受け取り、それをhtmlの要素として作成します。返される値はjQueryオブジェクトなので、そのままappendToメソッドを利用してhtml上に追加できます。ver1.4以前は、第1引数に設定するhtml要素のタグは閉じられている必要がありましたが、ver1.4以降はタグが閉じてなくてもよくなりました。

第2引数のownerDocumentは省略可能で、要素を作成したいdocumentを指定します。省略した場合は現在のdocumentになります。ver1.4からは第2引数にhtml要素の属性を設定したObjectオブジェクトを設定できるようになりました。ただしIEではinput要素に対して利用できません。

また画像のプリロードなどにも利用されます。→参考:使い方「画像のプリロード

v1.8で追加されたjQuery.parseHTMLメソッドを利用することもできます。これはhtml内に組み込まれたscriptタグが実行されないため、他者が作成したhtmlデータを読み込む際の危険性が下がります。

解説

文字列からhtml要素を作成

文字列からhtml要素を作成します。作成した時点ではhtml上には表示されずデータ(jQueryオブジェクト)だけの存在です。html上に追加するためにはappendToメソッド等を利用する必要があります。

サンプル(jquery2/01.html)を開いてbody内にはbuttonしか無いことを確認して下さい。jQueryには以下の様に記述されています。

var jo = jQuery("<div class='test'></div>");
$("button").click(function(){
	jo.appendTo("body");
})

上記の1行目で、引数で設定した文字列をhtml要素に変換して変数joに代入しています。2行目でclickイベントを設定しているので、buttonをクリックすると3行目の処理が実行されます。

3行目ではappendToメソッドを利用し、1行目で作成したhtml要素(jo)をbody要素に追加します。cssのtestクラスはheadタグ内に設定されているため、buttonをクリックするとブラウザ上に水色で正方形のdivが表示されます。

画像のプリロードに利用

画像データへのリンク情報を含む文字列をjQueryオブジェクトにすると、その時点で画像データのロードが始まります。これを利用して画像データのプリロードが可能になります。
参照:使い方「画像のプリロード

第2引数に属性を設定

ver1.4からは第2引数にhtml要素の属性を設定したObjectオブジェクトを設定できるようになりました。サンプル(jquery2/02.html)を開いてbody内にはbuttonしか無いことを確認して下さい。jQueryには以下の様に記述されています。

myAttr = new Object();
myAttr.class = "test";	
var jo = jQuery("<div></div>", myAttr);
$("button").click(function(){
	jo.appendTo("body");
})

まず1行目でObjectオブジェクト「myAttr」を作成し、2行目でmyAttrにclass属性を設定し「test」を代入しています。このmyAttrを3行目でjQueryメソッドの第2引数に設定することで、第1引数で設定しているdiv要素の属性として追加されるのです(つまりclass属性としてtestが設定されます)。

結果として、buttonをクリックするとサンプルjquery2/01.htmlと同じように水色のdiv要素が追加されます。

scriptの実行について

jQueryメソッドはhtml内に組み込まれたスクリプトを実行します。ですので第3者の作成したhtmlを読み込む場合は注意が必要です(悪意のあるスクリプトが含まれている可能性があるため)

実際にスクリプトが実行されるのか確認してみましょう。まずは読み込む外部htmlを説明します。
jquery2/test.htmlを開いてアラートで「script!」と表示されることを確認して下さい。ソースは以下の様に記述されています。2行目にscriptタグがあり、ここでアラートを表示しています。

<b>bold</b><i>italic</i>
<script>alert("script !");</script>

次にこのhtmlを読み込むサンプル(jquery2/03.html)を開いて、以下のjQueryを確認して下さい。外部データはgetメソッドを利用して読み込みます。読み込んだhtmlデータは変数testHTMLに代入しておきました。

$.get("test.html", function(myData){
	testHTML = myData;
})

続いて以下の部分を確認して下さい。buttonをクリックすると読み込んだtestHTMLをjQueryメソッドを利用してhtml要素に変換し、3行目でappendメソッドを利用してdiv要素に追加しています。

$("button").click(function(){
	var myHTML = $(testHTML);
	$("div").append(myHTML);
});

結果としてdiv要素内に読み込んだhtmlデータが追加されますが、このときにスクリプトも実行されるためアラートが表示されます。自分で作成した外部htmlを読み込む際には問題ありませんが、第3者の作成したデータの場合、悪意のあるスクリプトが含まれている可能性もあるので気を付けてください。第3者の作成したhtmlを読み込む際には以下の関連項目で紹介しているjQuery.parseHTMLメソッドを利用しましょう。

関連項目

文字列からhtml要素を作成するには、他にjQuery.parseHTMLメソッドがあります。これはhtml内に組み込まれたscriptタグが実行されないため、他者が作成したhtmlデータを読み込む際の危険性が下がります。