我們將使用前一章中的三個相同的方法來設置內容:
text() - 設置或返回所選元素的文本內容
html() - 設置或返回所選元素的內容(包括 HTML標記)
val() - 設置或返回表單字段的值
1、html()方法
該方法類似於js當中的innerHTML屬性
$("#two").html()方法 獲取html
$("#two").html("<span>你好!</span>")
2、text()
類似於JS中的innerText屬性
$("div").text() //獲取div的文本內容
$("div").text("你好!"); //設置div的文本內容。
3、val()
類似於JS中的value屬性
$("input[type=text]").val() //獲取input的值
$("input[type=text]").val() //設置input的值。
vla()方法還有另外一個用處,就是它能使select 、checkbox、和radio 相應的選項被選中。
$(":radio").val("選擇2號")設置ID號為single的單選框的選中值為“選擇2號”
$(":checkbox").val("check2,check3") 設置多個選項.
下面的例子演示如何通過 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() 的回調函數
上面的三個 jQuery 方法:text()、html() 以及 val(),同樣擁有回調函數。回調函數由兩個參數:被選元素列表中當前元素的下標,以及原始(舊的)值。然后以函數新值返回您希望使用的字符串。
下面的例子演示帶有回調函數的 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 + ")";
});
});
更多詳細內容請查看:http://www.111cn.net/wy/jquery/56679.htm