前端框架——Jquery——基础篇2__获取DOM节点的值

对于获取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