val() 和 text() 的区别答案

【问题标题】：Difference between val() and text()val() 和 text() 的区别
【发布时间】：2009-04-30 16:36:42
【问题描述】：

jQuery的函数val()和text()有什么区别？

你会在哪里使用一个而不是另一个？

【问题讨论】：

stackoverflow.com/questions/41351609/…

【解决方案1】：

.val() 适用于输入元素（或任何具有 value 属性的元素？），.text() 不适用于输入元素。 .val() 获取输入元素的值——与类型无关。 .text() 获取所有匹配元素的 innerText（不是 HTML）：

.text()

结果是一个字符串，包含所有的组合文本内容匹配的元素。此方法适用于 HTML 和 XML 文档。不可能是用于输入元素。用于输入字段文本使用 val 属性。

.val()

获取value属性的内容第一个匹配的元素

【讨论】：

有趣的事情 - 考虑到 textarea someTextArea.html() !== someTextArea.val() 可能不相等
不要使用 textarea.html('content') 来加载内容。我用 jQuery 动态加载了一些内容——有趣的是我点击了保存按钮。之后，textarea 中的内容不再改变。使用 .val('content') 设置内容不会出现此问题。无法弄清楚为什么，但我认为这与 DOM 缓存和这两种方法的不同行为有关。

【解决方案2】：

text() 返回所有匹配元素（如p、div等）的组合文本内容 val()用于获取输入元素的值（如input、select等）

根据官方文档 text() 不应与输入元素一起使用

【讨论】：

【解决方案3】：

val() 用于从所有 html 输入类型（如复选框、文本等）中获取值，用户可以选择输入价值。 例如：-

<input type="text" id="txt_name" /> 
 <input type="checkbox" name="vehicle" value="Bike" id="chk_byk" class="ss">bike<br>   
<script type="text/javascript">
 $(document).ready(function () {

            $("#btn_submit").click(function () {
                alert($("#chk_byk").val());
            });

            });


    </script>

其中 as text() 用于从用户不会交互的 html 元素中获取值（p、div 等）

    <p id="p1">Hi how are u??</p>
 <div id="dv5">Debendra</div>

 <script type="text/javascript">

        $(document).ready(function () {

            $("#btn_submit").click(function () {
                alert($("#dv5").text());
            });

            });


    </script>

【讨论】：

【解决方案4】：

.val() 函数从输入元素返回值，而 .text() 函数从输入元素以外的元素返回值。我们还可以将字符串参数传递给这些函数以设置调用元素的值。下面的代码展示了如何使用 .val() 和 .text() 函数为 DOM 元素设置值：

HTML 部分：

<form id="form1"><input id="first" type="text" /><input type="submit" /></form>
<div id="second">Click the "Submit Query" to see it work</div>

jQuery部分：

$(document).on("submit", "form", function (e) {
    $("#first").val("This input is set by .val() function");
    $("#second").text("A new text is set using .text() function!");
    return false;
})

演示：http://jsfiddle.net/urhys9zj/6/

【讨论】：