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. 用最新的表单内的值 乘以 单价即可 但是还是当前商品小计
? 代码实现略.(详情参考源代码)
来源: http://www.bubuko.com/infodetail-3384541.html