• 寫在前面：參考嗶哩嗶哩黑馬程式員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();
});