首页 前端知识 jQuery常用API--属性操作

jQuery常用API--属性操作

2024-03-06 09:03:10 前端知识 前端哥 256 772 我要收藏

1. 设置或获取元素固有属性值 prop()

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

1.1 获取属性语法

element.prop('属性')

1.2 设置属性语法

element.prop('属性’, '属性值')

1.3 代码体验

<!-- 引入 jQuery 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<body>
    <!-- HTML结构 -->
    <a href="https://www.baidu.com">跳转至百度</a>
    <!-- js 代码 -->
    <script>
        // 1. element.prop('属性')  获取当前属性的属性值
        console.log($('a').prop('href')); // https://www.baidu.com/
        // 2. element.prop('属性','属性值')  设置当前属性的属性值
        $('a').prop('title', '开心就好'); // 设置鼠标移入出现的文字说明
    </script>
</body>

 由于给<a>标签设置了固有属性title的值,所以鼠标移入后会出现下图效果:

2. 设置或获取元素自定义属性值 attr()

用户自己给元素添加的属性,称之为自定义属性。比如给div 添加index ="2"

2.1 获取属性语法

element.attr("属性")     // 类似原生JS 中的 getAttribute()

2.2 设置属性语法

element.attr("属性", "属性值")    // 类似原生JS 中的 setAttribute() 

2.3 代码体验 

<!-- 引入 jQuery 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<body>
    <!-- HTML结构 -->
    <div index="2" data-index="4"></div>
    <a href="122"></a>
    <!-- js 代码 -->
    <script>
        // 注意:prop()无法获取到自定义属性的值
        console.log($('div').prop('index')); // undefined
        // 1. element.attr('属性')  获取当前自定义属性的属性值
        console.log($('div').attr('index')); // 2
        // 2. element.attr('属性','属性值')  设置当前自定义属性的属性值
        $('div').attr('index', '8');
        // 3. attr()方法可以获取固有属性
        console.log($('a').attr('href')); // 122
        // 4. attr() 方法也可以获取H5自定义属性 data-xxx
        console.log($('div').attr('data-index'));  // 4
    </script>
</body>

在利用attr("属性", "属性值") 重新设置了index的值后,可以在调试器中看到下图效果:

注意:自定义属性的值无法使用prop()获取,而要使用attr(). 但是attr()不仅可以获取自定义属性也可以获取固有属性,但是我们一般获取固有属性还是使用prop()。attr()还可以获取H5自定义属性,即data-xxx的属性值。

3. 数据缓存 data()

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

3.1 附加数据语法

element.data("name" , "value")     // 给元素附加数据

3.2 获取数据语法

element.data("name")    // 从元素中获取数据 

3.3 代码体验 

<!-- 引入 jQuery 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<body>
    <!-- HTML结构 -->
    <div index="2" data-index="4"></div>
    <span></span>
    <!-- js 代码 -->
    <script>
        // 1. 缓存数据到span元素中
        $('span').data("uname", "cindy");
        // 2. 获取缓存数据
        console.log($('span').data("uname"));
        // 3. 这个方法还可以获取H5自定义属性,而且不需要写data-,并且得到的是数字型
        console.log($('div').data('index'));  // 获得data-index的值--4
    </script>
</body>

注意:

①  data()是给指定元素缓存数据,但是不修改DOM元素结构;

②  data()方法 还可以获取H5自定义属性data-index的,并且不需要写data- , 且得到的结果是数字型,使用attr()方法得到的 data-index的值是字符串型

4.案例-购物车全选功能

需求:

①  勾上全选则所有商品信息前的复选框勾上,取消全选,所有商品信息前的复选框也相应的取消选中;

② 如果所有商品信息前的复选框都勾上了,则全选按钮勾上,否则全选按钮不勾上

<!-- 引入 jQuery 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<!-- css样式 -->
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .flex {
        display: flex;
    }
    .container {
        width: 1200px;
        margin: 100px auto;
        font-size: 14px;
    }
    /* 顶部title样式 */
    .title {
        padding: 0 10px;
        margin-bottom: 15px;
        height: 50px;
        line-height: 50px;
        background-color: #f0f3f0;
        border: 1px solid #ccc;
    }
    .title .commodity {
        margin: 0 450px 0 100px;
    }
    .title .num {
        margin: 0 126px;
    }
    .title .operate {
        margin-left: 93px;
    }
    /* 商品详情样式 */ 
    .item {
        padding: 20px 10px 50px;
        margin-top: -2px;
        color: #333;
        border-top: 2px solid #ccc;
        border-bottom: 2px solid #ccc;
    }
    .product {
        width: 370px;
        margin: 0 200px 0 30px;
    }
    
    .product img {
        float: left;
        vertical-align: top;
        padding: 5px;
        margin: 0 10px;
        border: 1px solid #ccc;
    }
    .count {
        margin: 0 80px;
    }
    .count div {
        width: 20px;
        height: 20px;
        text-align: center;
        border: 1px solid #ccc;
    }
    .count input {
        width: 50px;
        height: 20px;
        text-align: center;
        outline: none;
        border: none;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }
    .total {
        margin-right: 80px;
    }
    .delete a {
        color: #333;
        text-decoration: none;
    }
    .delete a:hover {
        color: #369;
        text-decoration: underline;
    }
    /* 底部结算样式 */
    .bottom {
        padding-left: 10px;
        margin-top: 15px;
        height: 50px;
        line-height: 50px;
        border: 1px solid #ccc;
    }
    .bottom .left {
        float: left;
    }
    .bottom .right {
        float: right;
    }
    
    .bottom .checked {
        margin: 0 30px 0 50px;
    }
    .right .check_num {
        color: #F15343;
        padding: 0 5px;
    }
    .right strong {
        color: #F15343;
        font-size: 18px;
    }
    .right .btn {
        margin-left: 8px;
        width: 100px;
        height: 50px;
        border: none;
        color: #fff;
        font-size: 18px;
        background-color: #F15343;
    }
</style>
    <!-- HTML结构 -->
    <div class="container">
        <!-- 顶部菜单信息 -->
        <div class="title">
            <input type="checkbox" name="" class="checkAll"> 全选
            <span class="commodity">商品</span>
            <span>单价</span>
            <span class="num">数量</span>
            <span>小计</span>
            <span class="operate">操作</span>
        </div>
        <!-- 商品详细信息 -->
        <div class="item flex">
            <input type="checkbox" class="product_check">
            <div class="product">
                <img src="./img/p1.jpg" alt="">
                <span>【5本32.9元】经典儿童文学彩图青少年版八十天环游地球中学生语文教学大纲</span>
            </div>
            <div class="price">¥12.60元</div>
            <div class="count flex">
                <div>-</div>
                <input type="text" value="1">
                <div>+</div>
            </div>
            <div class="total">¥12.60元</div>
            <div class="delete">
                <a href="javascript:;">删除</a>
            </div>
        </div>
        <div class="item flex">
            <input type="checkbox" class="product_check">
            <div class="product">
                <img src="./img/p2.jpg" alt="">
                <span>【2000张贴纸】贴纸书 3-6岁 贴画儿童 贴画书全套12册 贴画 贴纸儿童</span>
            </div>
            <div class="price">¥25.90元</div>
            <div class="count flex">
                <div>-</div>
                <input type="text" value="1">
                <div>+</div>
            </div>
            <div class="total">¥25.90元</div>
            <div class="delete">
                <a href="javascript:;">删除</a>
            </div>
        </div>
        <div class="item flex">
            <input type="checkbox" class="product_check">
            <div class="product">
                <img src="./img/p3.jpg" alt="">
                <span>唐诗三百首+成语故事全2册 一年级课外书 精装注音儿童版 小学生二三年级课外阅读书籍</span>
            </div>
            <div class="price">¥29.90元</div>
            <div class="count flex">
                <div>-</div>
                <input type="text" value="1">
                <div>+</div>
            </div>
            <div class="total">¥29.90元</div>
            <div class="delete">
                <a href="javascript:;">删除</a>
            </div>
        </div>
        <!-- 底部结算信息 -->
        <div class="bottom">
            <div class="left">
                <input type="checkbox" name="" class="checkAll"> 全选
                <span class="checked">删除选中的商品</span>
                <span class="clear">清理购物车</span>
            </div>
            <div class="right">
                <span>已经选<span class="check_num">1</span>件商品</span>
                <span>总价:<strong>¥12.60</strong></span>
                <button class="btn">去结算</button>
            </div>
        </div>
    </div>
    <!-- js 代码 -->
    <script>
        $(function() {
            // 1. 全选  全不选功能模块
            // 就是把全选按钮(checked)的状态赋值给 三个商品复选框(.product_check)就可以了
            // 可以使用change事件
            $(".checkAll").change(function() {
                // (1) 获取全选按钮的选中状态checked的值
                let flag = $(this).prop("checked");
            // (2) 把全选按钮checked的值,赋值给三个商品复选框以及另一个全选按钮的属性checked
                $(".product_check,.checkAll").prop("checked", flag);
            });
            // 2. 商品复选框的选中状态反过来影响全选按钮
            // (1) 给每个商品复选框绑定一个change事件
            $(".product_check").change(function() {
             // (2) 如果被选中的商品复选框个数等于商品复选框个数,则选中全选按钮,否则不选中
                if ($(".product_check:checked").length === $(".product_check").length) {
                    $(".checkAll").prop("checked", true);
                } else {
                    $(".checkAll").prop("checked", false);
                }
            })
        })
    </script>
</body>

案例分析:

① 全选功能思路:里面3个商品信息复选框按钮的选中状态,是与全选按钮保持一致

② 因为选中状态checked 是复选框的固有属性,所以需要利用prop() 方法来获取和设置

③ 把全选按钮选中状态值赋值给3个商品复选框就可以了;

④ 反过来实现全选按钮选中状态思路:当我们每次点击商品信息复选框时,就进行判断

⑤ 如果商品信息复选框被选中的个数等于3(也就是商品复选框本身个数)时,就把全选按钮选上,否则不选上

:checked 选择器,可以用于查找被选中的表单元素

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3324.html
标签
评论
发布的文章

JQuery简介与解析

2024-03-01 12:03:31

在Vue 3项目中使用 echarts

2024-03-29 15:03:05

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!