zoukankan      html  css  js  c++  java
  • jQuery 属性操作

    1.jQuery 属性操作

    ​ jQuery 常用属性操作有三种:prop() / attr() / data() ;

    1.1 元素固有属性值 prop()

    ​ 所谓元素固有属性就是元素本身自带的属性,比如 <a> 元素里面的 href ,比如 <input> 元素里面的 type。

    语法

    1. 获取属性语法

    prop(''属性'') 

    2. 设置属性语法

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

    注意:prop() 除了普通属性操作,更适合操作表单属性:disabled / checked / selected 等。

    1.2 元素自定义属性值 attr()

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

    语法

    1. 获取属性语法

    attr(''属性'')      // 类似原生 getAttribute() 

    2. 设置属性语法

    attr(''属性'', ''属性值'')   // 类似原生 setAttribute() 

    注意:attr() 除了普通属性操作,更适合操作自定义属性。(该方法也可以获取 H5 自定义属性)

    1.3 数据缓存 data()

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

    语法

     1. 附加数据语法

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

    2. 获取数据语法

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

    注意:同时,还可以读取 HTML5 自定义属性  data-index ,得到的是数字型。

    演示代码

    <body>
        <a href="http://www.itcast.cn" title="都挺好">都挺好</a>
        <input type="checkbox" name="" id="" checked>
        <div index="1" data-index="2">我是div</div>
        <span>123</span>
        <script>
            $(function() {
                //1. element.prop("属性名") 获取元素固有的属性值
                console.log($("a").prop("href"));
                $("a").prop("title", "我们都挺好");
                $("input").change(function() {
                    console.log($(this).prop("checked"));
                });
                // console.log($("div").prop("index"));
                // 2. 元素的自定义属性 我们通过 attr()
                console.log($("div").attr("index"));
                $("div").attr("index", 4);
                console.log($("div").attr("data-index"));
                // 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面
                $("span").data("uname", "andy");
                console.log($("span").data("uname"));
                // 这个方法获取data-index h5自定义属性 第一个 不用写data-  而且返回的是数字型
                console.log($("div").data("index"));
            })
        </script>
    </body>

    1.4 案例:购物车案例模块-全选

    1.全选思路:里面3个小的复选框按钮(j-checkbox)选中状态(checked)跟着全选按钮(checkall)走。

    2.因为checked 是复选框的固有属性,此时我们需要利用prop()方法获取和设置该属性。

    3.把全选按钮状态赋值给3小复选框就可以了。

    4.当我们每次点击小的复选框按钮,就来判断:

    5.如果小复选框被选中的个数等于3 就应该把全选按钮选上,否则全选按钮不选。6.: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);
        }
        if ($(this).prop("checked")) {
          // 让当前的商品添加 check-cart-item 类名
          $(this).parents(".cart-item").addClass("check-cart-item");
        } else {
          // check-cart-item 移除
          $(this).parents(".cart-item").removeClass("check-cart-item");
        }
      });

     

  • 相关阅读:
    怎么往mac中finder个人收藏里添加文件夹
    UIView 动画
    添加.pch文件
    声明属性的关键字
    创建app前的环境配置/AppIcon/启动图片
    修改动画的旋转支点
    实现自定义xib和storyboard的加载,
    Quartz2D绘图 及实例:下载进度
    帧动画
    在职研究生第一单元第二单元第三单元第四单元是什么?
  • 原文地址:https://www.cnblogs.com/bky-/p/13779717.html
Copyright © 2011-2022 走看看