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

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

.text( )テキストの取得/設定

構文

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

機能

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

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

解説

テキスト情報を取得します

サンプル(text/01.html)を開いてbody内にp要素が1つ有ることを確認してください。

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

jQueryは以下の様に記述され、buttonをクリックするとtextメソッドによってp要素のテキスト情報を取得しアラートで表示します。

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

結果として、buttonをクリックするとp要素のテキスト情報「段落の内容」がアラートで表示されます。

タグ情報は無視されます

textメソッドはテキスト情報に含まれるタグの情報を無視します。サンプル(text/02.html)を開いてbody内の構成を確認してください。p要素の中にb要素が含まれ「段落」の部分が太字になっています。

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

jQueryはtext/01.htmlから変更有りません。buttonをクリックするとbタグは無視され、text/01.htmlと同じように「段落の内容」とテキスト情報だけが表示されます。もしタグ情報も取得したい場合はhtmlメソッドを利用します。→参考:htmlメソッドのサンプル(html/01.html

複数のテキスト情報を取得すると...

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

<p>第1段落</p>
<p>第2段落</p>
<p>第3段落</p>

jQueryはtext/01.htmlから変更有りません。buttonをクリックするとアラートで「第1段落第2段落第3段落」と表示され、1つにまとめられてしまっているのが確認できます。もし各要素ごとに配列などにして取得したい場合はページ下部の「メモ」を参照してください。mapメソッドを利用することで対応できます。

テキスト情報の設定

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

<p></p>

jQueryは以下の様に記述され、buttonをクリックするとp要素のテキストとして「段落の内容」を設定します。

$("button").click(function(){
	$("p").text("段落の内容");
})

結果として、buttonをクリックするとp要素に「段落の内容」とテキストが表示されます。

textメソッドの引数にタグを設定してもテキストとして表示されてしまいます。サンプル(text/04b.html)では以下の様にbタグを利用していますが、buttonをクリックすると文字として表示されてしまいます。

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

もしタグも設定したい場合はhtmlメソッドを利用してください。

引数にfunctionを設定(1)

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

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

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

$("button").click(function(){
	$("p").text(textFunc);
})

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

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

サンプルtext/05.htmlで利用したtextFuncは以下の様になっており、index番号が0だったら「第1段落」、2だったら「第2段落」、2だったら「第3段落」と表示します。

function textFunc(index, oldText){
	switch (index){
		case 0:return "第1段落";
		case 1:return "第2段落";
		case 2:return "第3段落";
	}
}

結果として、buttonをクリックするとp要素に上から順に「第1段落」「第2段落」「第3段落」と表示されます

引数にfunctionを設定(2)

サンプル(text/06.html)を開いてbody内にp要素が5つあることを確認して下さい、そのうち2つはテキスト情報がありません。

<p>第1段落</p>
<p></p>
<p>第3段落</p>
<p></p>
<p>第5段落</p>

jQueryではtextメソッドに「textFunc」が設定されているのはtext/05.htmlと同じですが、textFuncの内容を以下の様に変更しています。

現在のテキスト情報(oldText)が空白だった場合は「ここには何もありませんでした」と表示します。それ以外の場合はreturnを使わず何も返しません。何も返さないとtext情報は変更されず現状維持となります

function textFunc(index, oldText){
	if (oldText ==""){
		return "ここには何もありませんでした"
	}
}

結果として、buttonをクリックすると空白だったp要素に「ここには何もありませんでした」と表示されます。

関連項目

タグを含んだテキスト(htmlコンテンツ)を取得/設定したい場合はhtmlメソッドを利用します。

メモ

複数の要素からhtmlコンテンツを取得したい場合は

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