重温JQuery中的html(),text(),val()的语法和应用 - Web前端
作者：98wpeu发布时间：2026-09-25分类：网页前端技术浏览：12
时间过得好快，五一假期快完了，玩了2天，好累，今天在家休息，给自己充下电。今天主要想分享下JQuery中的html(),text(),val()的语法和应用，这几个属性在刚开始学习jq就会接触到，但是你是否知道他们的关系和用法呢。OK，我们接下来拿具体实例讲解下。
1.HTML()
html():取得第一个匹配元素的html内容。这个函数不能用于xml文档。但可以用于xhtml文档
html(val):设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
2.TEXT()
text()：取得所有匹配元素的内容。
结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
text(val)：设置所有匹配元素的文本内容
与 html() 类似， 但将编码 HTML (将 "<" 和 ">" 替换成相应的HTML实体)。
3.VAL()
val()：获得第一个匹配元素的当前值。
val(val)：设置每一个匹配元素的值。
上面的内容是在JQuery的帮助文档里拷贝的，也都不废话多说了。下面是自己做的一些练习，在做练习的时候我发现了html和text的另一个不同的地方
html()去元素的内容的时候，能将所选定的元素下面的格式也取到了。
如：<div id="divShow"><b><i>Write Less Do More</i></b></div>
如果我们用var strHTML = $("#divShow").html();取的话，
结果是：<b><i>Write Less Do More</i></b>
如果我们用var strHTML2 = $("#divShow b i").html();取的话
结果是Write Less Do More
而text没有第一种情况，
如果我们var strText = $("#divShow").text();取的话
结果是Write Less Do More。
下面是一个具体的实例，大家可以把代码贴到编辑器然后预览下效果。
<%@ page language="java" import="Java.util.*" pageEncoding="utf-8"%>
<%
string path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCtype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<script src="JS/jQuery.js" type="text/javascript"></script>
<!--
<script src="http://code.jquery.com/JQuery-latest.js"></script>
-->
<title> 获取或设置元素的内容</title>
<style type="text/CSS">
body{font-size:15px;text-align:center}
div{border:solid 0px #666;padding:5px;width:220px;margin:5px}
</style>
<script type="text/JavaScript">
$(function() {
var strHTML = $("#divShow").html();// 获取HTML 内容(包含div下面的两个格式)
var strHTML2 = $("#divShow b i").html(); //获取HTML内容
var strHTML3 = $("div").html();
var strText = $("#divShow").text();// 获取文本内容
var strText2 = $("div").text();
$("#divHTML").html(strHTML);// 设置HTML 内容
$("#divHTML2").html(strHTML2); //设置HTML内容
$("#divHTML3").html(strHTML3); //设置HTML内容
$("p").html(strHTML);
$("#divText").text(strText);// 设置文本内容
$("#divText2").text(strText2);// 设置文本内容
$("a").text(strText);
$("select").change(function() { // 设置列表框change 事件
// 获取列表框所选中的全部选项的值
alert($("select").val());
var strSel = $("select").val().join(",");
$("input").val(strSel); // 显示列表框所选中的全部选项的值
})
})
</script>
</head>
<body>
<table border="1" bordercolor="#A9A9A9" cellspacing="0">
<tr><td>******************************</td><td>*******************************************</td></tr>
<tr>
<td><div id="divShow"><b><i>Write Less Do More</i></b></div></td>
<td>这是原内容</td>
</tr>
<tr>
<td><div id="divShow"><b><i>Write XXXX Do XXXX</i></b></div></td>
<td>这是原内容</td>
</tr>
<tr><td>******************************</td><td>*******************************************</td></tr>
<tr>
<td><div id="divHTML">1</div></td>
<td>获取原内容(连带内容的格式)后以html方式输出</td>
</tr>
<tr>
<td><div id="divHTML2">2</div></td>
<td>获取原内容(不带内容的格式)后以html方式输出</td>
</tr>
<tr>
<td><div id="divHTML3">3</div></td>
<td>获取原内容(获取第一个匹配元素的内容)后以html方式输出</td>
</tr>
<tr>
<td><p></p></td>
<td>HTML方式设置段落的文本</td>
</tr>
<tr>
<td><p></p></td>
<td>如果这个也有内容了,就是设置每个匹配元素的内容</td>
</tr>
<tr><td>******************************</td><td>*******************************************</td></tr>
<tr>
<td><div id="divText">4</div></td>
<td>获取原内容后以text方式输出</td>
</tr>
<tr>
<td><div id="divText2"></div></td>
<td>获取原内容(获取所有匹配元素的内容)后以text方式输出</td>
</tr>
<tr>
<td><a></a></td>
<td>TEXT方式设置段落的文本</td>
</tr>
<tr>
<td><a></a></td>
<td>如果这个也有内容了,就是设置每个匹配元素的内容</td>
</tr>
<tr><td>******************************</td><td>*******************************************</td></tr>
<tr>
<td>
<select multiple="multiple"style="height:96px;width:85px">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
<option value="4">Item 4</option>
<option value="5">Item 5</option>
<option value="6">Item 6</option>
</select>
<select>
<option value="7">Item 7</option>
<option value="8">Item 8</option>
<option value="9" selected>Item 9</option>
</select>
</td>
<td>
</td>
</tr>
<tr>
<td><input ></input></td>
<td><input ></input></td>
</tr>
</table>
</body>
</html>总结
.html()用为读取和修改元素的HTML标签；
.text()用来读取或修改元素的纯文本内容；
.val()用来读取或修改表单元素的value值。
这三个方法功能上的对比。
.html(),.text(),.val()三种方法都是用来读取选定元素的内容；只不过.html()是用来读取元素的HTML内容（包括其Html标签），.text()用来读取元素的纯文本内容，包括其后代元素，.val()是用来读取表单元素的"value"值。其中.和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上；另外.html()方法使用在多个元素上时，只读取第一个元素；.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。
.html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容。
.html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。
- 上一篇：自媒体平台刮起原创保护之风 靠抄袭和剽窃自媒体即将被抛弃 - Web前端
- 下一篇：已经是最后一篇了
相关推荐
- SEO将被AI人工智能颠覆，你准备好了吗？ - Web前端
- 自媒体平台刮起原创保护之风 靠抄袭和剽窃自媒体即将被抛弃 - Web前端
- 分析动态生成dom绑定事件 - Web前端
- 个人对jQuery中live()与bind()的理解 - Web前端
- 那些年玩转过的一些jQuery开发小技巧 - Web前端
- 微信小程序再掀波澜：开放微信群相关能力 更个性化的服务 - Web前端
- 百度账号实名制紧急启动 未来百度SEO玩得转吗？ - Web前端
- 功能强大的jquery.validate表单验证插件 - Web前端
- 微信公众平台新增附近的小程序功能 猜测意欲抢占线下流量？ - Web前端
- JqueryRotate让你的动画再飞一会！ - Web前端
- 网页前端技术排行
-
- 1[Web前端]用javascript实现默认图片替代未显示的图片 - Web前端
- 2分析Iconfont-阿里巴巴矢量常用图标库 - Web前端
- 3jQuery实例教程:制作网页中可折叠的面板 - Web前端
- 4【第六章】Foundation之按钮和下拉功能 - Web前端
- 5基于jquery的滚动条滚动固定div(附演示下载) - Web前端
- 6jQuery编写widget的一些技巧分享 - Web前端
- 7在Mac/PC上远程调试iPhone/iPad上的网页 - Web前端
- 8分享精心挑选的12款优秀jQuery Ajax分页插件和教程 - Web前端
- 9jQuery实现鼠标移到元素上动态提示消息框效果 - Web前端
- 最近发表
-
- WordPress随机显示特色图片插件：Random Post Thumbnails
- KeePass实现Chrome浏览器自动填充密码方法一
- LNMP一键包nginx 301强制跳转到https教程
- KeePass实现Chrome浏览器自动填充密码方法二
- #建站# 免费的VPS管理软件Xshell8/Xftp8中文版下载
- 使用Xshell 8连接VPS教程_电脑登录vps的方法
- WordPress评论界面添加烟花????效果
- 不同浏览器书签同步方案：坚果云+Floccus_详细使用教程
- iOS端KeePassXC客户端APP：Strongbox Password Safe
- 给WordPress评论中的Gravatar头像图片添加ALT属性