jQuery 文本属性值

时间 2020-10-06

标签 html this atom spa htm blog 事件 rem 字符串栏目 JQuery 繁體版

原文原文链接

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

1、jQuery内容文本值

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

语法atom

注意：html() 可识别标签，text() 不识别标签。spa

演示代码htm

<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>

2、案例：购物车案例模块-增减商品数量

1.核心思路：首先声明一个变量，当咱们点击+号（increment），就让这个值++，而后赋值给文本框。blog

2.注意1：只能增长本商品的数量，就是当前+号的兄弟文本框（itxt）的值。事件

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

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

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);
   })

3、案例：购物车案例模块-修改商品小计

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 文本属性值

1、jQuery内容文本值

2、 案例：购物车案例模块-增减商品数量

3、 案例：购物车案例模块-修改商品小计

2、案例：购物车案例模块-增减商品数量

3、案例：购物车案例模块-修改商品小计