首页 > Web开发 > 详细

jQuery 属性,元素

时间:2020-03-20 13:14:53      阅读:55      评论:0      收藏:0      [点我收藏+]

属性操作

元素固定属性 prop()
  1. 获取固定属性
  • $("a").prop("href")

      2. 设置属性

  • $(‘a‘).prop("title", ‘我们‘)

注意:

  • prop 更加适用disabled / checked / selected 等。
自定义属性 attr()
  1. 获取自定义属性
  • $(‘div‘).attr(‘index‘)

      2. 设置自定义属性

  • $(‘span‘).attr(‘index‘, 1)
数据缓存 data()
  1. 设置数据缓存
  • $(‘span‘).data(‘uname‘, ‘peach‘)

      2. 获取数据缓存

  • $(‘span‘).data(‘uname‘)

注意:

  • data 获取html5 自定义data-index, 第一个 不用写data- , 得到的是数字型。
技术分享图片
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>

<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>
</body>
<script>

    $(function () {
        // 1.获取固定属性名
        console.log($("a").prop("href"));
        console.log($("a").prop(‘title‘));
        // 1.1 设置属性
        $(‘a‘).prop("title", ‘我们‘)

        // 1.2 prop 更加适用disabled / checked / selected 等。
        $(‘input‘).change(function () {
            console.log($(this).prop("checked"));
        })

        // 2 自定义属性
        // 2.1 获取自定义属性
        console.log($(‘div‘).attr(‘data-index‘));
        console.log($(‘div‘).attr(‘index‘));
        // 2.2 设置自定义属性
        $(‘span‘).attr(‘index‘, 1)

        // 3 数据缓存 data() 这个里面的数据是存放在元素的内存里面
        $(‘span‘).data(‘uname‘, ‘peach‘); // 设置缓存数据
        console.log($(‘span‘).data(‘uname‘));  // 获取缓存数据
        // 3.1 data 获取html5 自定义data-index, 第一个 不用写data- , 得到的是数字型。
        console.log($(‘div‘).data(‘index‘));

    })

</script>

</html>
示例代码
技术分享图片
$(function () {
    // 全选和 全不选
    // 把全选的的状态给其他商品的状态即可
    // 1. 全选
    $(‘.checkall‘).change(function () {
        // 1.1 设置其他商品的状态和全选按钮 的状态一致
        console.log($(this).prop(‘checked‘));
        $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));

        // 1.2 如果全选则 让所有的商品添加 check-cart-item 类名
        if ($(this).prop("checked")) {
            $(‘.cart-item‘).addClass("check-cart-item"); // 添加类名
        } else {
            $(".cart-item").removeClass("check-cart-item");
        }
    })

    // 2. 如果小框里面的数值等于所有数组,则选择全选
    $(‘.j-checkbox‘).change(function () {
        console.log($(".j-checkbox:checked").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");
        }
    })



})
案列-全选与全不选
文本数值

jQuery 属性,元素

原文:https://www.cnblogs.com/py-web/p/12530260.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!