jQuery 属性操作

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

所谓元素固有属性就是元素本身自带的属性，比如元素里面的 href ，比如元素里面的 type。

获取属性语法
prop(''属性'')
设置属性语法
prop(''属性'', ''属性值'')

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

用户自己给元素添加的属性，我们称为自定义属性。比如给 div 添加 index =“1”。

获取属性语法
attr(''属性'') // 类似原生 getAttribute()
设置属性语法
attr(''属性'', ''属性值'') // 类似原生 setAttribute()
此方法也可以获取 H5 自定义属性

数据缓存 data()

data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。

附加数据语法

data(''name'',''value'') // 向被选元素附加数据

获取数据语法

date(''name'') // 向被选元素获取数据

同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型

    
        
        
        Document        都挺好        
    
     我是div
    
    123

案例：购物车案例模块-全选

分析

① 全选思路：里面3个小的复选框按钮（j-checkbox）选中状态（checked）跟着全选按钮（checkall）走。② 因为checked 是复选框的固有属性，此时我们需要利用prop()方法获取和设置该属性。③ 把全选按钮状态赋值给3小复选框就可以了。④ 当我们每次点击小的复选框按钮，就来判断：⑤ 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。⑥ :checked 选择器 :checked 查找被选中的表单元素。

// 1. 全选 全不选功能模块// 就是把全选按钮（checkall）的状态赋值给 三个小的按钮（j-checkbox）就可以了// 事件可以使用change$(".checkall").change(function() {    // console.log($(this).prop("checked"));    $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));    if ($(this).prop("checked")) {        // 让所有的商品添加 check-cart-item 类名        $(".cart-item").addClass("check-cart-item");    } else {        // check-cart-item 移除        $(".cart-item").removeClass("check-cart-item");    }});// 2. 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。$(".j-checkbox").change(function() {    // if(被选中的小的复选框的个数 === 3) {    //     就要选中全选按钮    // } else {    //     不要选中全选按钮    // }    // console.log($(".j-checkbox:checked").length);    // $(".j-checkbox").length 这个是所有的小复选框的个数    if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {        $(".checkall").prop("checked", true);    } else {        $(".checkall").prop("checked", false);    }

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

你可能感兴趣的文章