异常教程

jQuery 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+ 小伙伴加入学习 ，欢迎点击围观

属性操作基础：理解元素的“基因密码”

在网页开发中，每个 HTML 元素都携带独特的属性信息，如同生物体的基因序列。jQuery 的核心功能之一便是通过简洁的语法，帮助开发者快速读取、修改这些属性值，实现动态页面交互。

属性与元素的关系：家具的“身份标签”

想象 HTML 元素就像房间里的家具：按钮是沙发，输入框是书桌，图片是装饰画。每个家具都有自己的属性：沙发的“颜色”、书桌的“材质”、装饰画的“尺寸”。在 jQuery 中，这些属性值通过特定方法进行操作。

核心方法：attr() 与 prop() 的角色分工

jQuery 提供了两种主要方法处理属性：

  • attr()：操作元素的原始 HTML 属性，适用于静态定义的属性值
  • prop()：获取或设置当前元素的动态属性状态，常用于表单元素的布尔值属性
方法名适用场景典型属性示例
attr()HTML 属性href, src, title
prop()DOM 属性checked, disabled, selected

基础操作示例

// 获取元素的 href 属性（静态值）
var linkUrl = $("a").attr("href");

// 设置元素的 title 属性（静态值）
$("img").attr("title", "图片说明");

// 获取复选框的当前选中状态（动态值）
var isChecked = $("#checkbox").prop("checked");

// 禁用提交按钮（动态状态修改）
$("#submit-btn").prop("disabled", true);

进阶属性操作：超越基础的技巧

属性选择器：精准定位元素的“特征搜索”

jQuery 的选择器语法允许通过属性值直接定位元素，如同在图书馆通过书脊标签快速找到书籍：

// 选择所有带有 data-tooltip 属性的元素
$("[data-tooltip]")

// 精确匹配 href 属性值为 "/about" 的链接
$("a[href='/about']")

// 匹配 title 包含 "Warning" 的元素
$("[title*='Warning']")

动态属性管理：元素状态的“实时监控”

当元素状态随用户交互改变时（如表单输入），prop() 方法能提供更精准的控制：

// 监听复选框状态变化
$("#newsletter").on("change", function() {
    var isSubscribed = $(this).prop("checked");
    if (isSubscribed) {
        $(".subscription-info").prop("hidden", false);
    }
});

特殊属性类型：文本与内容的控制艺术

内容属性的三重门：text()、html()、val()

虽然不直接属于 HTML 属性，但这些方法常用于操作元素内容：

  • text()：获取/设置文本内容，自动转义 HTML 标签
  • html()：直接操作元素的 HTML 内容
  • val()：表单元素的值控制（同时兼容属性与状态）
// 安全显示用户输入的文本（自动转义 <script> 标签）
$("#output").text(userInput);

// 直接插入 HTML 内容（需确保内容安全）
$("#content").html("<p>欢迎访问</p>");

// 表单值的双向绑定
$("#username").val(); // 获取当前值
$("#password").val("default123"); // 设置初始值

表单属性的深度解析

对于表单元素，属性操作需要特别关注：

// 选中复选框（prop 更可靠）
$("#agree").prop("checked", true);

// 禁用提交按钮（直接影响表单提交）
$("#submit").prop("disabled", true);

// 设置默认选中的选项
$("option[value='beijing']").prop("selected", true);

数据属性与自定义特征：扩展元素的“隐藏能力”

HTML5 引入的 data-* 属性允许开发者为元素附加任意自定义数据，jQuery 的 data() 方法提供便捷操作：

// 定义数据属性
<div id="card" data-price="299" data-color="red"></div>

// 读取数据属性
var price = $("#card").data("price"); // 299（自动转换为数字）

// 动态设置数据属性
$("#card").data("stock", 15); // 后续可直接调用 .data("stock")

数据缓存机制：元素的“记忆功能”

jQuery 的 data() 方法会自动维护一个数据缓存对象，确保数据持久化：

$("#product").data({
    name: "智能手表",
    features: ["心率监测", "防水设计"],
    price: 899
});

