jQuery中val()和text()的区别

最新推荐文章于 2024-07-24 11:13:53 发布

ina的

最新推荐文章于 2024-07-24 11:13:53 发布

阅读量1.1k

点赞数 2

分类专栏： Web前端文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/qq_52430605/article/details/132518060

版权

Web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jQuery中val()和text()的区别

1.val()方法：返回或设置被选元素的 value 属性

（1）val()方法的基本概念

val() 方法返回或设置被选元素的 value 属性

input标签类型中的文本框、单选框、复选框、下拉列表等都会有value属性

当用于返回值时：

该方法返回第一个匹配元素的 value 属性的值。

当用于设置值时：

该方法设置所有匹配元素的 value 属性的值。

（2）val()方法的使用方法

返回 value 属性：

$(*selector*).val()

设置 value 属性：

$(*selector*).val(*value*)

演示案例：

<body>
    <div id="divTest">divTest</div>
    <span id="spanTest">spanTest</span>
    <input id="inputTest" type="text" value="inputTestValue">

    <script>
        $(function () {
            let divEle = $("#divTest")
            console.log("$(\"#divTest\").val() = " + $("#divTest").val()) 
            // 对div标签对象使用val()方法
            // 获取到的是空字符串

            let spanTest = $("#spanTest")
            console.log("$(\"#spanTest\").val() = " + $("#spanTest").val()) 
            // 对span标签对象使用val()方法
            // 获取到的是空字符串

            let inputTest = $("#inputTest")
            console.log("$(\"#inputTest\").val() = " + $("#inputTest").val()) 
            // 对input标签对象使用val()方法
            // 获取到的是input标签中value的值
        })
    </script>
</body>

在这里插入图片描述

由此可见，val()方法只能获取到input标签中的value属性的值

（3）和val()方法有关的扩展内容

其他类型的input标签，获取到的value值的区别如下：

（1）input 标签的 value 属性的作用是由 input 标签的 type 属性的值决定的
（2）当 type 的取值为 button、reset、submit 时， value 属性的值表示的是按钮上显示的文本
（3）当 type 的取值为 text、password、hidden 时，value 属性的值表示的是输入框中显示的初始值，此（4）初始值可以更改，并且在提交表单时，value 属性的值会发送给服务器（既是初始值，也是提交给服务器的值）
（5）当 type 的取值为 checkbox、radio 时，value 属性的值表示的是提交给服务器的值
（6）当 type 的取值为 image 时，点击它提交表单后，会将用户的点击位置相对于图像左上角的 x y 坐标提交给服务器
————————————————
版权声明：本文为CSDN博主「Y_I_M_I_l_u_c_k」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Y_I_M_I_l_u_c_k/article/details/122484991

2.text()方法

（1）text()方法的基本概念

text() 方法设置或返回被选元素的文本内容

与DOM中的innerText()方式相似

当该方法用于返回内容时：

则返回所有匹配元素的文本内容（会删除 HTML 标记）。

当该方法用于设置内容时：

则重写所有匹配元素的内容。

（2）text()方法的使用方法

返回文本内容：

$(*selector*).text()

设置文本内容：

$(*selector*).text(*content*)

演示案例：

<body>
    <div id="divTest">divTest</div>
    <span id="spanTest">spanTest</span>
    <input id="inputTest" type="text" value="inputTestValue">

    <script>
        $(function () {
            let divEle = $("#divTest")
            console.log("$(\"#divTest\").text() = " + $("#divTest").text())
            // 对div标签对象使用text()方法
            // 获取到的是divTest

            let spanTest = $("#spanTest")
            console.log("$(\"#spanTest\").text() = " + $("#spanTest").text())
            // 对span标签对象使用text()方法
            // 获取到的是spanTest

            let inputTest = $("#inputTest")
            console.log("$(\"#inputTest\").text() = " + $("#inputTest").text())
            // 对input标签对象使用text()方法
            // 获取到的是空字符串
        })
    </script>
</body>

在这里插入图片描述

由此可见，text()方法可以获取到标签中的内容，但不能获取到标签的属性中的内容

（3）text()方法有关的扩展内容

（1）text()可以获取到标签中的内容，即使里面嵌套了一个其他的标签

text()方法设置或返回该 HTML 元素的开始标签和结束标签之间的所有文本，其中的特殊字符会被自动转换为 HTML 实体。

实例：

<body>
    <div id="divTest">
        <span>divTest</span>
    </div>

    <script>
        $(function () {
            let divEle = $("#divTest")
            console.log("$(\"#divTest\").val() = " + $("#divTest").text())
            // 对div标签对象使用text()方法
            // 获取到的是divTest
        })
    </script>
</body>

（2）text()会显示被CSS隐藏的元素的内容的，获取的标签对象如果display属性为none，也会返回标签中的内容

实例：

<body>
    <div id="divTest" style="display: none;">divTest</div>

    <script>
        $(function () {
            let divEle = $("#divTest")
            console.log("$(\"#divTest\").val() = " + $("#divTest").text())
            // 对div标签对象使用text()方法
            // 获取到的是divTest
        })
    </script>
</body>