jQuery - コンテンツと属性の設定
コンテンツの設定 - text()、html() および val()
前の章で使用した同じ3つのメソッドを使用して、コンテンツを設定します。
- text() - 選択した要素のテキストコンテンツを設定または返します
- html() - 選択した要素のコンテンツを設定または返します（HTML マークアップを含む）
- val() - フォームフィールドの値を設定または返します
次の例は、text()、html()、および val() メソッドを使用してコンテンツを設定する方法を示しています：
例
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("サンプル");
});
試してみる »
text()、html() および val() のコールバック関数
上記の3つの jQuery メソッド：text()、html()、および val() には、同様にコールバック関数があります。コールバック関数には2つのパラメータがあります：選択した要素リスト内の現在の要素のインデックスと、元の（古い）値です。そして、関数の新しい値として、使用したい文字列を返します。
次の例は、コールバック関数を使用した text() と html() を示しています：
例
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "旧テキスト:" + origText + "新テキスト: Hello world! (index:" + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "旧 HTML:" + origText + "新 HTML: Hello <b>world!</b> (index:" + i + ")";
});
});
試してみる »
属性の設定 - attr()
jQuery の attr() メソッドは、属性値を設定/変更するためにも使用されます。
次の例は、リンクの href 属性の値を変更（設定）する方法を示しています：
例
$("button").click(function(){
$("#サンプル").attr("href","http://www.example.com/jquery");
});
試してみる »
attr() メソッドを使用すると、複数の属性を同時に設定することもできます。
次の例は、href 属性と title 属性を同時に設定する方法を示しています：
例
$("button").click(function(){
$("#サンプル").attr({
"href" : "http://www.example.com/jquery",
"title" : "jQuery チュートリアル"
});
});
試してみる »
attr() のコールバック関数
jQuery のメソッド attr() には、コールバック関数も用意されています。コールバック関数には2つのパラメータがあります：選択した要素リスト内の現在の要素のインデックスと、元の（古い）値です。そして、関数の新しい値として、使用したい文字列を返します。
次の例は、コールバック関数を使用した attr() メソッドを示しています：
例
$("button").click(function(){
$("#サンプル").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
試してみる »