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事件，用最新的表单值乘以单价即可得到当前商品小计