jquery設定text的值範例(設定文字方塊 DIV 表單值)_jquery

jquery設定內容 - text()、html() 以及val()

我們將使用前一章中的三個相同的方法來設定內容：

text() - 設定或傳回所選元素的文字內容
html() - 設定或傳回所選元素的內容（包括HTML標記）
val() - 設定或傳回表單欄位的值

下面的範例示範如何透過 text()、html() 以及 val() 方法來設定內容：

實例

複製程式碼 程式碼如下:

$("#btn1"). click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("Hello world!");
});
$("#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 world!
(index: " i ")";
});
});