jQuery 獲取/設(shè)置

jQuery的一個(gè)非常重要的部分是操縱DOM的可能性。

jQuery提供了有效地操作HTML元素和屬性的方法。

在本章中，我們將解釋jQuery如何獲取和設(shè)置元素內(nèi)容以及屬性值。

HTML DOM（文檔對(duì)象模型）

文檔對(duì)象模型，通常被稱為DOM，是使網(wǎng)站交互的一個(gè)重要部分。

文檔對(duì)象模型表示被顯示在一個(gè)窗口中的HTML文檔。

它是一個(gè)接口，允許jQuery操縱網(wǎng)站的內(nèi)容，結(jié)構(gòu)和樣式。

jQuery獲取或設(shè)置內(nèi)容-html()，text()和val()

使用jQuery，我們可以輕松地操縱HTML元素。

我們有以下用于DOM操作的jQuery方法：

• html()

• text()

• val()

下一節(jié)將向您展示如何使用每種方法。

jQuery html()方法

jQuery html()方法獲取或設(shè)置所選元素的內(nèi)容（innerHTML）。

下面的示例在單擊按鈕時(shí)獲取第一段的內(nèi)容：

$("button").click(function(){
  alert($("p").html());
});

下面的示例在單擊按鈕更改所有段落的內(nèi)容：

$("button").click(function(){
  $("p").html("我想說: <b>Hello world</b>");
});

jQuery text()方法

jQuery text()方法獲取或設(shè)置選定元素（包括其后代）的文本內(nèi)容。

下面的示例在單擊按鈕時(shí)獲取所有段落的文本內(nèi)容：

$("button").click(function(){
  alert($("p").text());
});

下面的示例在單擊按鈕時(shí)更改所有段落的文本內(nèi)容：

$("button").click(function(){
  $("p").text("我想說: Hello world");
});

html()和text()之間的區(qū)別

html()和text()方法都可以設(shè)置或獲取HTML元素的內(nèi)容，但是有以下區(qū)別：

html()：

• 設(shè)置或獲取所選元素的內(nèi)容（文本+ HTML標(biāo)記）

• 當(dāng)使用html()方法獲取內(nèi)容時(shí)，它將返回第一個(gè)選定元素的內(nèi)容

text()：

• 設(shè)置或獲取所選元素的內(nèi)容（僅文本）

• 當(dāng)使用text()方法獲取內(nèi)容時(shí)，它將返回所有選定元素的文本內(nèi)容

下面的示例演示html()方法和text()方法之間的區(qū)別：

$("#btn1").click(function(){
  $("p").html("我想說: <b>Hello world</b>");
});
$("#btn2").click(function(){
  $("p").text("我想說: <b>Hello world</b>");
});

jQuery val()方法

jQuery val()方法獲取或設(shè)置所選表單元素的value屬性。

以下示例獲取<input>字段的值：

$("button").click(function(){
  $("input:text").val();
});

以下示例設(shè)置<input>字段的值：

$("button").click(function(){
  $("input").val("Hello world");
});

jQuery獲取或設(shè)置屬性-attr()

jQuery attr()方法獲取或設(shè)置所選元素的屬性和值。

以下示例獲取圖像的src屬性的值：

$("button").click(function(){
  $("img").attr("src");
});

以下示例設(shè)置圖像的src屬性的值：

$("button").click(function(){
  $("img").attr("src", "logo_jquery.png");
});

下面的示例設(shè)置多個(gè)屬性和值：

$("button").click(function(){
  $("img").attr({
    alt: "Seagull Icon",
    title: "Image by Seagull",
    width: "350px",
    height: "300px"
  });
});

jQuery HTML參考

有關(guān)完整的HTML方法參考，請(qǐng)?jiān)L問我們的jQuery HTML / CSS參考。