Diferença entre val () e text ()

Qual a diferença entre as funções do jQuery val()e text()?

Onde você usaria um sobre o outro?

.val()funciona em elementos de entrada (ou qualquer elemento com um atributo value?) e .text()não funcionará em elementos de entrada. .val()obtém o valor do elemento de entrada - independentemente do tipo. .text()obtém o innerText (não HTML) de todos os elementos correspondentes:

.text()

O resultado é uma sequência que contém o conteúdo do texto combinado de todos os elementos correspondentes. Este método funciona em documentos HTML e XML. Não pode ser usado em elementos de entrada. Para o texto do campo de entrada, use o atributo val.

.val()

Obter o conteúdo do atributo value do primeiro elemento correspondente

text () retorna o conteúdo do texto combinado de todos os elementos correspondentes (como p, div etc.) val () é usado para obter o valor de um elemento de entrada (como input, select etc.)

de acordo com a documentação oficial, o texto () não deve ser usado com elementos de entrada

val () é usado para buscar o valor de todos os tipos de entrada html como (caixa de seleção, texto etc.), onde o usuário tem uma opção para inserir 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> 

onde as text () são usadas para buscar o valor dos elementos html onde o usuário não irá interagir 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>

A função .val () retorna valor do elemento de entrada e a função .text () retorna valor de outros elementos que não a entrada. Também podemos passar argumentos de string para essas funções para definir o valor do elemento de chamada . O código abaixo mostra como definir valor para elementos DOM usando as funções .val () e .text ():

Peça 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 Part:

$(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;
})

Demo: http://jsfiddle.net/urhys9zj/6/