- 寫在前面：參考嗶哩嗶哩黑馬程式員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(); });
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/148185.html
標籤：AI