jQuery使用之text()、html()和val()的区别

最新推荐文章于 2021-11-20 10:49:56 发布
最新推荐文章于 2021-11-20 10:49:56 发布
阅读量487 收藏 3
点赞数 1
分类专栏： # jQuery 文章标签： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cnds123321/article/details/104232638
版权

目录

区别表

text()示例

jQuery代码

浏览器输出结果

总结

原生JS

html()示例

jQuery代码

浏览器输出效果

总结

原生JS

val()示例

jQuery代码

浏览器输出结果

总结

原生JS

区别表

jQuery方法对应的JS属性描述对应代码jQuery代码浏览器输出
text()innerText获取所匹配元素的文本内容，包括子标签的文本内容，当不包括子标签本身。jQuery代码
html()innerHTML获取所匹配元素的内容，包括子标签的文本内容和子标签本身。jQuery代码
val()value获取所匹配元素的当前值，是标签中value属性的值，多用于表单input元素。jQuery代码

text()示例

jQuery代码

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<div id="div">DIV的文本内容</div>
		<p><span>span元素</span>文本</p>
		<input id="input" type="text" value="这是一个输入文本框">
		<button id="button" value="按钮">点我</button>

		<script type="text/javascript">
			console.log($('#div').text());
			console.log($('p').text());
			console.log($('p span').text());
			console.log($('#input').text());
			console.log($('#button').text());
		</script>
	</body>
</html>

浏览器输出结果

总结

text()只获取标签的文本内容，即标签中间的那部分内容，如果标签里包含子标签，那么也将获取子标签的文本内容当不包括子标签本身。input类标签text()获取为空。与JavaScript的innerText属性功能相同。

原生JS

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<div id="div">DIV的文本内容</div>
		<p><span>span元素</span>文本</p>
		<input id="input" type="text" value="这是一个输入文本框">
		<button id="button" value="按钮">点我</button>

		<script type="text/javascript">
			console.log(document.getElementById("div").innerText);
			console.log(document.getElementsByTagName("p")[0].innerText);
			console.log(document.querySelector("p span").innerText);
			console.log(document.getElementById("input").innerText);
			console.log(document.getElementById("button").innerText);
		</script>
	</body>
</html>

html()示例

jQuery代码

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<div id="div">DIV的文本内容</div>
		<p><span>span元素</span>文本</p>
		<input id="input" type="text" value="这是一个输入文本框">
		<button id="button" value="按钮">点我</button>

		<script type="text/javascript">
			console.log($('#div').html());
			console.log($('p').html());
			console.log($('p span').html());
			console.log($('#input').html());
			console.log($('#button').html());
		</script>
	</body>
</html>

浏览器输出效果

总结

html()被选元素的内容（包括标签），即如果标签里包含子标签，那么也将获取子标签本身和子标签中的内容。input类标签html()获取为空。与JavaScript的innerHTML属性功能相同。

原生JS

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<div id="div">DIV的文本内容</div>
		<p><span>span元素</span>文本</p>
		<input id="input" type="text" value="这是一个输入文本框">
		<button id="button" value="按钮">点我</button>

		<script type="text/javascript">
			console.log(document.getElementById("div").innerHTML);
			console.log(document.getElementsByTagName("p")[0].innerHTML);
			console.log(document.querySelector("p span").innerHTML);
			console.log(document.getElementById("input").innerHTML);
			console.log(document.getElementById("button").innerHTML);
		</script>
	</body>
</html>

val()示例

jQuery代码

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<div id="div">DIV的文本内容</div>
		<p><span>span元素</span>文本</p>
		<input id="input" type="text" value="这是一个输入文本框">
		<button id="button" value="按钮">点我</button>

		<script type="text/javascript">
			console.log($('#div').val());
			console.log($('p').val());
			console.log($('p span').val());
			console.log($('#input').val());
			console.log($('#button').val());
		</script>
	</body>
</html>

浏览器输出结果

总结

val()返回或设置被选元素的值。元素的值是通过 value 属性设置的。因此该方法大多用于 input 元素，相当于JS的value属性。

原生JS

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<div id="div">DIV的文本内容</div>
		<p><span>span元素</span>文本</p>
		<input id="input" type="text" value="这是一个输入文本框">
		<button id="button" value="按钮">点我</button>

		<script type="text/javascript">
			console.log(document.getElementById("div").value);
			console.log(document.getElementsByTagName("p")[0].value);
			console.log(document.querySelector("p span").value);
			console.log(document.getElementById("input").value);
			console.log(document.getElementById("button").value);
		</script>
	</body>
</html>

浏览器输出略微有所不同

