jQuery属性操作

最新推荐文章于 2024-04-22 15:31:17 发布

MyDreamingCode

最新推荐文章于 2024-04-22 15:31:17 发布

阅读量552

点赞数 1

分类专栏： javascript 文章标签： jquery

本文链接：https://blog.csdn.net/qq_61706112/article/details/123016328

版权

javascript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

一、获取属性

（1）获取元素固有属性值

prop('属性名')

（2）设置元素固有属性值

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

（3）获取自定义属性值

attr('属性名')

（4）设置自定义属性值

attr('属性名','属性值')

（5）数据缓存：数据存放在元素的内存里

data(‘名’,'值') -- 设定值

data('名') -- 取值

注意：还可以获取data-index中的数值用：data('index')

案例：

注意：:checked --用于查看有几个复选框被选中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    td {
      width: 100px;
      text-align: center;
    }
    .operate {
      cursor: pointer;
    }
    .operate span {
      display: inline-block;
      width: 15px;
      height: 15px;
      line-height: 15px;
      border: 1px solid #ccc;
    }
    .operate input {
      width: 40px;
      text-align: center;
    }
  </style>
</head>
<body>
  <table class="shopping" border="1">
    <thead>
      <tr>
        <td><input type="checkbox" class="allCheck">全选</td>
        <td>商品</td>
        <td>单价</td>
        <td>数量</td>
        <td>操作</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" class="singleCheck" checked></td>
        <td>小车</td>
        <td>100.00</td>
        <td class="operate">
          <span class="add">+</span>
          <input type="text" value="1">
          <span class="sub">-</span>
        </td>
        <td><a href="javascript:;">删除</a></td>
      </tr>
      <tr>
        <td><input type="checkbox" class="singleCheck"></td>
        <td>小自行车</td>
        <td>35.00</td>
        <td class="operate">
          <span class="add">+</span>
          <input type="text" value="1">
          <span class="sub">-</span>
        </td>
        <td><a href="javascript:;">删除</a></td>
      </tr>
      <tr>
        <td><input type="checkbox" class="singleCheck"></td>
        <td>滑板车</td>
        <td>300.00</td>
        <td class="operate">
          <span class="add">+</span>
          <input type="text" value="1">
          <span class="sub">-</span>
        </td>
        <td><a href="javascript:;">删除</a></td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td><input type="checkbox" name="" class="allCheck">全选</td>
        <td colspan="3"></td>
        <td>结算：</td>
      </tr>
    </tfoot>
  </table>
  <script src="./lib//jquery.min.js"></script>
  <script>
    $(function(){
        $(".allCheck").change(function() {
          $(".singleCheck,.allCheck").prop("checked",$(this).prop("checked"));
        })
        $(".singleCheck").change(function() {
          if($(".singleCheck:checked").length == $('.singleCheck').length) {
            $(".allCheck").prop("checked", true);
          }else {
            $(".allCheck").prop("checked", false);
          }
        })
    })
  </script>
</body>
</html>

2. 获取元素内容

（1）html() -- 获取或设置元素内容

（2）text() -- 获取或设置元素文本内容

（3）val() -- 获取或设置表单元素的值

MyDreamingCode

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery属性操作

一、获取属性（1）获取元素固有属性值 prop('属性名')（2）设置元素固有属性值 prop('属性名','属性值')（3）获取自定义属性值 attr('属性名')（4）设置自定义属性值 attr('属性名','属性值')（5）数据缓存：数据存放在元素的内存里 data(‘名’,'值') -- 设定值 data('名') -- 取值注意：还可...
复制链接

扫一扫