异常教程

jQuery 获取内容和属性（长文解析）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在网页开发中，操作 DOM（文档对象模型）是前端工程师的核心技能之一。jQuery 作为简化 DOM 操作的 JavaScript 库，提供了大量便捷的方法，其中 “获取内容和属性” 是开发者最常使用的功能之一。无论是表单数据提取、动态内容更新，还是响应式交互设计，掌握这一技能都能显著提升开发效率。本文将从基础概念出发，结合代码示例和实战场景，帮助读者系统性地理解如何使用 jQuery 实现内容与属性的获取。

一、基础概念：DOM、内容与属性的直观理解

1.1 什么是 DOM？

DOM（Document Object Model）可以理解为浏览器解析 HTML 后生成的一棵“树状结构”。每个 HTML 元素（如 <div>、<p>、<input>）都是这棵树上的节点，而 jQuery 的作用正是通过简洁的语法，让我们快速定位、修改这些节点的属性或内容。

比喻：
想象 DOM 是一座图书馆的目录系统，每个书架（元素）都有特定的位置（选择器），每本书（内容）和标签（属性）都能通过目录快速检索。

1.2 内容与属性的区别

  • 内容（Content）：指元素内部的文本或 HTML 结构，例如 <div>欢迎来到我的网站</div> 中的“欢迎来到我的网站”即为内容。
  • 属性（Attribute）：是元素的“元信息”，如 <img src="image.jpg" alt="风景图"> 中的 src 和 alt 即为属性。

关键区别：

  • 内容是元素“体内”的数据，属性是元素“表面”的标签。
  • jQuery 提供了不同的方法分别处理这两类数据。

二、获取内容的方法详解

2.1 使用 text() 获取纯文本内容

语法：

$(selector).text()

示例：
假设 HTML 中有以下元素：

<p id="intro">这是一段纯文本介绍。</p>

通过以下代码可获取文本内容：

const textContent = $("#intro").text();  
console.log(textContent); // 输出：这是一段纯文本介绍。

注意：text() 会自动去除 HTML 标签，仅保留文本。

2.2 使用 html() 获取带 HTML 的内容

语法：

$(selector).html()

示例：
若 HTML 元素包含 HTML 标签：

<div id="content">  
  <strong>重点内容：</strong>  
  这里展示带格式的文本。  
</div>

执行以下代码：

const htmlContent = $("#content").html();  
console.log(htmlContent); // 输出：完整的 HTML 结构字符串

对比：

  • text() 返回纯文本，html() 返回原始 HTML 结构。

2.3 获取表单元素的值：val()

语法：

$(selector).val()

示例：
对于表单输入框：

<input type="text" id="username" value="默认用户名">

获取输入值的代码为：

const inputValue = $("#username").val();  
console.log(inputValue); // 输出：默认用户名

适用场景：

  • 表单验证、数据提交前的预处理。

三、获取属性的方法详解

3.1 使用 attr() 获取标准属性

语法：

$(selector).attr("属性名")

示例：
假设有一个图片元素：

<img id="myImage" src="photo.jpg" alt="风景图" width="200">

获取其 src 属性：

const imagePath = $("#myImage").attr("src");  
console.log(imagePath); // 输出：photo.jpg

3.2 特殊属性：class 与 style 的处理

3.2.1 获取 class 属性

const className = $("#myDiv").attr("class");  
console.log(className); // 输出元素的 class 值

3.2.2 获取内联样式 style

若元素直接定义了 style 属性，如：

<div id="box" style="background-color: red; width: 100px;"></div>

可通过以下方式获取：

const bgColor = $("#box").css("background-color");  
console.log(bgColor); // 输出：rgb(255, 0, 0)

注意：

  • css() 方法用于获取或设置内联样式，而 attr("style") 返回原始字符串（如 background-color: red）。

3.3 区分 attr() 和 prop()

关键区别：

  • attr() 获取 HTML 属性（定义在标签中的值）。
  • prop() 获取 DOM 属性（可能由 JavaScript 动态修改后的值）。

示例：

<input type="checkbox" id="agree" checked>  

// 获取 HTML 属性中的 checked（始终返回字符串或 undefined）  
const attrChecked = $("#agree").attr("checked"); // "checked"  
// 获取 DOM 属性的当前状态（布尔值）  
const propChecked = $("#agree").prop("checked"); // true

四、实战案例：结合内容与属性的综合应用

4.1 案例 1：表单验证

需求：用户提交表单时，若输入为空，则高亮提示错误。

HTML 结构：

<form id="loginForm">  
  <input type="text" id="username" placeholder="用户名">  
  <input type="password" id="password" placeholder="密码">  
  <button type="submit">登录</button>  
</form>  
<div id="error"></div>

jQuery 代码：

$("#loginForm").submit(function(event) {  
  event.preventDefault(); // 阻止默认提交  
  const username = $("#username").val().trim();  
  const password = $("#password").val().trim();  

  if (username === "" || password === "") {  
    $("#error")  
      .text("用户名或密码不能为空！")  
      .css("color", "red");  
  } else {  
    // 提交逻辑  
    console.log("提交成功");  
  }  
});

4.2 案例 2：动态加载图片并设置样式

需求：点击按钮时，显示隐藏的图片，并动态调整其宽度。

HTML 结构：

<button id="showImage">显示图片</button>  
<img id="hiddenImage" src="photo.jpg" alt="隐藏图" style="display: none;">

jQuery 代码：

$("#showImage").click(function() {  
  const $img = $("#hiddenImage");  
  $img.show(); // 显示图片  
  // 获取并修改 width 属性  
  const originalWidth = $img.attr("width"); // 假设原属性为 200  
  $img.attr("width", parseInt(originalWidth) + 50); // 调整为 250  
  // 或者直接操作样式  
  $img.css("width", "250px");  
});

五、常见问题与进阶技巧

5.1 问题 1：如何获取多个元素的内容？

解决方法：
使用 jQuery 遍历方法 each() 或直接返回数组：

// 获取所有段落的文本内容  
const allTexts = [];  
$("p").each(function() {  
  allTexts.push($(this).text());  
});

5.2 问题 2：如何判断元素是否存在？

解决方法：

if ($("#myElement").length > 0) {  
  // 元素存在  
}

5.3 进阶技巧：使用选择器优化代码

通过更精确的选择器减少层级遍历：

// 直接选择 class 为 active 的 li 元素  
$(".list-group li.active").attr("data-id");

结论

通过本文的讲解，读者应已掌握 jQuery 获取内容和属性 的核心方法与应用场景。从基础的 text()、html()、val()，到属性操作的 attr() 和 prop()，再到实际案例中的综合运用，这些技能能帮助开发者高效完成 DOM 操作。

建议读者通过以下步骤巩固知识：

  1. 使用在线代码编辑器（如 CodePen）尝试案例；
  2. 针对真实项目需求，设计并实现一个小型功能（如动态表单校验）；
  3. 阅读 jQuery 官方文档，探索更多高级方法（如 data()、hasClass()）。

掌握这一技能后，开发者可以进一步学习事件绑定、动画效果等进阶主题，逐步构建出更复杂、交互友好的网页应用。

最新发布

查看更多文章