异常教程

jQuery HTML / CSS 方法（超详细）

更新时间:

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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+ 小伙伴加入学习 ，欢迎点击围观

前言：为什么选择 jQuery 处理 HTML / CSS？

在现代前端开发中，jQuery 作为一款轻量级 JavaScript 库，凭借其简洁的语法和强大的跨浏览器兼容性，持续为开发者提供高效的操作 HTML 和 CSS 的解决方案。对于编程初学者而言，jQuery 将复杂的 DOM 操作封装成直观的函数，犹如“翻译官”般将抽象的计算机语言转化为人类可理解的指令。而对于中级开发者，它又能成为快速实现复杂交互效果的“瑞士军刀”。本文将通过循序渐进的方式，系统讲解 jQuery 在 HTML / CSS 方法中的核心应用，并通过实战案例巩固理解。

一、jQuery 的 DOM 操作基础：构建网页的“积木游戏”

1.1 获取和修改 HTML 内容：像编辑文档一样操作元素

jQuery 提供了 text()、html()、val() 等方法，分别用于处理文本内容、HTML 结构和表单值。想象你正在整理一个文件柜，text() 相当于直接替换文件内容，而 html() 则允许插入包含标签的完整 HTML 结构。

// 获取和修改文本内容
$("#myElement").text("这是新文本"); // 替换纯文本内容
$("#myElement").text(); // 返回当前文本内容

// 获取和修改 HTML 结构
$("#myDiv").html("<p>包含段落的HTML内容</p>"); // 插入HTML标签
$("#myDiv").html(); // 返回元素内的HTML字符串

1.2 属性操作：给网页元素“贴标签”

通过 attr() 和 prop() 方法，可以像给物品贴标签一样管理元素属性。attr() 适用于静态属性（如 src、href），而 prop() 则用于动态属性（如复选框的 checked 状态）。

// 设置和获取属性值
$("#myLink").attr("href", "https://example.com"); // 修改链接地址
$("#myCheckbox").prop("checked", true); // 设置复选框状态

// 获取属性值
var currentSrc = $("#myImage").attr("src"); // 读取图片路径

二、CSS 操作方法：为网页元素“换装”

2.1 单值样式操作：像调色板一样控制外观

css() 方法允许直接修改元素的 CSS 属性，如同在画布上涂抹颜料。开发者可以动态调整颜色、尺寸、边距等视觉属性。

// 修改单个 CSS 属性
$("#myButton").css("background-color", "blue");

// 修改多个属性（对象形式）
$("#myDiv").css({
  "color": "white",
  "padding": "20px",
  "border-radius": "10px"
});

2.2 状态切换：元素的“变身术”

通过 addClass()、removeClass() 和 toggleClass()，可以像给角色换装一样快速切换元素样式。例如，点击按钮时高亮显示元素：

// 添加/移除类
$("#highlightButton").click(function() {
  $("#target").addClass("highlight"); // 添加高亮样式
});

// 切换类状态
$(".toggleButton").click(function() {
  $("#toggleElement").toggleClass("hidden"); // 切换可见性
});

三、进阶技巧：让网页动起来

3.1 动态内容加载：像积木一样拼接页面

使用 append()、prepend()、before() 等方法，可以像乐高积木一样动态构建页面结构。例如，实时添加列表项：

$("#addItemButton").click(function() {
  var newItem = $("<li>新项目</li>");
  $("#myList").append(newItem); // 在列表末尾添加
});

3.2 CSS 动画与过渡：元素的“舞台表演”

结合 animate() 方法和 CSS 过渡，可以创建流畅的视觉效果。例如，鼠标悬停时元素放大：

$(".box").hover(
  function() {
    $(this).animate({ "width": "200px", "height": "200px" }, 500); // 放大动画
  },
  function() {
    $(this).animate({ "width": "100px", "height": "100px" }, 500); // 缩小动画
  }
);

四、实战案例：构建实时表单验证系统

4.1 案例需求分析

我们需要实现一个包含用户名和邮箱输入框的表单，要求：

  1. 输入框为空时显示红色边框
  2. 输入合法内容后边框恢复绿色
  3. 提交时验证所有字段

4.2 代码实现步骤

HTML 结构

<form id="myForm">
  <div class="form-group">
    <label>用户名</label>
    <input type="text" id="username" class="input-field">
    <span class="error-message"></span>
  </div>
  
  <div class="form-group">
    <label>邮箱</label>
    <input type="email" id="email" class="input-field">
    <span class="error-message"></span>
  </div>
  
  <button type="submit">提交</button>
</form>

CSS 样式

.input-field.error {
  border-color: red;
}
.input-field.success {
  border-color: green;
}
.error-message {
  color: red;
  display: none;
}

jQuery 逻辑

$(document).ready(function() {
  // 表单提交事件
  $("#myForm").submit(function(e) {
    e.preventDefault();
    validateForm();
  });

  // 输入框实时验证
  $(".input-field").on("input", function() {
    validateField(this);
  });

  // 验证函数
  function validateField(element) {
    let $field = $(element);
    let value = $field.val().trim();
    
    if (value === "") {
      $field.removeClass("success").addClass("error");
      $field.next(".error-message").text("不能为空").show();
    } else if ($field.is("[type='email']") && !validateEmail(value)) {
      $field.removeClass("success").addClass("error");
      $field.next(".error-message").text("邮箱格式错误").show();
    } else {
      $field.removeClass("error").addClass("success");
      $field.next(".error-message").hide();
    }
  }

  // 邮箱格式验证
  function validateEmail(email) {
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return regex.test(email);
  }

  // 表单验证
  function validateForm() {
    let isValid = true;
    
    $(".input-field").each(function() {
      validateField(this);
      if ($(this).hasClass("error")) isValid = false;
    });
    
    if (isValid) {
      alert("提交成功！");
    } else {
      alert("请修正错误后重试");
    }
  }
});

五、性能优化与现代开发趋势

5.1 jQuery 的性能考量

  • 避免过度使用选择器：将频繁操作的元素缓存到变量中
  • 使用事件委托：通过 .on() 方法处理动态生成元素的事件
  • 谨慎使用动画：复杂动画可能导致页面卡顿

5.2 与现代框架的协同

在 Vue 或 React 项目中，jQuery 可作为辅助工具用于特定场景（如第三方插件集成）。开发者应根据项目需求选择合适的技术栈，避免过度依赖。

结论：掌握 jQuery HTML / CSS 方法的关键路径

通过本文的系统学习，读者已掌握从基础操作到复杂交互的完整技能链。建议按照以下步骤巩固知识：

  1. 实践基础方法：通过修改示例代码加深理解
  2. 构建小型项目：尝试实现类似表单验证的完整功能
  3. 查阅官方文档：定期参考 jQuery API 探索新方法
  4. 结合现代技术：了解 jQuery 与原生 JavaScript 的兼容性

记住，jQuery HTML / CSS 方法如同编程世界的“基础工具箱”，它不仅帮助我们快速实现功能，更能为理解底层 DOM 机制奠定坚实基础。保持好奇，持续练习，你将在这个充满可能性的领域中不断成长。

最新发布

查看更多文章