最新的Web開發教程
 

jQuery - 獲取內容和屬性


jQuery的包含更改和操作HTML元素和屬性強大的方法。


jQuery的DOM操作

jQuery的的一個非常重要的部分是操作DOM的可能性。

jQuery提供了一堆DOM相關的方法,這樣更容易訪問和操縱元素和屬性。

DOM =文檔對象模型

DOM定義了訪問HTML和XML文檔的標準:

“W3C文檔對象模型(DOM)是一個平台和語言無關的接口,它允許程序和腳本動態訪問和更新的內容,結構和文檔的風格。”


獲取內容- text(), html()val()

三個簡單,但有用的,jQuery方法對DOM操作是:

  • text() -設置或返回選定元素的文本內容
  • html() -設置或返回所選元素(包括HTML標記)的內容
  • val() -設置或返回表單字段的值

下面的例子演示了如何獲取內容與jQuery的text()html()方法:

$("#btn1").click(function(){
    alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
});
試一試»

下面的例子演示了如何獲得與jQuery的輸入字段的值val()方法:

$("#btn1").click(function(){
    alert("Value: " + $("#test").val());
});
試一試»

獲取屬性- attr()

jQuery的attr()方法用來獲得屬性值。

下面的例子演示了如何獲取的價值href的鏈接屬性:

$("button").click(function(){
    alert($("#w3s").attr("href"));
});
試一試»

下一章介紹如何設置(其他城市)的內容和屬性值。


自測練習用!

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


jQuery的HTML參考

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