最新のWeb開発のチュートリアル
 

jQuery - 設定内容と属性


セット内容- text(), html()およびval()

私たちは、コンテンツを設定するために、前のページから同じ3つのメソッドを使用します。

  • text() -設定または選択した要素のテキストの内容を返します。
  • html() -設定または(HTMLマークアップを含む)選択した要素の内容を返します。
  • val() -設定またはフォームフィールドの値を返します。

次の例では、jQueryのでコンテンツを設定する方法を示しtext(), html()およびval()メソッド:

$("#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()

jQueryのattr()メソッドも、属性値/変更を設定するために使用されます。

次の例は、(セット)の値を変更する方法を示しhrefリンクに属性を:

$("button").click(function(){
    $("#w3s").attr("href", "http://www.w3ii.com/jquery");
});
»それを自分で試してみてください

attr()メソッドは、同時に複数の属性を設定することができます。

次の例では、両方を設定する方法を示してhref同時に属性とタイトルを:

$("button").click(function(){
    $("#w3s").attr({
        "href" : "http://www.w3ii.com/jquery",
        "title" : "w3ii jQuery Tutorial"
    });
});
»それを自分で試してみてください

以下のためのコールバック関数attr()

jQueryのメソッドattr()また、コールバック関数が付属しています。 選択した要素のリスト内の現在の要素のインデックスと元の(古い)属性値:コールバック関数は2つのパラメータがあります。 あなたは、あなたが関数から新しい属性値として使用したい文字列を返します。

以下の実施例は、 attr()コールバック関数で:

$("button").click(function(){
    $("#w3s").attr("href", function(i, origValue){
        return origValue + "/jquery";
    });
});
»それを自分で試してみてください

練習で自分自身をテスト!

演習1» 演習2» 演習3» 演習4» 演習5»


jQueryのHTMLリファレンス

すべてのjQuery HTML法の完全な概要については、当社をご覧くださいjQueryのHTML / CSSリファレンス