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