- 写在前面：参考哔哩哔哩黑马程序员pink老师教程
- 地址：https://www.bilibili.com/video/BV1Sy4y1C7ha?t=41&p=4
目录
普通元素内容 html()（ 相当于原生inner HTML)
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(); });
来源：oschina
链接：https://my.oschina.net/u/4258325/blog/4658635