12

Essas duas funções do jQuery fazem exatamente a mesma coisa? Ou há alguma diferença entre as mesmas.

É informado que a função .prop() veio a partir do jQuery 1.6

Ela veio para substituir .attr() ? Ou as duas estão presentes(e usadas) hoje na biblioteca tendo as mesmas funcionalidades para quem as deseja usar?

2

3 Respostas 3

13

Ambos perfazem as mesmas funções.

A diferença é que o método .prop() está no DOM e o método .attr() está no HTML.

Um exemplo, mais claro e genérico, é quando tenta acessar um atributo inexistente num elemento, poderá acessar esse atributo no DOM (usando o .prop()), porém, esse atributo está sempre vazio por padrão. Se acessa pelo método .attr(), retorna como undefined.

Exemplo:

v = $("#foo").prop("class");
console.debug("prop retorna vazio: "+v);
v = $("#foo").attr("class");
console.debug("attr retorna indefinido: "+v);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">bar</div>

Veja o resultado pelo console no developer tools. No chrome, pressione Ctrl+Shift+I e clique na guia "console".

Resultará nisso:

   prop retorna vazio: 
   attr retorna indefinido: undefined
0
6

Depende da situação, na verdade o .prop() trás o valor, literalmente e o .attr() o conteúdo, por exemplo:

 <input type="checkbox" checked="checked"/>
$('input').prop('checked'); //Retorna true
$('input').attr('checked'); //Retorna checked

Na página do jquery isso é explicado com mais detalhes(inglês). http://api.jquery.com/prop/

3
  • hum... interessante, eu só usava attr(), não sabia o que o prop() fazia... Você disse que depende da situação, pode haver algum caso em que os dois farão a mesma coisa?
    – DiChrist
    2/03/2016 às 17:43
  • 1
    Na verdade não é que faça a mesma coisa, mas o resultado é o mesmo, quando você precisa do "value" de um elemento por exemplo... 2/03/2016 às 17:48
  • 1
    Ótimo exemplo. O .prop() busca pelo DOM, e para o DOM, o checked é um booleano. Por isso retorna true ou false. O .attr() vai pelo HTML e retorna o conteúdo, no caso, retorna "checked" como uma string. Enfim, fazem praticamente as mesmas coisas com pequenas diferenças. A maior diferença que é bem clara é, um atua no DOM e outro no HTML. 2/03/2016 às 18:18
0

1º) ATRIBUTO - Quando você escreve o HTML, chamamos de atributo do HTML

HTML
<input type="checkbox" />

    type é o atributo      "checkbox" é o conteúdo 

    jquery pegando o atributo
        $('input').attr('type'); //retorna 'checkbox'
        $('input').attr('checked'); //retorna 'undefined'(porque você não
                                    //digitou o atributo checked = "checked"  no input, 
                                    //então ele não existe lá)   

2º) PROPRIEDADE - Quando você chama o objeto input, encontram-se as propriedades

HTML
<input type="checkbox" />

    type é o atributo      "checkbox" é o conteúdo 


    a) Mostrando o objeto input com jquery    

        console.log($("input"));
            quando você fizer este console verá que muitas propriedades aparecerão, 
            porem vou mostrar somente duas no exemplo abaixo 

            OBJETO
                input
                   type   : "checkbox", (type    é a propriedade - "checkbox" é o valor)
                   checked: false       (checked é a propriedade - false      é o valor)

    b) Jquery pegando a propriedade
        $('input').prop('type');    //retorna o valor 'checkbox'
        $('input').prop('checked'); //retorna o valor 'false'

RESUMO

        ATRIBUTO    .attr() você pega da escrita HTML <input type="checkbox" />
        PROPRIEDADE .prop() você pega do OBJETO input

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .