(JavaScript学习记录)：jQuery 内容文本值

• 写在前面：参考哔哩哔哩黑马程序员pink老师教程 
• 地址：https://www.bilibili.com/video/BV1Sy4y1C7ha?t=41&p=4

目录

jQuery 内容文本值

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

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

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

案例：购物车案例模块-增减商品数量

案例：购物车案例模块-修改商品小计

jQuery 内容文本值

• 主要针对元素的内容还有表单的值操作。

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

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

html(''内容'') // 设置元素的内容

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

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

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

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

val() // 获取表单的值

val(''内容'') // 设置表单的值

案例：购物车案例模块-增减商品数量

分析

① 核心思路：首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。
② 注意1： 只能增加本商品的数量， 就是当前+号的兄弟文本框（itxt）的值。
③ 修改表单的值是val() 方法
④ 注意2： 这个变量初始值应该是这个文本框的值，在这个值的基础上++。要获取表单的值
⑤ 减号（decrement）思路同理，但是如果文本框的值是1，就不能再减了。

// 3. 增减商品数量模块 
//首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。
$(".increment").click(function() {
    // 得到当前兄弟文本框的值
    var n = $(this).siblings(".itxt").val();
    // console.log(n);
    n++;
    $(this).siblings(".itxt").val(n);
}
$(".decrement").click(function() {
    // 得到当前兄弟文本框的值
    var n = $(this).siblings(".itxt").val();
    if (n == 1) {
        return false;
    }
    // console.log(n);
    n--;
    $(this).siblings(".itxt").val(n);
}

案例：购物车案例模块-修改商品小计

分析

① 核心思路：每次点击+号或者-号，根据文本框的值 乘以 当前商品的价格 就是 商品的小计
② 注意1： 只能增加本商品的小计， 就是当前商品的小计模块（p-sum） 
③ 修改普通元素的内容是text() 方法
④ 注意2： 当前商品的价格，要把￥符号去掉再相乘 截取字符串 substr(1)
⑤ parents(‘选择器’) 可以返回指定祖先元素 
⑥ 最后计算的结果如果想要保留2位小数 通过 toFixed(2) 方法
⑦ 用户也可以直接修改表单里面的值，同样要计算小计。 用表单change事件
⑧ 用最新的表单内的值 乘以 单价即可 但是还是当前商品小计

//首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。
$(".increment").click(function() {
    // 得到当前兄弟文本框的值
    var n = $(this).siblings(".itxt").val();
    // console.log(n);
    n++;
    $(this).siblings(".itxt").val(n);
    // 3. 计算小计模块 根据文本框的值 乘以 当前商品的价格  就是 商品的小计
    // 当前商品的价格 p  
    var p = $(this).parents(".p-num").siblings(".p-price").html();
    // console.log(p);
    p = p.substr(1);
    console.log(p);
    var price = (p * n).toFixed(2);
    // 小计模块 
    // toFixed(2) 可以让我们保留2位小数
    $(this).parents(".p-num").siblings(".p-sum").html("￥" + price);
    getSum();
});
$(".decrement").click(function() {
    // 得到当前兄弟文本框的值
    var n = $(this).siblings(".itxt").val();
    if (n == 1) {
        return false;
    }
    // console.log(n);
    n--;
    $(this).siblings(".itxt").val(n);
    // var p = $(this).parent().parent().siblings(".p-price").html();
    // parents(".p-num") 返回指定的祖先元素
    var p = $(this).parents(".p-num").siblings(".p-price").html();
    // console.log(p);
    p = p.substr(1);
    console.log(p);
    // 小计模块 
    $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
    getSum();
});
//  4. 用户修改文本框的值 计算 小计模块  
$(".itxt").change(function() {
    // 先得到文本框的里面的值 乘以 当前商品的单价 
    var n = $(this).val();
    // 当前商品的单价
    var p = $(this).parents(".p-num").siblings(".p-price").html();
    // console.log(p);
    p = p.substr(1);
    $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
    getSum();
});