jQuery HTML設定内容と属性操作例分析

この例では、jQuery HTMLの設定内容と属性操作について説明します.皆さんの参考にしてください.具体的には以下の通りです.
jQuery-コンテンツとプロパティの設定
設定内容-text()、html()およびval()
前章の3つの同じ方法を使用して、次のように設定します.

text()-選択した要素のテキスト内容

を設定または返す.

html()-選択した要素の内容(HTMLタグを含む)を設定または戻します.

val()-フォームフィールドの値

を設定または戻します.

$("#btn1").click(function(){
 $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
 $("#test2").html("Hello world!");
});
$("#btn3").click(function(){
 $("#test3").val("jb51");
});

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 world! (index: " + i + ")"; 
 });
});

プロパティの設定-attr()
jQuery attr()メソッドは、属性値の設定/変更にも使用されます.
次の例では、リンク内のhrefプロパティの値を変更(設定)する方法を示します.

$("button").click(function(){
 $("#jb51").attr("href","//www.jb51.net/jquery");
});

attr()メソッドでは、複数のプロパティを同時に設定することもできます.
次の例では、hrefとtitleのプロパティを同時に設定する方法を示します.

$("button").click(function(){
 $("#jb51").attr({
  "href" : "//www.jb51.net/jquery",
  "title" : "jQuery   "
 });
});

attr()のコールバック関数
jQueryメソッドattr()は、コールバック関数も提供します.コールバック関数には、2つのパラメータがあります.選択された要素リストの現在の要素の下付き文字と、元の(古い)値です.次に、使用する文字列を関数の新しい値で返します.
コールバック関数付きattr()メソッドの例を示します.

$("button").click(function(){
 $("#jb51").attr("href", function(i,origValue){
 return origValue + "/jquery"; 
 });
});

興味のある方は、オンラインHTML/CSS/JavaScriptコードを使用してツールを実行できます.http://tools.jb51.net/code/HtmlJsRun上記のコードの実行効果をテストします.
jQueryの関連内容についてもっと興味のある読者は、「jQueryページ要素操作テクニックまとめ」、「jQueryよくあるイベントの使い方とテクニックまとめ」、「jQuery常用プラグインと使い方まとめ」、「jQuery拡張テクニックまとめ」および「jqueryセレクタ使い方まとめ」のテーマを参照してください.
本文で述べたことが皆さんのjQueryプログラム設計に役立つことを望んでいます.