val()和text()之间的区别


Answers:


284

.val()适用于输入元素(或任何具有value属性的元素?),.text()而不适用于输入元素。 .val()获取输入元素的值-与类型无关。.text()获取所有匹配元素的innerText(不是HTML):

.text()

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

.val()

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


3
有趣的事情-考虑到它们可能不相等textarea someTextArea.html() !== someTextArea.val()
Maciej Jankowski

不要使用textarea.html('content')加载内容。我使用jQuery dynamic加载了一些内容-有趣的部分是当我单击“保存”按钮时。在该操作之后,文本区域中的内容不再更改。使用.val('content')设置内容时,不会出现此问题。无法找出原因,但是我认为这与DOM缓存和这两种方法的不同行为有关。
ErikČerpnjak'16

25

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

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


1

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>

0

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.