216 jQuery 文本属性值：html() 、text() 、 val()
donghongbz 2020-01-17
jQuery的文本属性值常见操作有三种：html() 、text() 、 val() ，分别对应JS中的 innerHTML 、innerText 和 value 属性。
1.2.1 jQuery内容文本值
? 常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性，主要针对元素的内容还有表单的值操作。
语法
? 注意：html() 可识别标签，text() 不识别标签。
演示代码
<body>
<div>
<span>我是内容</span>
</div>
<input type="text" value="请输入内容">
<script>
// 1. 获取设置元素内容 html()
console.log($("div").html());
// $("div").html("123");
// 2. 获取设置元素文本内容 text()
console.log($("div").text());
$("div").text("123");
// 3. 获取设置表单值 val()
console.log($("input").val());
$("input").val("123");
</script>
</body>1.2.2 案例：购物车案例模块-增减商品数量
1.核心思路：首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。
2.注意1： 只能增加本商品的数量， 就是当前+号的兄弟文本框（itxt）的值。
3.修改表单的值是val() 方法
4.注意2： 这个变量初始值应该是这个文本框的值，在这个值的基础上++。要获取表单的值
5.减号（decrement）思路同理，但是如果文本框的值是1，就不能再减了。
? 代码实现略。(详情参考源代码)
--
1.2.3. 案例：购物车案例模块-修改商品小计
1.核心思路：每次点击+号或者-号，根据文本框的值 乘以 当前商品的价格 就是 商品的小计
2.注意1： 只能增加本商品的小计， 就是当前商品的小计模块（p-sum）
3.修改普通元素的内容是text() 方法
4.注意2： 当前商品的价格，要把￥符号去掉再相乘 截取字符串 substr(1)
5.parents(‘选择器’) ：可以返回指定祖先元素 $(this).parents(".p-num").siblings(".p-price").html();
6.最后计算的结果如果想要保留2位小数 通过 toFixed(2) 方法
7.用户也可以直接修改表单里面的值，同样要计算小计。 用表单change事件
8.用最新的表单内的值 乘以 单价即可 但是还是当前商品小计
? 代码实现略。(详情参考源代码)
