對(duì)于獲取DOM節(jié)點(diǎn)的內(nèi)容，Jquery提供了四種方法，html，text，val，attr。下面來(lái)分別介紹這四種方法和它們的區(qū)別。下面以例子來(lái)說(shuō)明

我寫的JSP頁(yè)面內(nèi)容如下：

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

那么原始的頁(yè)面效果是這樣的

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

那個(gè)Tip用來(lái)顯示獲取得到的內(nèi)容，$("#tip").html($("#sample").html())，這個(gè)方法是將sample中的html內(nèi)容復(fù)制到tip當(dāng)中。其中$("#sample").html()是獲取ID為sample元素的內(nèi)容，效果如下

?

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

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

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

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

那么html與text的區(qū)別是什么：text是Html代碼當(dāng)中的文本內(nèi)容，會(huì)忽略標(biāo)簽中所有的元素。而Html是帶有html代碼塊，。

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

$("#tip").html($("#sample").text())（這里TIP的內(nèi)容會(huì)變?yōu)?#39;這是Span的內(nèi)容'這樣一段文字） , $("#tip").text($("#sample").text())(也會(huì)只輸出'這是Span的內(nèi)容'這樣一段文字);

這樣的原因是:$("#sample").html()取出來(lái)的是解析的代碼塊，$("#sample").text()取出來(lái)的是html代碼塊中的文本，這里因?yàn)檩敵龅膬?nèi)容是由ID為Tip的元素決定的，如果用text表示用純文本格式輸出內(nèi)容，如果用html則解析獲取到的內(nèi)容，對(duì)于$("#tip").html($("#sample").text()),

$("#tip").text($("#sample").text()),它們兩個(gè)只是輸出的方式不同，但是因?yàn)楂@取到的內(nèi)容只有單純的文本內(nèi)容，也就是標(biāo)簽<Span></span>里面包含的內(nèi)容，所以不論以哪種方式輸出，都是純文本。

而前面的兩個(gè)方法，因?yàn)楂@取到的本身就是html代碼塊，當(dāng)以html形式輸出時(shí)獲取到的就是有格式的html內(nèi)容，當(dāng)以text形式輸出時(shí)就是輸出html代碼塊（如圖3）。

?

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

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

?

三個(gè)方法的區(qū)別：其實(shí)通過(guò)上面的例子我們可以看到，其實(shí)某些html元素是不可以使用html，text這些方法的，對(duì)于像Input這樣的元素，因?yàn)楸旧硎情]標(biāo)簽，所以html方法和text方法就不會(huì)獲取到任何的內(nèi)容，而對(duì)于div，span這樣的元素來(lái)說(shuō)，如果使用value屬性，也是實(shí)際當(dāng)中基本用不到的。所以方法本身就是對(duì)應(yīng)特定元素而用的。

轉(zhuǎn)載于:https://www.cnblogs.com/rain144576/p/5099009.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。