前端框架——Jquery——基础篇2_

对于获取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节点的值相关推荐

前端框架——Jquery——基础篇7__工具函数(Utils)
在我们实际的开发过程中,工具函数可以说是的用的最多的,知识虽然不难,但是用起来却有技巧性,这就是Jquery学起来的难点.这里介绍用Jquery处理最常见的三种对象,字符串,数组和表单操作,之后的话会 ...
前端开发学习路径之阶段四：jQuery基础篇
jQuery基础总共分为四个部分,分别是样式篇.事件篇.动画篇.DOM篇. 一.样式篇 1.jQuery选择器 1.1.1 jQuery选择器之id选择器 id选择器:一个用来查找的ID,即元素的id ...
Vue的基础认知二---vue的双向绑定/vue获取DOM节点
在这篇博文之前,我们已经开了一个vue的头了,需要的小伙伴可以点击这个链接:Vue的基础认知一-构建环境/v指令的使用,好了,我们继续来看我们接下来要看的内容. 一.vue的双向绑定 mvvm框架: ...
arcgis前端(3)-----＞基础篇--自定义地图优化/隐藏or显示子图层
arcgis前端(3)----->基础篇–自定义地图优化/隐藏or显示子图层文章目录 arcgis前端(3)----->基础篇--自定义地图优化/隐藏or显示子图层前言实现效果展示 ...
14.实战+补充知识+PS增强+DW（到此前端工程师【基础篇】完结）
WPS Word辅助阅读技巧 min-width(最小宽度) 1. "min-width:600px;"当页面大小小于600像素时,浏览器按照600像素计算. 布局整体规划注意事项 ...
好程序员web前端分享HTML基础篇
好程序员web前端分享HTML基础篇,最近遇到很多新手,都会问,如果要学web前端开发,需要学什么?难不难学啊?多久能入门之类的问题?那么今天好程序员就先来给大家分享一下web前端学习路线:HTML基 ...
ASP.NET Google Maps Javascript API V3 实战基础篇一获取和设置事件处理程序中的属性...
ASP.NET Google Maps Javascript API V3 实战基础篇一获取和设置事件处理程序中的属性 <%@ Page Language="C#" Auto ...
miniui mysql_三分钟介绍强大方便的前端框架Jquery MiniUI
原标题:三分钟介绍强大方便的前端框架Jquery MiniUI jQuery MiniUI - 专业WebUI控件库. 它能缩短开发时间,减少代码量,使开发者更专注于业务和服务端,轻松实现界面开发,带 ...
arcgis前端(2)-----＞基础篇--发布一个自定义地图及加载自定义地图/底图
arcgis前端(2)----->基础篇–发布一个自定义地图及加载自定义地图/底图文章目录 arcgis前端(2)----->基础篇--发布一个自定义地图及加载自定义地图/底图前言 & ...

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

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

最新文章

热门文章