jQuery – テキストを取得・変更する『 text() 』
要素内にあるテキストを取得・変更する場合は「text()」を使います。
取得する場合は「text()」、変更する場合は「text(“変更後の文字列”)」を指定します。
//id=#msg内のテキストを取得します。
$("#msg").text();
//id=#msg内のテキストを「文字を変更しました。」に変更します。
$("#msg").text("文字を変更しました。");
サンプル１
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<title>jQuery - text サンプル１</title>
<script type="text/javascript" src="../jquery-1.2.6.min.js"></script>
<script language="JavaScript">
$(function (){
$("#box1").click(
function(){
$(this).text("マウスをはずしてください。");
$(".msg").text("クリックされました。(#box1内のテキストは「"+$(this).text()+"」）");
}
);
$("#box1").hover(
function(){
$(this).text("クリックしてください。");
$(".msg").text("マウスが乗っています。(#box1内のテキストは「"+$(this).text()+"」）");
},
function(){
$(this).text("マウスを乗せて下さい。");
$(".msg").text("マウスが外れました。(#box1内のテキストは「"+$(this).text()+"」）");
}
);
});
</script>
<style type="text/css">
#box1 {
width: 150px;
height: 150px;
border: 1px solid #cccccc;
background-color: #efefef;
}
</style>
</head>
<body>
<div id="box1">
マウスを乗せて下さい。
</div>
<p class="msg">まだ何もイベントがありません。</p>
</body>
</html>
「$(this).text()」と記述している場所があると思いますが、英語そのままの「この」という意味合いです。上記のサンプル1の$(this)は「$(“#msg”).click」の中で利用しているので「クリックされたid=msgの」という意味合いになります。thisについては少し説明がムヅカしい（自分自身がなんとなく使ってしまっている…スミマセン）ので、もし理解を深めたい方は下記サイトに、jQueryのthisに関する記事をかかれているのでそちらをご覧くださいませ…。
anything from here jQueryに学ぶJavascriptの基礎(2) this 活用──jQuery解読(17)
もうひとつサンプルを用意しました。
サンプル２
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<title>jQuery - text サンプル２</title>
<script type="text/javascript" src="../jquery-1.2.6.min.js"></script>
<script language="JavaScript">
$(function (){
var cmArray = new Array("情熱や怒り","堅実や冷静","癒しや調和");
$("html").css("font-size","2em");
$("li").click(
function(){
var cmTxt = cmArray[$("li").index(this)];
$(".msg").text("『 "+$(this).text()+" 』は"+cmTxt+"を表す色です。");
}
);
});
</script>
</head>
<body>
<p class="msg">好きな色をクリックしてください。</p>
<ul>
<li>赤</li>
<li>青</li>
<li>緑</li>
</ul>
</body>
</html>
$(this)については「$(“.msg”).text(“『 “+$(this).text()+” 』は”+cmTxt+”を表す色です。”);」の「$(this).text()」を「$(“li”).text()」に変更して動作を試すと、なるほど！となるやもしれません。
jQuery – text サンプル $("li").text()のサンプル
「$(this).text()」の場合はクリックした場所のテキストのみ表示されますが、「$(“li”).text()」に変更すると「liタグ内のテキスト」がすべて表示されます。$(this).text()は「$(“li”).clickのテキスト=クリックされたliタグのテキスト」という意味合いになり、$(“li”).text()は「HTML内すべてのliのテキスト」という意味合いになります。
thisは利用する場合が多いので、なんとなくでも意味をつかんでおきましょう。