jQuery第二天学习总结—— jQuery 文本属性值(html、text、val)

最新推荐文章于 2024-04-15 09:35:01 发布

VIP文章李穩钰

最新推荐文章于 2024-04-15 09:35:01 发布

阅读量241

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_52819925/article/details/119819542

版权

jQuery 文本属性值

jQuery的文本属性值常见操作有三种：html()/ text()/ val() ;

分别对应JS中的 innerHTML 、innerText 和 value 属性。

jQuery内容文本值

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

普通元素内容html（）（相当于原生inner HTML）

获取元素的内容

html() // 获取元素的内容

设置元素的内容

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

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

获取元素的文本内容

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

设置元素的文本内容

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

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

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

获取表单的值

val() // 获取表单的值

设置表单的值

val("内容") // 设置表单的值

示例代码

<!DOCTYPE html>
<html lang="en">

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

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

</html>

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

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

示例代码：

$(function () {
   
    // 1. 全选 全不选功能模块
    // 就是把全选按钮（checkall）的状态赋值给 三个小的按钮（j-checkbox）就可以了
    // 事件可以使用change
    $(".checkall").change(function () {
   
        // console.log($(this).prop("checked"));
        $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
    });
    // 2. 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
    $(".j-checkbox").change(function () {
   
        // if(被选中的小的复选框的个数 === 3) {
   
        //     就要选中全选按钮
        // } else {
   
        //     不要选中全选按钮
        // }
        // console.log($(".j-checkbox:checked").length);
        // $(".j-checkbox").length 这个是所有的小复选框的个数
        if ($(".j-checkbox:checked").length === $(".j-checkbox"

最低0.47元/天解锁文章

李穩钰

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery第二天学习总结—— jQuery 文本属性值(html、text、val)

jQuery 文本属性值jQuery的文本属性值常见操作有三种：html()/ text()/ val() ;分别对应JS中的 innerHTML 、innerText 和 value 属性。jQuery内容文本值主要针对元素的内容还有表单的值操作。普通元素内容html（）（相当于原生inner HTML）获取元素的内容html() // 获取元素的内容设置元素的内容html("内容") // 设置元素的内容普通元素文本内容 text() (相当与原生 innerText)获取元素
复制链接

扫一扫