jQuery常用API（五）——jQuery内容文本值
作者：互联网
5. jQuery内容文本值
主要针对元素内容还有表单值操作
5.1 普通元素内容html()（相当于原生innerHTML）
html() //获取元素内容
html("内容") //设置元素内容
console.log($("div").html());
$("div").html("123");
5.2 普通元素文本内容text()（相当于原生innerText）
text() //获取元素的文本内容
text("内容") //设置元素的文本内容
console.log($("div").text());
$("div").text("123");
5.3 表单值val()（相当于原生value）
console.log($("input").val());
$("input").val("123");
总体：
<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>
5.4 购物车案例
div部分：
1 <div class="c-container"> 2 <div class="w"> 3 <div class="cart-filter-bar"> 4 <em>全部商品</em> 5 </div> 6 <!-- 购物车主要核心区域 --> 7 <div class="cart-warp"> 8 <!-- 头部全选模块 --> 9 <div class="cart-thead"> 10 <div class="t-checkbox"> 11 <input type="checkbox" name="" id="" class="checkall"> 全选 12 </div> 13 <div class="t-goods">商品</div> 14 <div class="t-price">单价</div> 15 <div class="t-num">数量</div> 16 <div class="t-sum">小计</div> 17 <div class="t-action">操作</div> 18 </div> 19 <!-- 商品详细模块 --> 20 <div class="cart-item-list"> 21 <div class="cart-item check-cart-item"> 22 <div class="p-checkbox"> 23 <input type="checkbox" name="" id="" checked class="j-checkbox"> 24 </div> 25 <div class="p-goods"> 26 <div class="p-img"> 27 <img src="upload/p1.jpg" alt=""> 28 </div> 29 <div class="p-msg">【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲</div> 30 </div> 31 <div class="p-price">￥12.60</div> 32 <div class="p-num"> 33 <div class="quantity-form"> 34 <a href="javascript:;" class="decrement">-</a> 35 <input type="text" class="itxt" value="1"> 36 <a href="javascript:;" class="increment">+</a> 37 </div> 38 </div> 39 <div class="p-sum">￥12.60</div> 40 <div class="p-action"><a href="javascript:;">删除</a></div> 41 </div> 42 <div class="cart-item"> 43 <div class="p-checkbox"> 44 <input type="checkbox" name="" id="" class="j-checkbox"> 45 </div> 46 <div class="p-goods"> 47 <div class="p-img"> 48 <img src="upload/p2.jpg" alt=""> 49 </div> 50 <div class="p-msg">【2000张贴纸】贴纸书 3-6岁 贴画儿童 贴画书全套12册 贴画 贴纸儿童 汽</div> 51 </div> 52 <div class="p-price">￥24.80</div> 53 <div class="p-num"> 54 <div class="quantity-form"> 55 <a href="javascript:;" class="decrement">-</a> 56 <input type="text" class="itxt" value="1"> 57 <a href="javascript:;" class="increment">+</a> 58 </div> 59 </div> 60 <div class="p-sum">￥24.80</div> 61 <div class="p-action"><a href="javascript:;">删除</a></div> 62 </div> 63 <div class="cart-item"> 64 <div class="p-checkbox"> 65 <input type="checkbox" name="" id="" class="j-checkbox"> 66 </div> 67 <div class="p-goods"> 68 <div class="p-img"> 69 <img src="upload/p3.jpg" alt=""> 70 </div> 71 <div class="p-msg">唐诗三百首+成语故事全2册 一年级课外书 精装注音儿童版 小学生二三年级课外阅读书籍</div> 72 </div> 73 <div class="p-price">￥29.80</div> 74 <div class="p-num"> 75 <div class="quantity-form"> 76 <a href="javascript:;" class="decrement">-</a> 77 <input type="text" class="itxt" value="1"> 78 <a href="javascript:;" class="increment">+</a> 79 </div> 80 </div> 81 <div class="p-sum">￥29.80</div> 82 <div class="p-action"><a href="javascript:;">删除</a></div> 83 </div> 84 </div> 85 86 <!-- 结算模块 --> 87 <div class="cart-floatbar"> 88 <div class="select-all"> 89 <input type="checkbox" name="" id="" class="checkall">全选 90 </div> 91 <div class="operation"> 92 <a href="javascript:;" class="remove-batch"> 删除选中的商品</a> 93 <a href="javascript:;" class="clear-all">清理购物车</a> 94 </div> 95 <div class="toolbar-right"> 96 <div class="amount-sum">已经选<em>1</em>件商品</div> 97 <div class="price-sum">总价： <em>￥12.60</em></div> 98 <div class="btn-area">去结算</div> 99 </div> 100 </div> 101 </div> 102 </div> 103 </div>View Code
增减商品
分析：
- 核心思路：首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。
- 注意1：只能增加本商品的数量，就是当前+号的兄弟文本框（itxt）的值。
- 修改表单的值是val()方法。
- 注意2：这个变量初始值应该是这个文本框的值，在这个值的基础上++。要获取表单的值。
- 减号（decrement）思路同理，但是如果文本框的值是1，就不能再减了。
1 <script>
2 // 首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。
3 $(".increment").click(function () {
4 var n = $(this).siblings(".itxt").val();
5 n++;
6 $(this).siblings(".itxt").val(n);
7 })
8 //减号
9 $(".decrement").click(function () {
10
11 var n = $(this).siblings(".itxt").val();
12 if (n == 1) {
13 return false;
14 }
15 n--;
16 $(this).siblings(".itxt").val(n);
17 })
18 </script>
修改商品小计
分析
- 核心思路：每次点击+或-号，根据文本框的值乘以当前商品的价格就是商品小计。
- 只能修改本商品小计
- 修改普通元素内容是text()方法
- 当前商品价格要去掉￥符号再相乘
1 <script>
2 // 首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。
3 $(".increment").click(function () {
4 var n = $(this).siblings(".itxt").val();
5 n++;
6 $(this).siblings(".itxt").val(n);
7 //小计模块
8 var p = $(this).parent().parent().siblings("p-price").html();
9 p.substr(1);//去掉￥符号
10 $(this).parent().parent().siblings("p-sum").html("￥" + p * n)
11 })
12 //减号
13 $(".decrement").click(function () {
14
15 var n = $(this).siblings(".itxt").val();
16 if (n == 1) {
17 return false;
18 }
19 n--;
20 $(this).siblings(".itxt").val(n);
21
22
23 p.substr(1);//去掉￥符号
24 $(this).parent().parent().siblings("p-sum").html("￥" + p * n)
25 })
26
27 </script>
优化：
5.parents（'选择器'）可以返回指定祖先元素，避免了层层寻找
//修改前
var p = $(this).parent().parent().siblings("p-price").html();
//修改后
var p = $(this).parents("p-num").siblings("p-price").html();
6.最后计算结果如果想要保留2位小数通过toFixed(2)方法
7.用户也可以直接修改表单里面的值，同样要计算小计。用表单change事件。在商品数量的文本框中输入一个数值，价格区也要有相应的变化。
1 $(".itxt").change(function () {
2 //获取文本框的值
3 var n = $(this).val();
4 var p = $(this).parents(".p-num").siblings(".p-price").html();
5 p = p.substr(1);
6 $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2))
7 })
标签：jQuery,val,text,html,itxt,API,siblings,div,文本 来源： https://www.cnblogs.com/1670420748s/p/15217262.html