最新的Web開發教程
 

jQuery - 設置內容和屬性


套裝內容- 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的鏈接屬性:

$("button").click(function(){
    $("#w3s").attr("href", "http://www.w3ii.com/jquery");
});
試一試»

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";
    });
});
試一試»

自測練習用!

練習1» 練習2» 練習3» 練習4» 練習5»


jQuery的HTML參考

對於所有的jQuery HTML方法的完整概述,請訪問我們的jQuery HTML / CSS參考