jQuery 文本属性值

jQuery的文本属性值常见操作有三种:html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性。

一、jQuery内容文本值

常见操作有三种:html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性,主要针对元素的内容还有表单的值操作。

语法

jQuery 文本属性值

 

 

注意: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.核心思路:首先声明一个变量,当我们点击+号(increment),就让这个值++,然后赋值给文本框。

2.注意1: 只能增加本商品的数量, 就是当前+号的兄弟文本框(itxt)的值。

3.修改表单的值是val() 方法

4.注意2: 这个变量初始值应该是这个文本框的值,在这个值的基础上++。要获取表单的值

5.减号(decrement)思路同理,但是如果文本框的值是1,就不能再减了。

 

// 1.增加商品数量
   $(".increment").click(function () {
       // 定义一个变量,获取当前点击的+号的兄弟表单的初始值
       var n = $(this).siblings(".itxt").val();
       // console.log(n);
       // 点击就让他自加1
       n++;
       // 把这个值赋值给文本框
       $(this).siblings(".itxt").val(n);
  });
   // 2.减少商品数量
   $(".decrement").click(function () {
       // 定义一个变量,获取当前点击的-号的兄弟表单的初始值
       var n = $(this).siblings(".itxt").val();
       if (n == 1) {
           return false;
      }
       // 点击就让他自减1
       n--;
       // 把这个值赋值给文本框
       $(this).siblings(".itxt").val(n);
  })

 

三、 案例:购物车案例模块-修改商品小计

1.核心思路:每次点击+号或者-号,根据文本框的值 乘以 当前商品的价格 就是 商品的小计

2.注意1: 只能增加本商品的小计, 就是当前商品的小计模块(p-sum)

3.修改普通元素的内容是text() 方法

4.注意2: 当前商品的价格,要把¥符号去掉再相乘 截取字符串 substr(1)

5.parents(‘选择器’) 可以返回指定祖先元素

6.最后计算的结果如果想要保留2位小数 通过 toFixed(2) 方法

7.用户也可以直接修改表单里面的值,同样要计算小计。 用表单change事件

8.用最新的表单内的值 乘以 单价即可 但是还是当前商品小计

 // 2.增减商品模块
   // (1).增加商品数量
   $(".increment").click(function () {
       // 定义一个变量,获取当前点击的+号的兄弟表单的初始值
       var n = $(this).siblings(".itxt").val();
       // console.log(n);
       // 点击就让他自加1
       n++;
       // 把这个值赋值给文本框
       $(this).siblings(".itxt").val(n);
?
       // 3.小计模块
       // 把当前商品价格乘以数量(文本框的值) 赋值给当前商品的小计
       // parent() 返回最近一级父元素 parents()返回祖先元素
       // var p = $(this).parent().parent().siblings(".p-price").text();
       var p = $(this).parents(".p-num").siblings(".p-price").text();
       // 把¥符号去掉
       p = p.substr(1);
       // console.log(p);
       // 商品小计
       // toFixed(2) 保留两位小数
       // $(this).parent().parent().siblings(".p-sum").text(‘¥‘ + (p * n).toFixed(2));
       $(this).parents(".p-num").siblings(".p-sum").text(‘¥‘ + (p * n).toFixed(2));
?
  });
   // (2).减少商品数量
   $(".decrement").click(function () {
       var n = $(this).siblings(".itxt").val();
       if (n == 1) {
           return false;
      }
       n--;
       $(this).siblings(".itxt").val(n);
       // 3.小计模块
       var p = $(this).parents(".p-num").siblings(".p-price").text();
       p = p.substr(1);
       $(this).parents(".p-num").siblings(".p-sum").text(‘¥‘ + (p * n).toFixed(2));
?
  });
   // 4.用户直接修改商品数量时 计算小计
   $(".itxt").change(function () {
       // 得到修改后的数量
       var n = $(this).val();
       // 当前商品单价 p
       var p = $(this).parents(".p-num").siblings(".p-price").text();
       p = p.substr(1);
       $(this).parents(".p-num").siblings(".p-sum").text(‘¥‘ + (p * n).toFixed(2));
  })

 

jQuery 文本属性值

上一篇:apache虚拟主机解析php


下一篇:如何在Ubuntu 20.04上安装Apache ZooKeeper