jQuery内容与属性操作指南
编程小白也能理解的jQuery核心知识点
一、获取元素内容
text() 方法
获取或设置元素的纯文本内容（不包含HTML标签）。就像只提取文字内容，忽略所有格式标签。
// 获取文本内容
var content = $(“selector”).text();
// 设置文本内容
$(“selector”).text(“新文本内容”);
var content = $(“selector”).text();
// 设置文本内容
$(“selector”).text(“新文本内容”);
html() 方法
获取或设置元素的HTML内容（包含所有HTML标签）。相当于读取元素内部的完整HTML代码。
// 获取HTML内容
var content = $(“selector”).html();
// 设置HTML内容
$(“selector”).html(“<strong>新内容</strong>”);
var content = $(“selector”).html();
// 设置HTML内容
$(“selector”).html(“<strong>新内容</strong>”);
val() 方法
获取或设置表单元素（输入框、下拉框等）的值。这是专门用来处理表单数据的。
// 获取表单值
var value = $(“input”).val();
// 设置表单值
$(“input”).val(“新值”);
var value = $(“input”).val();
// 设置表单值
$(“input”).val(“新值”);
💡 使用场景建议：
- 只想获取文字内容 → 用 text()
- 需要保留HTML格式 → 用 html()
- 处理表单输入 → 用 val()
二、获取元素属性
attr() 方法
获取或设置元素的属性值（如 id, class, href, src 等）。适用于大多数标准HTML属性。
// 获取属性值
var href = $(“a”).attr(“href”);
// 设置属性值
$(“img”).attr(“src”, “new-image.jpg”);
// 一次设置多个属性
$(“img”).attr({
src: “new-image.jpg”,
alt: “新图片描述”
});
var href = $(“a”).attr(“href”);
// 设置属性值
$(“img”).attr(“src”, “new-image.jpg”);
// 一次设置多个属性
$(“img”).attr({
src: “new-image.jpg”,
alt: “新图片描述”
});
prop() 方法
专门用于布尔属性（如 checked, selected, disabled）。这些属性只有true/false两种状态。
// 获取属性状态
var isChecked = $(“checkbox”).prop(“checked”); // 返回 true 或 false
// 设置属性状态
$(“checkbox”).prop(“checked”, true); // 勾选复选框
var isChecked = $(“checkbox”).prop(“checked”); // 返回 true 或 false
// 设置属性状态
$(“checkbox”).prop(“checked”, true); // 勾选复选框
⚠️ attr() vs prop() 重要区别：
对于像 checked 这样的布尔属性：
- attr() 返回初始值（可能是 “checked” 或 undefined）
- prop() 返回当前实际状态（true/false）
所以对于布尔属性，优先使用 prop() 方法！
data() 方法
专门处理以 data- 开头的自定义属性（HTML5），如 data-id, data-price。
// HTML: <div data-id=”123″ data-user='{“name”:”John”}’></div>
// 获取 data-id 属性
var id = $(“div”).data(“id”); // 123
// 获取 JSON 数据（自动转换为对象）
var user = $(“div”).data(“user”);
console.log(user.name); // “John”
// 获取 data-id 属性
var id = $(“div”).data(“id”); // 123
// 获取 JSON 数据（自动转换为对象）
var user = $(“div”).data(“user”);
console.log(user.name); // “John”
💡 最佳实践：
- 标准属性 → 使用 attr()
- 布尔属性 → 使用 prop()
- 自定义数据 → 使用 data-* 属性配合 data()
互动演示区
在下面的方框中尝试各种jQuery方法，查看结果：
📝 关键知识点总结：
- text(): 只获取纯文本内容
- html(): 获取完整的HTML内容
- val(): 获取表单元素的值
- attr(): 用于标准属性（href, src等）
- prop(): 用于布尔属性（checked, disabled等）
- data(): 用于data-*自定义属性