jQuery常用API（四）

一条咸鱼o*v*o

已于 2022-05-15 10:09:10 修改

阅读量157

点赞数

文章标签： jquery javascript 前端

于 2022-05-14 08:41:11 首次发布

本文链接：https://blog.csdn.net/m0_45659764/article/details/124756493

版权

6. jQuery内容文本值

1. 普通元素内容html()（相当于原生innerHTML）

编辑编辑

2. 普通元素文本内容text() （相当于原生inner Text）

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

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

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

6. jQuery内容文本值

主要针对元素的内容还有表单的值操作

1. 普通元素内容html()（相当于原生innerHTML）

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

<body>
    <div>
        <span>我是内容</span>
    </div>
    <input type="text" value="请输入内容">
    <script>
        // 1. 获取设置元素内容 html()
        console.log($("div").html());
        $("div").html("123");

    </script>
</body>

注意：包括标签

2. 普通元素文本内容text() （相当于原生inner Text）

只把里面的文字获取过来，标签是忽略掉的

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

<body>
    <div>
        <span>我是内容</span>
    </div>
    <input type="text" value="请输入内容">
    <script>
 
        // 2. 获取设置元素文本内容 text()
        console.log($("div").text());
        $("div").text("123");

  
    </script>
</body>

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

val()             //获取表单的文本内容
val("文本内容")   //设置表单的文本内容

<body>
    <div>
        <span>我是内容</span>
    </div>
    <input type="text" value="请输入内容">
    <script>
      
        // 3. 获取设置表单值 val()
        console.log($("input").val());
        $("input").val("123");

    </script>
</body>

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

步骤：

先给每一个加按钮和减按钮绑定事件
当点击相应的加减按钮的时候，定义一个变量n，等于当前按钮的兄弟（itxt）当前的文本值
如果点击的是加按钮，就使n++，然后赋值给当前按钮兄弟的文本值，减按钮n--，然后同理
如果点击减按钮，文本框中的值等于1的时候，就return false ，不能再减了

注意：

点击加号和减号的时候，增减的是自己这一行的物品的数量，而不是给所有行的物品的数量都增减，即点击的时候改变的是自己的兄弟（sibling）文本框的值
增减的时候，是直接在原先文本框中的数字的基础上进行加减的
如果减的时候，值已经等于1了，就不用再减了，return false，此时后面的程序就不会再运行

car.js

$(function () {
    //1. 全选 全不选模块
    $(".checkall").change(function () {
        // console.log($(this).prop("checked"));
        $(".j-checkbox,.checkall").prop("checked", $(this).prop("checked"));
    });

    // 2.如果被选中的复选框的个数等于3，就选中所有全选按钮，如果被选中的复选框的个数不等于3，就不选中所有全选案例
    $(".j-checkbox").change(function () {
        // console.log($(".j-checkbox:checked").length);
        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }
    });

    // 3.增减商品数目模块
    $(".increment").click(function () {
        var n = $(this).siblings(".itxt").val();
        // console.log(n);
        n++;
        $(this).siblings(".itxt").val(n);
    });
    $(".decrement").click(function () {
        var n = $(this).siblings(".itxt").val();
        if (n == 1) {
            return false;
        }
        n--;
        $(this).siblings(".itxt").val(n);
    });
})

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

步骤：

当点击加或减按钮的时候，通过当前被点击的按钮的父级的父级的兄弟（p-price）获得单价的文本（带有￥符号）
使用截取字符串截取从￥的下一个字符到最后
然后用截取到的字符串（价格）乘数量
然后把得到的数值，作为当前按钮的父级的父级的兄弟（p-sum）的文本值
当直接改变（change）文本框里的值得时候，用当前文本框里的值乘每个物品的单价作为当前按钮的父级的父级的兄弟（p-sum）的文本值

注意：

找元素的时候必须从当前元素（this）出发
parents('选择器')可以返回指定的祖先元素
toFixed(n)保留n位小数

car.js

$(function () {
    //1. 全选 全不选模块
    $(".checkall").change(function () {
        // console.log($(this).prop("checked"));
        $(".j-checkbox,.checkall").prop("checked", $(this).prop("checked"));
    });

    // 2.如果被选中的复选框的个数等于3，就选中所有全选按钮，如果被选中的复选框的个数不等于3，就不选中所有全选案例
    $(".j-checkbox").change(function () {
        // console.log($(".j-checkbox:checked").length);
        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }
    });

    // 3.增减商品数目模块
    $(".increment").click(function () {
        var n = $(this).siblings(".itxt").val();
        // console.log(n);
        n++;
        $(this).siblings(".itxt").val(n);

        // 更改该商品的总价
        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));
    });
    $(".decrement").click(function () {
        var n = $(this).siblings(".itxt").val();
        if (n == 1) {
            return false;
        }
        n--;
        $(this).siblings(".itxt").val(n);
        // 更改该商品的总价
        var p = $(this).s(".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();
        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));
    });
})