Diferencia entre val () y text ()

¿Cuál es la diferencia entre las funciones de jQuery val()y text()?

¿Dónde usarías uno sobre el otro?

.val()funciona en elementos de entrada (o cualquier elemento con un atributo de valor?) y .text()no funcionará en elementos de entrada. .val()obtiene el valor del elemento de entrada, independientemente del tipo. .text()obtiene el texto interno (no HTML) de todos los elementos coincidentes:

.text()

El resultado es una cadena que contiene el contenido de texto combinado de todos los elementos coincidentes. Este método funciona en documentos HTML y XML. No se puede usar en elementos de entrada. Para el texto del campo de entrada, use el atributo val.

.val()

Obtenga el contenido del atributo de valor del primer elemento coincidente

text () devuelve el contenido de texto combinado de todos los elementos coincidentes (como p, div, etc.) val () se usa para obtener el valor de un elemento de entrada (como input, select, etc.)

de acuerdo con el texto de la documentación oficial () no debe usarse con elementos de entrada

val () se usa para recuperar el valor de todos los tipos de entrada html como (casilla de verificación, texto, etc.), donde el usuario tiene una opción para ingresar el valor. Ex:-

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

donde as text () se usa para obtener valor de los elementos html donde el usuario no interactuará como (p, div, etc.)

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

La función .val () devuelve un valor del elemento de entrada y la función .text () devuelve un valor distinto de los elementos de entrada. También podemos pasar argumentos de cadena a estas funciones para establecer el valor del elemento que llama . El siguiente código muestra cómo establecer el valor de los elementos DOM utilizando las funciones .val () y .text ():

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

Parte de 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;
})

Demostración: http://jsfiddle.net/urhys9zj/6/