本文共 1768 字,大约阅读时间需要 5 分钟。
目录
- 所谓元素固有属性就是元素本身自带的属性,比如 元素里面的 href ,比如 元素里面的 type。
- 获取属性语法
prop(''属性'')
- 设置属性语法
prop(''属性'', ''属性值'')
- 用户自己给元素添加的属性,我们称为自定义属性。 比如给 div 添加 index =“1”。
- 获取属性语法
attr(''属性'') // 类似原生 getAttribute()
- 设置属性语法
attr(''属性'', ''属性值'') // 类似原生 setAttribute()
- 此方法也可以获取 H5 自定义属性
- data() 方法可以在指定的元素上存取数据,并不会修改 DOM 元素结构。一旦页面刷新,之前存放的数据都将被移除。
- 附加数据语法
data(''name'',''value'') // 向被选元素附加数据
- 获取数据语法
date(''name'') // 向被选元素获取数据
- 同时,还可以读取 HTML5 自定义属性 data-index ,得到的是数字型
Document 都挺好我是div123
分析
① 全选思路:里面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/