jQuery設定内容と属性方
10432 ワード
何が問題だ?com
設定内容-text()、html()およびval()text()-選択した要素のテキスト内容html()を設定または戻します-選択した要素の内容(HTMLタグを含む)val()を設定または戻します-フォームフィールドの値を設定または戻します
例:
text()、html()およびval()のコールバック関数の上の3つのjQueryメソッド:text()、html()およびval()は、同様にコールバック関数を持つ.コールバック関数には、選択した要素のリストにある現在の要素の下付き文字と、元の(古い)値の2つのパラメータがあります.次に、使用する文字列を関数の新しい値で返します.
属性の設定-attr()jQuery attr()メソッドは、属性値の設定/変更にも使用されます.
jqueryでは要素属性をattr()メソッドで取得して設定します.attrはattribute(属性)の略で、jQuery DOM操作ではattr()がよく使われ、attr()には4つの式があります.
1.attr(属性名)//属性の値を取得する(最初の一致要素の属性値を取得する).この方法により、最初の一致要素から属性の値を簡単に取得できます.要素に対応する属性がない場合はundefinedに戻ります.
2.attr(属性名、属性値)/属性の値を設定します(一致するすべての要素に属性値を設定します).
3.attr(属性名、関数値)//属性の関数値を設定します(一致するすべての要素に対して計算された属性値を設定します.値ではなく、属性値として計算された関数を指定します.)
4.attr(properties)/指定した要素に複数の属性値を設定します.すなわち、{属性名1:属性値1,属性名2:属性値2,......}です.(これは、すべての一致する要素に多数の属性を一括して設定する最善の方法です.オブジェクトのclass属性を設定する場合は、属性名として「className」を使用する必要があります.または、「class」または「id」を直接使用することができます.例は次のとおりです.)
attr()のコールバック関数jQueryメソッドattr()は、コールバック関数も提供します.
設定内容-text()、html()およびval()text()-選択した要素のテキスト内容html()を設定または戻します-選択した要素の内容(HTMLタグを含む)val()を設定または戻します-フォームフィールドの値を設定または戻します
例:
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); }); }); </script> </head> <body> <p id="test1"> 。</p> <p id="test2"> 。</p> <p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p> <button id="btn1"> </button> <button id="btn2"> HTML</button> <button id="btn3"> </button> </body> </html>text()、html()およびval()のコールバック関数の上の3つのjQueryメソッド:text()、html()およびval()は、同様にコールバック関数を持つ.コールバック関数には、選択した要素のリストにある現在の要素の下付き文字と、元の(古い)値の2つのパラメータがあります.次に、使用する文字列を関数の新しい値で返します.
<!DOCTYPE html> <html> <head> <script src="jquery-2.2.0.min.js"></script> <script> $(document).ready(function(){ $("#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 + ")"; }); }); }); </script> </head> <body> <p id="test1"> <b> </b> 。</p> <p id="test2"> <b> </b> 。</p> <button id="btn1"> / </button> <button id="btn2"> / HTML</button> </body> </html>属性の設定-attr()jQuery attr()メソッドは、属性値の設定/変更にも使用されます.
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#w3s").attr("href","http://hovertree.com/jquery"); }); }); </script> </head> <body> <p><a href="http://hovertree.com" id="w3s">hovertree.com.cn</a></p> <button> href </button> <p> ， ， href 。</p> </body> </html>jqueryでは要素属性をattr()メソッドで取得して設定します.attrはattribute(属性)の略で、jQuery DOM操作ではattr()がよく使われ、attr()には4つの式があります.
1.attr(属性名)//属性の値を取得する(最初の一致要素の属性値を取得する).この方法により、最初の一致要素から属性の値を簡単に取得できます.要素に対応する属性がない場合はundefinedに戻ります.
2.attr(属性名、属性値)/属性の値を設定します(一致するすべての要素に属性値を設定します).
3.attr(属性名、関数値)//属性の関数値を設定します(一致するすべての要素に対して計算された属性値を設定します.値ではなく、属性値として計算された関数を指定します.)
4.attr(properties)/指定した要素に複数の属性値を設定します.すなわち、{属性名1:属性値1,属性名2:属性値2,......}です.(これは、すべての一致する要素に多数の属性を一括して設定する最善の方法です.オブジェクトのclass属性を設定する場合は、属性名として「className」を使用する必要があります.または、「class」または「id」を直接使用することができます.例は次のとおりです.)
$("button").click(function(){
$("#w3s").attr({ "href" : "http://hovertree.com/jquery", "title" : "hovertree jQuery Tutorial" }); });attr()のコールバック関数jQueryメソッドattr()は、コールバック関数も提供します.
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#w3s").attr("href", function(i,origValue){ return origValue + "/jquery"; }); }); }); </script> </head> <body> <p><a href="http://hovertree.com" id="w3s">hovertree.com.cn</a></p> <button> href </button> <p> ， ， href 。</p> </body> </html>