zoukankan      html  css  js  c++  java
  • 216 jQuery 文本属性值:html() 、text() 、 val()

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

    1.2.1 jQuery内容文本值

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

    语法

    ​ 注意: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.2.2 案例:购物车案例模块-增减商品数量

    1.核心思路:首先声明一个变量,当我们点击+号(increment),就让这个值++,然后赋值给文本框。
    2.注意1: 只能增加本商品的数量, 就是当前+号的兄弟文本框(itxt)的值。
    3.修改表单的值是val() 方法
    4.注意2: 这个变量初始值应该是这个文本框的值,在这个值的基础上++。要获取表单的值
    5.减号(decrement)思路同理,但是如果文本框的值是1,就不能再减了。

    ​ 代码实现略。(详情参考源代码)

    --

    1.2.3. 案例:购物车案例模块-修改商品小计

    1.核心思路:每次点击+号或者-号,根据文本框的值 乘以 当前商品的价格 就是 商品的小计
    2.注意1: 只能增加本商品的小计, 就是当前商品的小计模块(p-sum)
    3.修改普通元素的内容是text() 方法
    4.注意2: 当前商品的价格,要把¥符号去掉再相乘 截取字符串 substr(1)
    5.parents(‘选择器’) :可以返回指定祖先元素 $(this).parents(".p-num").siblings(".p-price").html();
    6.最后计算的结果如果想要保留2位小数 通过 toFixed(2) 方法
    7.用户也可以直接修改表单里面的值,同样要计算小计。 用表单change事件
    8.用最新的表单内的值 乘以 单价即可 但是还是当前商品小计

    ​ 代码实现略。(详情参考源代码)

  • 相关阅读:
    POJ 3159 :Candies 【线性差分约束 链式前向星 栈优化SPFA】
    APM系统SkyWalking介绍
    ELK架构下利用Kafka Group实现Logstash的高可用
    每个人都应有自己的产品
    几行代码养只猫,心情瞬间好多了
    Redis删除特定前缀key的优雅实现
    每个人都应有自己的作品
    Nginx的几个常用配置和技巧
    Nginx与安全有关的几个配置
    开源推荐
  • 原文地址:https://www.cnblogs.com/jianjie/p/12205056.html
Copyright © 2011-2022 走看看