### 使用
jQuery 获取元素内容和属性
####
获取元素内容
通过 `html()` 和 `text()` 方法可以分别
获取 HTML
元素中的内容。
- **`html()` 方法**用于
获取或设置匹配
元素的内部 HTML 内容。如果调用时不带参数，则返回第一个匹配
元素的当前 HTML 内容[^1]。
```javascript
var content = $("#example").html();
console.log(content); // 输出
指定 ID 的 HTML 内容
```
- **`text()` 方法**则只
获取或设置纯文本内容，不
包含任何标签结构。
```javascript
var textContent = $("#example").text();
console.log(textContent); // 输出
指定 ID 的纯文本内容
```
---
####
获取元素属性
可以通过 `.attr()` 或 `.prop()` 方法来
获取元素的属性值。
- **`.attr()` 方法**适用于
获取和修改 DOM 属性，例如 id、class 等标准属性以及自定义属性[^2]。
```javascript
//
获取 id 值
var elementId = $("#myElement").attr("id");
console.log(elementId);
//
获取自定义属性 data-example
var customAttr = $("#myElement").attr("data-example");
console.log(customAttr);
```
- **`.prop()` 方法**主要用于布尔型属性（如 checked, disabled），或者那些与 JavaScript 对象状态紧密关联的属性[^3]。
```javascript
// 检查复选框是否被勾选
var isChecked = $("#checkboxExample").prop("checked");
console.log(isChecked);
```
对于数据存储需求较高的场景，还可以利用 `.data()` 来操作
带有前缀 `data-*` 的自定义属性[^4]：
```javascript
var myDataValue = $("#myElement").data("custom-data-key");
console.log(myDataValue); // 自动解析 JSON 数据类型
```
---
#### 综合示例效果展示
假设页面中有如下 HTML 结构：
```html
<div id="contentDiv">
Hello <b>World</b>
</div>
<input type="checkbox" id="checkInput" checked />
<label for="checkInput">Check me!</label>
<img src="image.jpg" alt="Sample Image" id="sampleImage" data-image-id="12345" />
```
对应的脚本实现如下功能演示：
```javascript
$(document).ready(function () {
//
获取 div 中的内容 (HTML 版本)
var htmlContent = $("#contentDiv").html();
console.log(htmlContent);
//
获取 div 中的文字内容 (无标签版本)
var plainText = $("#contentDiv").text();
console.log(plainText);
//
获取 input 是否已
选中
var checkboxState = $("#checkInput").prop("checked");
console.log(checkboxState);
//
获取 img 标签的数据属性 image-id
var imageDataId = $("#sampleImage").data("image-id");
console.log(imageDataId);
//
获取 img 标签的标准属性 src
var imagePath = $("#sampleImage").attr("src");
console.log(imagePath);
});
```
上述代码会依次输出以下结果至浏览器控制台：
1. `<b>Hello World</b>` （来自 `html()`）
2. `Hello World` （来自 `text()`）
3. `true` / `false` （取决于输入框的状态，由 `prop()` 提供）
4. `12345` （图片的自定义数据属性，由 `data()` 获得）
5. 图片路径
字符串（如 `"image.jpg"`）
---
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
