博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
(JavaScript学习记录):jQuery 属性操作
阅读量:349 次
发布时间:2019-03-04

本文共 1768 字,大约阅读时间需要 5 分钟。

  • 写在前面:参考哔哩哔哩黑马程序员pink老师教程 
  • 地址:

目录

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/

你可能感兴趣的文章