【前言】
之前遇到过.html()与.text()区别的问题,今天再拿出来总结下
【列表】
(1).html();
(2).text();
(3).val();
【详解】
(1).html();
读取和修改元素的HTML标签,对应js中的innerHTML
.html()是用来读取元素的HTML内容(包括其Html标签)
注意:.html()方法使用在多个元素上时,只读取第一个元素
方法内部使用的是DOM的innerHTML属性来处理的,所以在设置与获取上需要注意的一个最重要的问题,这个操作是针对整个HTML内容(不仅仅是文本内容,元素标签也包含在里面)
(2).text();
读取和修改元素的纯文本内容 对应js中的innerText
.text()用来读取元素的纯文本内容,包括其后代元素;
注意:.text()方法不能使用在表单元素上
结果返回一个字符串,包含所有匹配元素的合并文本
(3).val();
读取或修改表单元素的value值
.val()是用来读取表单元素的"value"值
注意:.val()只能使用在表单元素上,例如<input>,<button>,<textarea>,<select>,<option>等
①通过.val()处理select元素,当没有选择项被选中,他返回null
②.val()方法多用来设置表单的字段的值
③如果select元素有multiple(多选)属性,并且至少一个选择项被选中,.val()方法返回一个数组。这个数组包含每个选中的选择项的值
【区别】
(1)读取数量
.val()方法和.html()相同,如果其应用在多个元素上时,只能读取第一个表单元素的"value"值,但是.text()和他们不一样,如果.text()应用在多个元素上时,将会读取所有选中元素的文本内容
(2)读取内容
虽然.html(),.text(),.val()三种方法都是用来读取选定元素的内容;
.html()是用来读取元素的html内容(包括html标签);
.text()用来读取元素的纯文本内容,包括其后代元素;
.val()是用来读取表单元素的"value"值;
(3).html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容
<html> <head> <style> p { color:blue; margin:8px; } b { color:red; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <p><b>Test</b> Paragraph.</p> <p></p> <script> var str = $("p:first").text(); $("p:last").html(str); </script> </body> </html>
结果:
【总结】
简单理解:
html就是你可以添加像<a></a>、<p></p>等标记
text只能写文本如果写了上面的标记则会以文本形式输出
val是属性,只有有该属性的对象才能调用(表单元素)
.
相关推荐
v-text和v-html 是 Vue.js中两种不同的指令,它们的主要区别在于如何处理模板中的文本内容: v-text: 主要用途是将数据中的文本直接插入到模板中。 当数据中的文本或HTML标签被插入时,它会被原样输出,不需要...
1.HTML html():取得第一个匹配元素的html内容。这个函数不能用于XML文档...与 html() 类似, 但将编码 HTML (将 “<” 和 “>” 替换成相应的HTML实体). 3.VAL val():获得第一个匹配元素的当前值。 val(val):设置每一
DIV与SPAN区别一.html 演示DIV与SPAN区别一。 DIV与SPAN区别二.html 演示DIV与SPAN区别二。 DIV与SPAN实例手把手--布局.html 演示DIV与SPAN实例手把手--布局。 第14章(源代码\第14章) 示例描述:本章...
本文实例讲述了jQuery的text()方法用法。分享给大家供大家参考。具体分析如下: 此方法返回或者设置匹配元素的文本内容。...此方法与html()方法没有参数用法类似,但是还是有很大区别: 1.html()方法取得第一个匹配
本文为大家详细介绍下jquery中,html、val与text三者属性取值的联系与区别,下面有个不错的示例,感兴趣的朋友不要错过
1.HTML html():取得第一个匹配元素的html内容。这个函数不能用于XML文档。...与 html() 类似, 但将编码 HTML (将 “<” 和 “>” 替换成相应的HTML实体). 3.VAL val():获得第一个匹配元素的当前值。一般用来取in
主要介绍了jQuery中text() val()和html()的区别实例详解的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
三、实验内容与步骤 1)正常情况下的html表单提交 html源码如下: <!DOCTYPE HTML> <html> 测试 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <script type="text/javascript" src="jquery...
1.3.1 工具与应用程序的集成平台..... 6 1.3.2 Java开发环境..... 7 1.3.3 开源社区..... 8 1.3.4 Eclipse基金会的目标..... 9 1.3.5 作为用户和捐献者(contributor)参与社区..... 10 1.3.6 Eclipse许可证..... 10...
1.3.1 工具与应用程序的集成平台..... 6 1.3.2 Java开发环境..... 7 1.3.3 开源社区..... 8 1.3.4 Eclipse基金会的目标..... 9 1.3.5 作为用户和捐献者(contributor)参与社区..... 10 1.3.6 Eclipse...
1.3.1 工具与应用程序的集成平台..... 6 1.3.2 Java开发环境..... 7 1.3.3 开源社区..... 8 1.3.4 Eclipse基金会的目标..... 9 1.3.5 作为用户和捐献者(contributor)参与社区..... 10 1.3.6 Eclipse...
不过,Struts1.x与Struts2的Action模型很大的区别。 Struts2和Struts1.x的差别,最明显的就是Struts2是一个pull-MVC架构。这是什么意思呢?从开发者角度看,就是说需要显示给用户的数据可以直接从Action中获取,而不...
HTML5语法的改变 该知识点所说变化指的是基于HTML4基础上所定义的改变,主要有如下: 1.HTML5的文件扩展符(.html或.htm)与内容类型(text/html)保持不变。 2.HTML5中,刻意不使用版本声明,一份文档将会适用于所有...
在jquery中val,text,html都能取到值,或加一个参数来赋值,那么它们有些什么区别?下面我们来举例说明: 首先,html属性中有两个方法,一个有参,一个无参 1. 无参html():取得第一个匹配元素的html内容。这个函数不...
下一步【一个简单的 Windows 程序】 5、向 Windows 的世界问好 MessageBox(NULL,TEXT("世界你好"),TEXT("问好"),MB_OK); VC6 在 Vista、Windows 下编译调试时可能有兼容性提示。 6、学本课程常见问题 (1)为什么...
Hyper Text Markup Language 超文本 (文字+图片+音视+链接…) 标记语言 (浏览器根据标记显示内容) 来自于SGML(标准通用标记语言) 专注于在Web上传递信息 是写给浏览器的语言 历史 HTML1.0 – HTML2.0 (IETF制定) –...
document.open() 打开一个新的空白文档,在IE下,open有两个默认参数,相当于document.open(“text/html”,'””),第二个参数只有一个值可选:replace,如果启用了该值,则新建的文档会覆盖当前页面的文档(相当于...
所有人浏览到的同一网页不会有任何区别。 动态网页:所谓动态网页,就是服务器端可以根据客户端的不同请求动态产生网页内容。它根据不同类型的客户端请求生成不同的页面,具有交互性。动态网页是用标准html代码和...
html() text() 其中html()是为指定的元素添加html内容 text()是为指定的元素添加文本内容 两者的区别在于,text中的内容是纯文本,不会被解析为html 如果要对如下html代码进行操作 代码如下: <body> <p></p> ...