jQuery内容文本值

jQuery

jQuery内容文本值

1. 说明

image-20230320190000386

2. 普通元素内容 html()

image-20230320190013698

3. 普通元素文本内容 text()

image-20230320190024729

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

4. 表单的值 val()

image-20230320190049310

5. 代码解释

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.6.0.js"></script>
</head>

<body>
    <div>
        <span></span>
    </div>
    <input type="text" value="please input content">
    <script>
        $(function () {
            // 主要针对元素的内容还有表单的值操作。

            // 1. 普通元素内容 html()（ 相当于原生inner HTML)
            // html() // 获取元素的内容
            // html(''内容'') // 设置元素的内容
            $('span').html('123');

            // 2. 普通元素文本内容 text()(相当与原生 innerText)
            // text() // 获取元素的文本内容
            // text(''文本内容'') // 设置元素的文本内容
            $('span').text('321');

            // 3. 表单的值 val()（ 相当于原生value)
            // val() // 获取表单的值
            // val(''内容'') // 设置表单的值
            $('input').val('123');
        })
    </script>
</body>

</html>

6. 案例分析

6.1 如果想要保留2位小数 通过 toFixed(2) 方法

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

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

6.31 思路

image-20230320190247571

6.32 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$('.increment').click(function () {
    // 得到当前兄弟文本框的值
    var num = $(this).siblings('.itxt').val()
    num++
    $(this).siblings('.itxt').val(num)
})

$('.decrement').click(function () {
    // 得到当前兄弟文本框的值
    var num = $(this).siblings('.itxt').val()
    // 文本框的值是1，就不能再减了。
    // if (num == 1) {
    //     return false
    // }
    num--
    // 文本框的值是1，就不能再减了。
    num >= 1 ? num : num = 1
    $(this).siblings('.itxt').val(num)
})

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

6.31 思路

image-20230320190523506

6.32 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
$(function () {
    $('.increment').click(function () {
        // 得到当前兄弟文本框的值
        var num = $(this).siblings('.itxt').val()
        num++
        $(this).siblings('.itxt').val(num)

        // 商品小计
        var price = $(this).parents('.p-num').siblings('.p-price').html()
        price = price.substr(1)
        var sum = price * num
        sum = sum.toFixed(2)
        $(this).parents('.p-num').siblings('.p-sum').text('￥' + sum)
    })

    $('.decrement').click(function () {
        // 得到当前兄弟文本框的值
        var num = $(this).siblings('.itxt').val()
        // 文本框的值是1，就不能再减了。
        // if (num == 1) {
        //     return false
        // }
        num--
        // 文本框的值是1，就不能再减了。
        num >= 1 ? num : num = 1
        $(this).siblings('.itxt').val(num)

        // 商品小计
        var price = $(this).parents('.p-num').siblings('.p-price').html()
        price = price.substr(1)
        var sum = price * num
        sum = sum.toFixed(2)
        $(this).parents('.p-num').siblings('.p-sum').text('￥' + sum)
    })

    // 用户也可以直接修改表单里面的值，同样要计算小计。 用表单change事件
    $('.itxt').change(function () {
        var thisPrice = $(this).val()
        var price = $(this).parents('.p-num').siblings('.p-price').html()
        price = price.substr(1)
        var sum = price * thisPrice
        sum = sum.toFixed(2)
        $(this).parents('.p-num').siblings('.p-sum').text('￥' + sum)
    })
})

Solar-Rain程序 & 设计

随心所欲，不逾矩 ~