jQuery的函数val()和text()之间有什么区别?

你会在哪里使用其中一种而不是另一种?


当前回答

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>

其他回答

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

。text ()

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

.val()

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

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>

Text()返回所有匹配元素的合并文本内容(如p、div等) Val()用于获取输入元素的值(如input、select等)

根据官方文档,text()不应该与input元素一起使用

.val()函数返回来自输入元素的值,.text()函数返回来自其他输入元素的值。我们也可以将string参数传递给这些函数来设置调用元素的值。下面的代码展示了如何使用.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/