• jQuery 文本属性值


    1. jQuery 文本属性值

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

    1.1 jQuery内容文本值

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

    语法

    1. 普通元素内容 html()( 相当于原生inner HTML)

    html()             // 获取元素的内容 
    html(''内容'')   // 设置元素的内容 

    2. 普通元素文本内容 text()   (相当与原生 innerText)

    text()                     // 获取元素的文本内容 
    text(''文本内容'')   // 设置元素的文本内容

    3. 表单的值 val()( 相当于原生value)

    val()              // 获取表单的值 
    val(''内容'')   // 设置表单的值

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

    1.核心思路:首先声明一个变量,当我们点击+号(increment),就让这个值++,然后赋值给文本框

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

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

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

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

     // 3. 增减商品数量模块 首先声明一个变量,当我们点击+号(increment),就让这个值++,然后赋值给文本框。
        $(".increment").click(function() {
            // 得到当前兄弟文本框的值
            var n = $(this).siblings(".itxt").val();
            // console.log(n);
            n++;
            $(this).siblings(".itxt").val(n);
            // 3. 计算小计模块 根据文本框的值 乘以 当前商品的价格  就是 商品的小计
            // 当前商品的价格 p  
            var p = $(this).parents(".p-num").siblings(".p-price").html();
            // console.log(p);
            p = p.substr(1);
            console.log(p);
            var price = (p * n).toFixed(2);

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

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

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

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

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

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

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

    7.用户也可以直接修改表单里面的值,同样要计算小计。 用表单change事件8.用最新的表单内的值 乘以 单价即可  但是还是当前商品小计

    //  4. 用户修改文本框的值 计算 小计模块  
        $(".itxt").change(function() {
            // 先得到文本框的里面的值 乘以 当前商品的单价 
            var n = $(this).val();
            // 当前商品的单价
            var p = $(this).parents(".p-num").siblings(".p-price").html();
            // console.log(p);
            p = p.substr(1);
            $(this).parents(".p-num").siblings(".p-sum").html("¥" + (p * n).toFixed(2));
            getSum();
        });
  • 相关阅读:
    Image Perimeters(图像周长)
    Power Strings(字符串的n次方)
    滑雪
    剪花布条
    SOJ题目分类
    Catch That Cow(捉住那头牛)
    Seek the Name, Seek the Fame(找名字,要成名)
    Avoid The Lakes(躲开湖水区)
    hash相关理论
    JAVASCRIPT共通関数数値チェック
  • 原文地址:https://www.cnblogs.com/bky-/p/13779752.html
Copyright © 2020-2023  润新知