二木成林
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery中的html(),text(),val()三种方法
weixin_49757916的博客
05-17 1012
jQuery 一·jQuery中的html()方法的讲解： 公共代码css： <style> div{ width:200px; height:200px; background-color:red; } </style> 1·JavaScript中的html()方法，代码如下： <body> <div id="box"&gt
jQuery中html()方法和text()方法的区别
weixin_46259203的博客
05-15 2054
1. html()方法 此方法类似于JavaScript中的innerHTML属性，可以用来读取或者设置某个元素中的HTML内容 为了更清楚地展示效果，将元素的HTML代码改成： <p title="选择你最喜欢的男孩子."><strong>你最喜欢的男孩子是？</strong><p> 然后用html()方法对元素进行操作： var p_html = $("p").html(); //获取<p>元素中的HTML代码 alert(p_html);
jQuery中text() val()和html()的区别实例详解
11-25
简单的说：html()和text()的区别主要在于是否包含标签。而val()针对的是表单元素。 但是有时还是不是那么太清晰。 html(),val(),text()都分为有参和无参。 举例说明它们的不同之处： html()在没有参数的情况下，取得第一个匹配元素的内容。必须要注意的是，即使匹配多个，也只能取得匹配的第一个元素。 如： <body> <p>你选中这段文字后，看看它们的文本颜色和背景色，就能明白::selection的作用。</p> <h3>选中下面的文字，看看它的颜色</h3> <h3>选中下面的文字，看看它的颜色</h3> <h3>选中下面的文字，看看它的颜色</h3> <i
jquery中text(),val(),html()区别
王座大都督的专栏
04-17 489
一、jquery中HTML   1. 无参html（） 方法用来获取任意元素的HTML内容，如果你调用多个选定元素的.html()方法，那么其读取的只是第一个元素，换句话说：如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。另外此法对XML方档是无效的。 要读取一个元素的HTML内容，首先你要选择这个元素，然后在调用jQuery中的.html()方法。  
.html().text().val() 三者的区别
尹烁的博客
07-07 521
.html()用为读取和修改元素的HTML标签 对应js中的innerHTML.html()是用来读取元素的HTML内容（包括其Html标签）,.html()方法使用在多个元素上时，只读取第一个元素.text()用来读取或修改元素的纯文本内容 对应js中的innerTexttext()用来读取元素的纯文本内容，包括其后代元素;.text()方法不能使用在表单元素上.val()用来读取或修改表
jquery中的html()及.text()和.val()的区别
sina_panda
04-23 785
读取、修改元素的html结构或者元素的文本内容是常见的DOM操作，jQuery针对这样的处理提供了2个便捷的方法.html()与.text() .html()方法  获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容，具体有3种用法： .html() 不传入值，就是获取集合中第一个匹配元素的HTML内容.html( htmlString )  设置每一个
jquery中text(),html()和val()的区别
welcome to daijiguo's blog
07-24 512
1.HTML html():取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档 html(val):设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。 2.TEXT text():取得所有匹配元素的内容。 结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。 text(val)...
jQuery操作attr、prop、val()/text()/html()、class属性
10-16
总结来说，本文介绍了jQuery中操作属性、值、文本和CSS类的常用方法，并解释了它们的使用场景和区别。attr和prop方法用于操作属性，val()、text()和html()用于操作值和内容，而class方法则用于操作样式类。通过实例...
jquery中html、val与text三者属性取值的联系与区别介绍
10-26
首先，要理解jquery中的html、val和text三个属性，我们需要明确它们分别的作用和使用场景。这三种属性都是对DOM元素内容的获取与设置的方法，但它们之间存在明显的区别。 html属性主要用来获取或设置HTML内容。它有...
『jQuery』.html(),.text()和.val()的概述及使用
10-27
其中，.html()、.text()和.val()是jQuery中用于操作元素内容的三个核心方法。通过这些方法，开发者可以方便地读取或修改页面元素的HTML结构、文本内容以及表单元素的value值。 首先，我们来详细探讨.html()方法。这...
jQuery: .text() . .html() 和 .val() 区别
m0_51491785的博客
11-20 825
jQuery你是否真的清除.text() .html()和val()方法的用处和解释吗？
jQuery_text(),val()和html()
icecoola_的博客
06-28 138
关于jquery中html()、text()、val()的区别 .html()用为读取和修改元素的HTML标签 对应js中的innerHTML .html()是用来读取元素的HTML内容（包括其Html标签）, .html()方法使用在多个元素上时，只读取第一个元素 .text()用来读取或修改元素的纯文本内容 对应js中的innerText text()用来读取元素的...
jquery的.html(),.text().val()方法的区别
LIRUN的博客
11-09 256
.html()方法 获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容，具体有3种用法： .html() 不传入值，就是获取集合中第一个匹配元素的HTML内容 .html( htmlString )  设置每一个匹配元素的html内容 .html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数 注意事项： .html...
jQuery获取文本节点之-text()与val()方法区别
07-28 113
在jquery中val,text,html都能取到值,或加一个参数来赋值,那么它们有些什么区别?下面我们来举例说明： 首先，html属性中有两个方法，一个有参，一个无参 1. 无参html（）：取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档，返回的是一个String 例子： html页面代码：<di...
html/val区别；
weixin_30915275的博客
08-28 128
　html() html(值)/val() val(值)-----（值）括号里面有值为赋值set,括号里面图如果没有值（）为取值get; 　　html:作用于标签对，（值）为标签对里面赋值，（）为取得标签对里面的值 　　val：作用域表单元素，（值）为表单元素赋值，（）为取得表单元素的值 ---恢复内容结束--- 转载于:https://www.cnblogs.com/cwkzh...
val()和html()以及text()的区别
hello world！
03-28 654
一:可选项(&lt;span id="total" style="color:red;"&gt;0&lt;/span&gt;)&lt;/span&gt;使用jquery获取span标签的值代码如下$("#total").html(); //即可二:如果是input标签则使用下面的代码来获取对应的值&lt;input type="text" id="name&quo
Jquery中dom对象取值的3种方式：val()、html()、text()
二次加工是一种痛
06-09 1573
.css('border','none') .css('borderBottom','solid 1px navy') .css({'width':'30px'}); 以上三行代码都是针对之前的jQuery对象设置CSS样式，如果一次需要设置多个CSS值，可用另一种形式，如：             .css({'border':'none','borderBottom':'solid 1
jQuery的html()，text()和val()区别
key_zhaojd
10-19 558
jquery html() text() val()
html()方法中,text()和val()异同
最新发布
05-19
在jQuery中，`html()`、`text()`和`val()`方法都用于操作DOM元素的内容。 1. `html()`方法用于获取或设置元素的HTML内容。如果没有传递参数，则返回元素的HTML内容；如果传递了参数，则设置元素的HTML内容。 例子...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值