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

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

.html( )htmlコンテンツの取得/設定

構文

htmlコンテンツを取得返値:文字列
jQo.html( )ver1.0〜
htmlコンテンツを設定返値:jQueryオブジェクト
jQo.html( テキスト )ver1.0〜
jQo.html( Function )ver1.4〜

機能

引数を設定しなかった場合は、jQueryオブジェクトで指定した要素のhtmlコンテンツを取得します。

引数を設定した場合は、jQueryオブジェクトで指定した要素にhtmlコンテンツを設定します。ver1.4からは引数にfunctionを指定することも可能で、条件によって設定するhtmlコンテンツを変更するなど高度な処理にも対応できます。

解説

htmlコンテンツを取得します

ここでいうhtmlコンテンツとはタグを含むテキスト情報です。サンプル(html/01.html)を開いてbody内の構成が以下のように、p要素内にb要素を含むテキスト情報があることを確認してください。

<p><b>段落</b>の内容</p>

jQueryは以下の様に記述され、buttonをクリックするとhtmlメソッドによってp要素内のhtmlコンテンツ(タグを含むテキスト情報)を取得しアラートで表示します。

$("button").click(function(){
	var str = $("p").html();
	alert(str);
})

結果として、buttonをクリックするとp要素内のhtmlコンテンツ「<b>段落</b>の内容」がアラートで表示されます。タグ情報が必要ない場合は textメソッドを利用してください。
→参考:textメソッドのサンプル(text/02.html

複数のhtmlコンテンツをまとめて取得することはできません

textメソッドは複数の要素からまとめてテキスト情報を取得できますが、htmlメソッドはできません。サンプル(html/02.html)を開いてbody内にp要素が3つあることを確認してください。

<p><b>第1段落</b></p>
<p><i>第2段落</i></p>
<p><u>第3段落</u></p>

jQueryはhtml/01.htmlから変更有りません。buttonをクリックするとアラートで「<b>第1段落</b>」としか表示されず、最初のp要素の情報しか取得できません。もしhtmlメソッドで各要素ごとに情報を取得したい場合はページ下部の「メモ」を参照してください。mapメソッドを利用することで対応できます。

htmlコンテンツの設定

引数にhtmlコンテンツを設定することで、jQueryオブジェクトで指定した要素に設定することができます。サンプル(html/03.html)を開いてbody内に空のp要素が1つあることを確認してください。

<p></p>

jQueryは以下の様に記述され、buttonをクリックするとp要素のhtmlコンテンツとして「"<b>段落</b>の内容」を設定します。

$("button").click(function(){
	var str = $("p").html("<b>段落</b>の内容");
})

結果として、buttonをクリックするとp要素に「段落の内容」とテキストが表示され、b要素のため「段落」の部分が太字になります。

引数にfunctionを設定

サンプル(html/04.html)を開いてbody内にp要素が3つあることを確認して下さい。

<p></p>
<p></p>
<p></p>

jQueryは以下の様に記述されhtmlメソッドの引数にfunctionの「htmlFunc」が設定されています。

$("button").click(function(){
	var str = $("p").html(htmlFunc);
})

htmlメソッドの引数に設定するFunctionは以下の様な構文になっています。まず2つの引数(インデックス番号,現在のhtmlコンテンツ)を受け取ります。これらの引数の値は{}内の処理で利用することができます。そして任意の処理の後で設定したいhtmlコンテンツをreturnで返すようにします。

textメソッドに設定するFunctionの構文
function 任意の名前(インデックス番号, 現在のhtmlコンテンツ){
 任意の処理(引数を利用可能)
 return 設定したいhtmlコンテンツ;
}

サンプルhtml/04.htmlで利用したhtmlFuncは以下の様になっており、index番号に応じてhtmlコンテンツを設定します。

switch (index){
	case 0:return "<b>第1段落</b>";
	case 1:return "<i>第2段落</i>";
	case 2:return "<u>第3段落</u>";
}

結果として、buttonをクリックするとp要素に上から順に、太字で「第1段落」、斜体で「第2段落」、下線が引かれた「第3段落」と表示します。

関連項目

テキスト情報だけを取得/設定したい場合はtextメソッドを利用します。

メモ

複数の要素から取得したテキスト情報を配列に入れたい場合は

mapメソッドgetメソッドを利用すると、複数の要素から取得したhtmlコンテンツを配列にすることができます。詳細はmapメソッドのページで確認してください。
→参考:mapメソッドを利用して配列を得るサンプル(html/test01.html

内容を書き換えるのではなく追加したい時は

htmlメソッドは、すでにコンテンツがある場合は内容を書き換えます。サンプル(html/test02.html)を開いてbody内に以下の様なp要素があることを確認してください。

<p>処理前</p>

jQueryは以下の様に記述され、buttonをクリックするとp要素の内容を引数で指定した内容に書き換えます。

$("button").click(function(){
	$("p").html("<b>処理後</b>");
})

結果としてbuttonをクリックするとp要素の内容が書き換えられます。もし書き換えるのではなく追加したいのであればappendメソッドprependメソッドを利用してください。

appendメソッドを利用すれば「後に追加」します。→サンプル(html/test02b.html
prependメソッドを利用すれば「前に追加」します。→サンプル(html/test02c.html