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

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

    一、元素固有属性值 prop()

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

    语法

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

    二、 元素自定义属性值 attr()

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

    语法

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

    三、数据缓存 data()

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

    语法

    注意:同时,还可以读取 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.全选思路:里面3个小的复选框按钮(j-checkbox)选中状态(checked)跟着全选按钮(checkall)走。

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

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

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

    5.如果小复选框被选中的个数等于3 就应该把全选按钮选上,否则全选按钮不选。

    6.:checked 选择器 :checked 查找被选中的表单元素。

     

     // 全选按钮改变状态,小复选框跟着改变
       $(".checkall").change(function () {
           // console.log($(this).prop("checked"));
           $(".j-checkbox,.checkall").prop("checked", $(this).prop('checked'));
      });
       $(".j-checkbox").change(function () {
           // 每次改变小复选框状态都要判断小复选框是否全被选中
           // 如果小复选框选中的个数等于所有小复选框个数,则选中全选按钮 否则不选中
           // .j-checkbox:checked 选中的复选框
           if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
               $(".checkall").prop("checked", true);
          } else {
               $(".checkall").prop("checked", false);
          }
      })

     

    星辰ꦿ.大海
  • 相关阅读:
    哲理故事
    ajaxToolkit发布之后出错!说未能加载文件或程序集!
    一个沉重的教训!!!
    ValidatorCallout真的是太酷了!
    GridView放在UpdatePanle里面模板列取值!
    Prototype学习笔记之-Ajax.Request
    数据分类重排!
    SQL SERVER 2005 sa登录失败!
    flex应该学到什么程度
    jquery dataTable的学习
  • 原文地址:https://www.cnblogs.com/xc-dh/p/13771906.html
Copyright © 2011-2022 走看看