1.普通元素内容 html() (相当于原生innerHTML)
element.html() // 获取元素的内容
element.html('内容') // 设置元素的内容
2.普通元素文本内容text() (相当于原生innerText )
element.text() // 获取元素的文本内容
element.text('内容') // 设置元素的文本内容
3.表单的值val() (相当于原生value)
element.val() // 获取表单元素的内容
element.val('内容') // 设置表单元素的内容
4.代码体验
<!-- 引入 jQuery 文件 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <!-- HTML结构 --> <div> <span>天热拉,学习静心</span> </div> <input type="text" value="请输入您的名字"> <!-- js代码 --> <script> // 1. 获取设置元素的内容 html() console.log($('div').html()); // <span>天热拉,学习静心</span> // $('div').html('哈哈哈哈~'); // 2. 获取设置元素的文本内容 text() console.log($('div').text()); // 天热拉,学习静心 (注意:这里我注释了上面对div内容设置) $('div').text('123'); // 3. 获取设置表单元素的值 val() console.log($('input').val()); // 请输入您的名字 $('input').val('越努力,越幸运') </script>
通过以上代码,可以了解到html()和text() 的区别在于是否可以识别HTML标签。另外,jQuery中都是方法要注意别忘了() 。
5. 案例:购物车增减商品功能
该案例和上文中购物车全选功能案例是同一项目,所以此处只呈现js的代码,样式和结构可以去翻看上篇文章。
注意:上篇文章的单价模块和小计模块都多写了一个“元”字,记得去掉,另外还记得给“ - ”按钮加上类名“ reduceBtn ”,给“ + ”按钮加上类名 “ addBtn ”,给数量框input加上“ countInput ”.
需求:
① 点击“ - ”按钮,当前商品数量-1,但是不可低于1,同时小计模块的钱数随之变化;
② 点击“ + ”按钮,当前商品数量+1,同时小计模块的钱数随之变化;
③ 用户可以手动修改商品数量值,同时小计模块的钱数随之变化;
<!-- js 代码 --> <script> $(function() { // 3. 按钮点击数量进行加减 // (1) 点击按钮数量减少 $('.reduceBtn').click(function() { // 所谓数量减少是input框中的value值进行改变 // 由于每一个商品的加减按钮要和对应的input框的值联动起来 // 所以采用节点间的关系获取val值,并转换为数字型 let count = parseInt($(this).siblings('.countInput').val()); // 由于数量不可一直减少,有最低限度,所以要进行判断 if (count == 1) { // 当不可再少的时候,提醒用户 return alert('数量已达最小'); }; count--; $(this).siblings('.countInput').val(count); // 4. 修改小计数量 // ① 利用节点关系获取单价,由于单价是字符串,我们要通过截取然后转换为数字型 let price = +$(this).parent().siblings('.price').html().substr(1); // ② 通过单价 * 数量计算小计,为了保证页面美观,统一保留2位小数 let num = '¥' + (price * count).toFixed(2); // ③ 将值设置给小计元素 $(this).parent().siblings('.total').html(num); }); // (2) 点击按钮数量增加 $('.addBtn').click(function() { let count = parseInt($(this).siblings('.countInput').val()); // 理论上数量增加,也有最高限度,应该判断,但是这里我没有库存量,所以不做判断 count++; $(this).siblings('.countInput').val(count); // 计算小计 let price = +$(this).parent().siblings('.price').html().substr(1); let num = '¥' + (price * count).toFixed(2); $(this).parent().siblings('.total').html(num); }); // (3) 除了可以使用按钮增减数量,用户也可以直接输入数量,使用change事件 // change事件表示当数值变化的时候触发 $('.countInput').change(function() { // 获取变化后的值 let count = parseInt($(this).val()); // 计算小计 let price = +$(this).parent().siblings('.price').html().substr(1); let num = '¥' + (price * count).toFixed(2); $(this).parent().siblings('.total').html(num); }); }) </script>
案例分析:
① 增加商品数量模块:首先要声明一个变量count,接收当前文本框内的值,当我们点击 - 号,就让这个值-- ;点击 + 号,就让这个值 ++,然后将这个值重新赋予文本框;
② 注意1:只能减少/增加本商品的数量,所以获取的是当前按钮的兄弟文本框的值;
③ 修改表单的值是val() 方法
④ 修改商品小计模块:核心思路---每次点击 - 号或 + 号,根据文本框的值*当前商品的价格就是当前商品的小计;
⑤ 注意2:只能增减本商品的小计,所以一样利用节点关系去获取单价元素(price)和小计元素(total);
⑥ 修改普通元素的内容可以使用html()方法,也可以使用text()方法;
⑦ 注意3:当前商品的单价,要把¥符号去掉再转换为数字型然后进行相乘,截取字符串substr(1),转换数字型在最前面加上 + 即可
⑧ 最后计算的结果为了保持美观可以保留两位小数,使用toFixed(2)方法
⑨ 用户直接修改表单的值,同样要计算小计,使用表单chang事件,用最新的表单值乘以单价即可得到当前商品小计