jQuery - コンテンツと属性の設定
コンテンツの設定 - text()、html()、およびval()
前のページから同じ3つの方法を使用して、コンテンツを設定します。
text()- 選択した要素のテキストコンテンツを設定または返すhtml()- 選択した要素のコンテンツを設定または返す(HTMLマークアップを含む)val()- フォームフィールドの値を設定または返す
次の例は、jQuerytext()メソッドとhtml()メソッドを使用してコンテンツを取得する方法を示しています。
例
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
text()、html()、およびval()のコールバック関数
上記の3つのjQueryメソッドのすべて:text()、html()、とval()、コールバック関数も付属しています。コールバック関数には、選択された要素のリスト内の現在の要素のインデックスと元の(古い)値の2つのパラメーターがあります。次に、関数から新しい値として使用する文字列を返します。
次の例は、text()とhtml()コールバック関数を使用します。
例
$("#btn1").click(function(){
$("#test1").text(function(i, origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i, origText){
return "Old html: " + origText + " New html: Hello <b>world!</b>
(index: " + i + ")";
});
});
属性の設定 - attr()
jQueryattr()メソッドは、属性値の設定/変更にも使用されます。
次の例は、リンクのhref属性の値を変更(設定)する方法を示しています。
例
$("button").click(function(){
$("#w3s").attr("href", "https://techis.jp/guide/jquery/default");
});
jQueryattr()メソッドは属性値を取得するために使用されます。
次の例は、href属性とtitle属性の両方を同時に設定する方法を示しています。
例
$("button").click(function(){
$("#w3s").attr({
"href" : "https://techis.jp/guide/jquery/default",
"title" : "Techis jQuery Tutorial"
});
});
attr()のコールバック関数
jQueryメソッドattr()、コールバック関数も付属しています。コールバック関数には2つのパラメーターがあります。選択された要素のリスト内の現在の要素のインデックスと、元の(古い)属性値です。次に、関数から新しい属性値として使用する文字列を返します。
次の例は、attr()コールバック関数を使用:
例
$("button").click(function(){
$("#w3s").attr("href", function(i, origValue){
return origValue + "/jquery/";
});
});
jQuery HTMLリファレンス
すべてのjQuery HTMLメソッドの完全な概要については、jQuery HTML/CSSリファレンスを参照してください。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。