套裝內容- text(), html()和val()
我們將使用從以前的頁面設置的內容相同的三種方法:
- 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()
所有三個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 + ")";
});
});
試一試» 設置屬性- attr()
jQuery的attr()方法也被用來設置/更改屬性值。
下面的例子演示了如何改變(套)的價值href的鏈接屬性:
該attr()方法也可以讓你在同一時間設置多個屬性。
下面的例子演示了如何設置兩個href和標題在同一時間屬性:
例
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3ii.com/jquery",
"title" : "w3ii jQuery Tutorial"
});
});
試一試» 回調函數的attr()
jQuery的方法attr()還配備了一個回調函數。 回調函數有兩個參數:當前元素中選擇的元素列表和原(舊)的索引屬性值。 然後,返回你希望從功能的新屬性值的字符串。
下面的示例演示attr()有一個回調函數:
例
$("button").click(function(){
$("#w3s").attr("href", function(i, origValue){
return origValue + "/jquery";
});
});
試一試» 自測練習用!
jQuery的HTML參考
對於所有的jQuery HTML方法的完整概述,請訪問我們的jQuery HTML / CSS參考 。