jQuery设置获取文本内容text()
<!--@description-->
<!--@author beyondx-->
<!--@date Created in 2022/07/31/ 23:44-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置获取文本内容text()</title>
</head>
<body>
<input type="button" value="获取" id="getBtn"/>
<input type="button" value="设置" id="setBtn"/>
<div id="div1">我是一个div1标签
<p>我是一个p1标签</p>
<span>span1</span>
</div>
<div>我是一个div2标签
<p>我是一个p2标签</p>
<span>span2</span>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
// 入口函数
$(function () {
// text(): 获取和设置文本
// 1.获取文本: text()方法不给参数
$('#getBtn').click(function () {
// 1.1. 获取 id为 div1这个标签的文本
// 会获取到 这个标签中 所有的文本, 包括 后代元素的文本
console.log($('#div1').text());
// 1.2. 获取标签为 div的 元素的文本
// 包含了 多个 dom元素的 jQuery对象, 通过 text()方法获取 文本, 会把所有 dom元素的 文本获取到
console.log($('div').text());
});
// 2. 设置文本
$('#setBtn').click(function () {
// // 给id 为 div1的这个标签 设置文本
// $('#div1').text('我是新设置的文本');
// // 标签 不会解析出来, 会当做 文本显示
// $('#div1').text('我是新设置的文本<a>我是链接</a>');
// 2.2. 给标签为 div的元素 设置文本
// 包含了 多个 dom元素 的 jQuery对象, 通过 text()方法 设置文本, 会把 所有的 dom元素 都设置上
// 隐式遍历/隐式迭代; 遍历出 每个dom对象, 设置上 文本.
$('div').text('设置的文本');
});
});
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）