(JavaScript learning record): jQuery content text value

• Written in front: refer to the tutorial of Bilibili dark horse programmer pink teacher 
• Address: https://www.bilibili.com/video/BV1Sy4y1C7ha?t=41&p=4

table of Contents

jQuery content text value

Common element content html() (equivalent to native inner HTML)

Normal element text content text() (equivalent to native innerText)

The value of the form val() (equivalent to native value)

Case: Shopping cart case module-increase or decrease the quantity of goods

Case: Shopping Cart Case Module-Modified Commodity Subtotal

jQuery content text value

• Mainly for the content of the element and the value operation of the form .

Common element content html() (equivalent to native inner HTML)

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

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

Normal element text content text() (equivalent to native innerText)

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

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

The value of the form val() (equivalent to native value)

val() // 获取表单的值

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

Case: Shopping cart case module-increase or decrease the quantity of goods

analysis

① 核心思路：首先声明一个变量，当我们点击+号（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);
}

Case: Shopping Cart Case Module-Modified Commodity Subtotal

analysis

① 核心思路：每次点击+号或者-号，根据文本框的值 乘以 当前商品的价格 就是 商品的小计
② 注意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();
});