(JavaScript学习记录)：jQuery 属性操作-白红宇

(JavaScript学习记录)：jQuery 属性操作

阅读量：355 次

发布时间：2019-03-04

本文共 1255 字，大约阅读时间需要 4 分钟。

jQuery 属性操作

设置或获取元素固有属性值 `prop()`

元素固有属性是元素自带的属性，例如 <a> 元素中的 href，<input> 元素中的 type。

要获取属性，可以使用 prop() 方法：

prop('属性名')

要设置属性，可以使用：

prop('属性名', '属性值')

设置或获取元素自定义属性值 `attr()`

自定义属性是用户为元素添加的属性，例如为 <div> 添加 index="1"。

获取属性使用：

attr('属性名')

设置属性使用：

attr('属性名', '属性值')

此方法也可以获取 H5 自定义属性 data-index，返回的是数字型。

数据缓存 `data()`

data() 方法用于在元素上存取数据，并不会修改 DOM 结构。一旦页面刷新，数据会被移除。

附加数据语法：

data('name', 'value')

获取数据语法：

data('name')

注意：data() 还可以读取 H5 自定义属性 data-index，返回的是数字型。

购物车案例模块-全选

工作流程

全选按钮的状态决定三个小复选框的状态。

使用 prop() 方法获取和设置 checked 属性。

当小复选框被选中时，判断选中数量是否等于 3，决定全选按钮的状态。

实现代码

$(function() {    // 全选按钮状态更新    $(".checkall").change(function() {        $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));        if ($(this).prop("checked")) {            $(".cart-item").addClass("check-cart-item");        } else {            $(".cart-item").removeClass("check-cart-item");        }    });    // 小复选框状态更新    $(".j-checkbox").change(function() {        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {            $(".checkall").prop("checked", true);        } else {            $(".checkall").prop("checked", false);        }    });});

总结

本文详细介绍了 jQuery 中的属性操作方法，包括 prop()、attr() 和 data()。通过实际案例展示了如何在购物车模块中实现全选功能。这些方法能够帮助开发人员高效处理元素属性和数据存取问题。

转载地址：http://pgur.baihongyu.com/

你可能感兴趣的文章

Openlayers高级交互（6/20）：绘制某点，判断它是否在一个电子围栏内