對于獲取DOM節點的內容，Jquery提供了四種方法，html，text，val，attr。下面來分別介紹這四種方法和它們的區別。下面以例子來說明

我寫的JSP頁面內容如下：

1 <div id="sample"> 2 <span>這是Span的文本內容</span> 3 <input type="text" value="這是input的內容"> 4 </div> 5 <div id="tip"></div>

那么原始的頁面效果是這樣的

????????????????????? （圖1）

那個Tip用來顯示獲取得到的內容，$("#tip").html($("#sample").html())，這個方法是將sample中的html內容復制到tip當中。其中$("#sample").html()是獲取ID為sample元素的內容，效果如下

?

????????????????????? （圖2）

如果使用$("#tip").text($("#sample").html());這個方法的話是將html代碼塊直接復制到了tip當中。這里將ID為sample的html代碼塊當成文本輸出，效果如下

??????????????????????????? (圖3)

可以看出上面獲取的是第一個DIV的html代碼塊。

那么html與text的區別是什么：text是Html代碼當中的文本內容，會忽略標簽中所有的元素。而Html是帶有html代碼塊，。

那么下面的這四個方法:$("#tip").html($("#sample").html())（圖2效果）,$("#tip").text($("#sample").html())(圖3內容)，

$("#tip").html($("#sample").text())（這里TIP的內容會變為'這是Span的內容'這樣一段文字） , $("#tip").text($("#sample").text())(也會只輸出'這是Span的內容'這樣一段文字);

這樣的原因是:$("#sample").html()取出來的是解析的代碼塊，$("#sample").text()取出來的是html代碼塊中的文本，這里因為輸出的內容是由ID為Tip的元素決定的，如果用text表示用純文本格式輸出內容，如果用html則解析獲取到的內容，對于$("#tip").html($("#sample").text()),

$("#tip").text($("#sample").text()),它們兩個只是輸出的方式不同，但是因為獲取到的內容只有單純的文本內容，也就是標簽<Span></span>里面包含的內容，所以不論以哪種方式輸出，都是純文本。

而前面的兩個方法，因為獲取到的本身就是html代碼塊，當以html形式輸出時獲取到的就是有格式的html內容，當以text形式輸出時就是輸出html代碼塊（如圖3）。

?

當我們使用val方法時，其實是獲取input中value屬性的值，$("input").val()獲取到的內容是”這是Input的內容“這樣的一個字符串。

其實它等同于代碼塊$("input").attr("value")，而attr方法還可以獲取input標簽的其它屬性的值，但是val方法卻不能，例如獲取例子當中type的值$("input").attr("type")得到的是"text"這樣的一個字符串。

?

三個方法的區別：其實通過上面的例子我們可以看到，其實某些html元素是不可以使用html，text這些方法的，對于像Input這樣的元素，因為本身是閉標簽，所以html方法和text方法就不會獲取到任何的內容，而對于div，span這樣的元素來說，如果使用value屬性，也是實際當中基本用不到的。所以方法本身就是對應特定元素而用的。

轉載于:https://www.cnblogs.com/rain144576/p/5099009.html

總結

以上是生活随笔為你收集整理的前端框架——Jquery——基础篇2__获取DOM节点的值的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。