jQuery获取span的内容

本文介绍了一种使用jQuery来获取HTML中span元素内容的方法。通过简单的代码示例,展示了如何利用jQuery的选择器和.text()方法来读取指定span元素的文本内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

jQuery 中操作 `<span>` 元素的内容非常简单。我们可以通过 `.text()` 或者 `.html()` 方法来获取或修改 `<span>` 的内容。 ### 主要方法: 1. **`.text()`**:用于获取或设置指定元素的纯文本内容,不会处理 HTML 标签。 2. **`.html()`**:用于获取或设置指定元素的所有内容(包括 HTML 标记)。 下面详细介绍如何使用这两种方法对 `<span>` 内部内容进行读取和修改。 --- #### 获取 `<span>` 内容 假设页面中有如下结构: ```html <span id="mySpan">初始内容</span> ``` 如果想取得该 `<span>` 的文本内容,可以这样做: ```javascript var content = $("#mySpan").text(); // 返回 "初始内容" console.log(content); ``` 如果是包含 HTML 片段的情况,则需要用 `.html()` 来提取完整信息: ```html <span id="anotherSpan"><strong>加粗文字</strong></span> ``` 对应的 JavaScript 代码为: ```javascript var htmlContent = $("#anotherSpan").html(); // 输出 "<strong>加粗文字</strong>" console.log(htmlContent); var textContent = $("#anotherSpan").text(); // 只返回 “加粗文字” console.log(textContent); ``` --- #### 修改 `<span>` 内容 同样地,我们可以利用上述两个函数给特定 `<span>` 赋予新。 ##### 替换为普通字符串 ```javascript $("#mySpan").text("新的文本"); // 现在 <span> 显示的是“新的文本”而不是之前的"初始内容" ``` ##### 插入含标签的复杂片段 如果你希望插入一段带标记的语言,则应该选择 `.html()`. 例如将上面的例子改为: ```javascript $("#anotherSpan").html("斜体字替换原有强调部分"); // 此时 anotherSpan 包裹着的新HTML会显示成 斜体 ``` 注意这里传进去的是完整的 HTML 字符串形式而非 DOM 对象! --- #### 综合案例 - 动态更新计数器 设想场景下我们需要实时改变某个 Span 段落里的数字统计结果,比如点击一次增加一的数量: ```html <p><span id="counter">0</span>次点击。</p> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ let count = parseInt($("#counter").text(), 10); $("button").click(function () { ++count; $('#counter').text(count.toString()); }); }); </script> <button>点我增数</button> ``` 在此脚本里每次按压按钮都会把当前计数从原来的 Span 提取出、递增再放回去展现给用户看到最新的状态。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值