前端学习笔记-jQuery-jQuery属性操作/内容文本值

jQuery属性操作

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

所谓元素固有属性就是元素本身自带的属性，比如元素里面的href，比如元素里面的type。

1.获取属性

prop（"属性"）

2.设置属性

prop（"属性"，"属性值"）

 

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

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

1.获取属性

attr（"属性"） // 类似原生 getAttribute()

2.设置属性

attr（"属性"，"属性值"）  // 类似原生 setAttribute()

该方法也可以获取H5自定义属性

 

数据缓存 data()

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

1.附加数据语法

data（"name","value"） // 向被选元素附加数据

2.获取数据语法

data（"name"）  // 向被选元素获取数据

同时，该方法也可以获取H5自定义属性 data-index ，得到的是数字型

    都挺好
    
    
我是div
    123
    

 

jQuery内容文本值

 

普通元素内容html() （相当于原生inner HTML）

html()   //获取元素的内容

hmtl("内容")      // 设置元素的内容

 

普通元素文本内容text()  (相当于原生innerText)

text()       // 获取元素的文本内容

text("文本内容")    //设置元素的文本内容

 

表单的值val()  （相当于原生value）

val()   //获取文本框中的值

val("内容")   //设置文本框中的值

 

案例：购物车

HTML核心部分：

全部商品

全选

商品

单价

数量

小计

操作

【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲

￥12.60

- +

￥12.60

删除

【2000张贴纸】贴纸书 3-6岁 贴画儿童 贴画书全套12册 贴画 贴纸儿童 汽

￥24.80

- +

￥24.80

删除

唐诗三百首+成语故事全2册 一年级课外书 精装注音儿童版 小学生二三年级课外阅读书籍

￥29.80

- +

￥29.80

删除

全选

删除选中的商品 清理购物车

已经选1件商品

总价： ￥12.60

去结算

 

JS部分：

$(function () {
    //选中/全选模块
    // 1. 当全选框 checkall 选中的时候 所有的 j-checkbox都要选中
    $(".checkall").change(function () {
        $(".j-checkbox,.checkall").prop("checked", $(this).prop("checked"));
        // 当全选框 checkall 选中的时候 给所有的 cart-item添加check-cart-item 类
        if ($(".checkall").prop("checked")) {
            $(".cart-item").addClass("check-cart-item");
        } else {
            $(".cart-item").removeClass("check-cart-item");
        }
    });
    // 2.当 j-checkbox都选中时， checkall 也要选中
    $(".j-checkbox").change(function () {
        // ：checked 可以返回当前被选中元素的信息
        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }
        // 当全选框j-checkbox 选中的时候 给对应的 cart-item添加check-cart-item 类
        if ($(this).prop("checked")) {
            $(this).parents(".cart-item").addClass("check-cart-item");
        } else {
            $(this).parents(".cart-item").removeClass("check-cart-item");
        }
    });

    // 通过+ - 按钮增减商品数量模块
    // 3.当点击 + 号，increment 的兄弟 itxt 标签的值 应该要再原来的基础上加一
    $(".increment").click(function () {
        // 获取到 itxt 标签的初始值
        var n = $(this).siblings(".itxt").val();  // 商品数量
        n++;
        $(this).siblings(".itxt").val(n);
        // 小计模块
        // 5.小计（p-sum）=当前商品单价(p-price) * 商品数量 （itxt）
        // parents()方法 返回祖先元素
        var p = $(this).parents(".p-num").siblings(".p-price").text().substr(1);  // 商品单价
        // toFixed()方法 保留指定小数位
        var price = (p * n).toFixed(2);  // 商品总价
        $(this).parents(".p-num").siblings(".p-sum").text("￥" + price);
        getSum();
    });
    // 4.当点击 - 号，decrement 的兄弟 itxt 标签的值 应该要再原来的基础上减一 注意 减到1 就不能再减了
    $(".decrement").click(function () {
        // 获取到 itxt 标签的初始值
        var n = $(this).siblings(".itxt").val();
        if (n == 1) {
            return false;
        }
        n--;
        $(this).siblings(".itxt").val(n);
        // 6.小计（p-sum）=当前商品单价(p-price) * 商品数量 （itxt）
        var p = $(this).parents(".p-num").siblings(".p-price").text().substr(1);
        // toFixed()方法 保留指定小数位
        var price = (p * n).toFixed(2);
        $(this).parents(".p-num").siblings(".p-sum").text("￥" + price);
        getSum();
    });
    // 7.通过直接在文本框输入增减商品数量模块
    $(".itxt").change(function () {
        var n = $(this).val();
        var p = $(this).parents(".p-num").siblings(".p-price").text().substr(1);
        // toFixed()方法 保留指定小数位
        var price = (p * n).toFixed(2);
        $(this).parents(".p-num").siblings(".p-sum").text("￥" + price);
        getSum();
    });
    getSum();

    // 8.计算总计、总额模块
    function getSum() {
        var count = 0;  // 总件数
        var money = 0;  // 总金额
        // 把所有的 itxt 的内容相加 然后赋值给 amount-sum 里面的 em
        $(".itxt").each(function (i, ele) {
            count += parseInt($(ele).val());
            $(".amount-sum em").text(count);
        });
        // 把所有p-sum 的的内容相加 然后赋值给 price-sum 里面的 em
        $(".p-sum").each(function (i, ele) {
            money += parseFloat($(ele).text().substr(1));
            $(".price-sum em").text("￥" + money.toFixed(2));
        })
    }

    // 9.删除模块  注意 每次执行完删除 记得 重新计算价格！！
    // 每个商品后面对应的删除按钮
    $(".p-action a").click(function () {
        $(this).parents(".cart-item").remove();
        getSum();
    });
    // 点击 删除选中的商品 后删除   需要先拿到被选中的商品 ：checked
    $(".remove-batch").click(function () {
        $(".j-checkbox:checked").parents(".cart-item").remove();
        getSum();
    });
    // 点击 清空购物车 然后删除
    $(".clear-all").click(function () {
        $(".cart-item").remove();
        getSum();
    })
});