// 后续访问
console.log($("#product").data("features")); // ["心率监测", "防水设计"]

实战案例：构建动态表单验证系统

案例需求

创建包含以下验证规则的表单：

  1. 用户名必须为 3-16 位字符
  2. 邮箱格式验证
  3. 密码与确认密码一致性
  4. 自动显示错误提示

实现代码

// 表单提交拦截
$("#register-form").on("submit", function(e) {
    e.preventDefault();
    
    validateForm();
});

function validateForm() {
    let isValid = true;
    
    // 用户名验证
    const username = $("#username").val().trim();
    if (!/^[a-zA-Z0-9]{3,16}$/.test(username)) {
        showError($("#username"), "用户名需3-16位字符");
        isValid = false;
    } else {
        hideError($("#username"));
    }
    
    // 邮箱验证
    const email = $("#email").val().trim();
    if (!/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/.test(email)) {
        showError($("#email"), "邮箱格式不正确");
        isValid = false;
    }
    
    // 密码一致性验证
    const password = $("#password").val();
    const confirmPassword = $("#confirm-password").val();
    if (password !== confirmPassword) {
        showError($("#confirm-password"), "两次输入不一致");
        isValid = false;
    }
    
    if (isValid) {
        $("#submit-btn").prop("disabled", true);
        // 提交表单逻辑
    }
}

function showError(element, message) {
    element
        .prop("style", "border-color: red") // 动态修改样式属性
        .next(".error").text(message).show();
}

function hideError(element) {
    element
        .prop("style", "") // 清除样式属性
        .next(".error").hide();
}

事件与属性的协同：交互系统的“神经网络”

状态驱动交互：prop() 在事件处理中的应用

// 禁用/启用按钮的联动效果
$("#toggle").on("click", function() {
    $("#main-btn").prop("disabled", !$(this).prop("checked"));
});

// 输入框内容变化时更新提示
$("#search").on("input", function() {
    $("#suggestion").prop("hidden", $(this).val().length < 3);
});

动态加载内容时的属性管理

// 异步加载图片并设置属性
$.get("api/image", function(data) {
    $("<img>")
        .attr("src", data.url)
        .prop("width", data.width)
        .prop("height", data.height)
        .data("id", data.id)
        .appendTo("#gallery");
});

性能优化与注意事项：属性操作的“黄金法则”

避免重复查询属性值

// 低效写法（多次查询 DOM）
$("#product").attr("data-price") * $("#product").attr("quantity");

// 优化写法（缓存到变量）
const $product = $("#product");
const price = $product.attr("data-price");
const quantity = $product.attr("quantity");
const total = price * quantity;

属性与 CSS 样式的区别

// 错误用法（试图用属性操作样式）
$("#box").attr("background-color", "#ff0000"); // 无效

// 正确方式（使用 CSS 方法）
$("#box").css("background-color", "#ff0000");

特殊字符处理：属性值的编码问题

当属性值包含特殊字符时，建议使用 prop() 的替代方案：

// 正确做法
$("#link").prop("href", "https://example.com?query=" + encodeURIComponent(searchTerm));

结论：掌握属性操作，掌控网页交互

jQuery 属性操作是构建动态网页的核心能力，它如同赋予开发者“读写 HTML 的超能力”。通过合理使用 attr()、prop() 等方法，开发者可以精确控制元素特征，实现从简单表单验证到复杂交互系统的各种需求。随着对 jQuery 属性体系的深入理解，开发者不仅能提升代码效率，更能创造出更符合用户直觉的网页体验。

在实际开发中，建议通过以下方式持续提升属性操作技能：

  1. 维护属性操作笔记，记录常见 HTML 元素的属性特征
  2. 通过浏览器开发者工具实时观察属性变化
  3. 参与开源项目实践高级属性应用场景
  4. 定期查阅官方文档保持知识更新

掌握 jQuery 属性不仅是技术能力的提升，更是理解网页构成逻辑的关键。当开发者能够自由操控元素属性时，便掌握了构建现代交互式网页的重要基石。

最新发布

查看更多文章