.prop () vs .attr ()

Portanto, o jQuery 1.6 tem a nova função prop().

$(selector).click(function(){
    //instead of:
    this.getAttribute('style');
    //do i use:
    $(this).prop('style');
    //or:
    $(this).attr('style');
})

ou, nesse caso, eles fazem a mesma coisa?

E se eu não tem que passar a usar prop(), todas as antigas attr()chamadas vai quebrar se eu mudar para 1.6?

ATUALIZAR

selector = '#id'

$(selector).click(function() {
    //instead of:
    var getAtt = this.getAttribute('style');
    //do i use:
    var thisProp = $(this).prop('style');
    //or:
    var thisAttr = $(this).attr('style');

    console.log(getAtt, thisProp, thisAttr);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<div id='id' style="color: red;background: orange;">test</div>

(veja também este violino: http://jsfiddle.net/maniator/JpUF2/ )

O console registra getAttributecomo uma sequência e attrcomo uma sequência, mas propcomo como CSSStyleDeclaration, por quê? E como isso afeta minha codificação no futuro?

Atualização 1 de novembro de 2012

Minha resposta original se aplica especificamente ao jQuery 1.6. Meu conselho permanece o mesmo, mas o jQuery 1.6.1 mudou um pouco as coisas: diante da pilha prevista de sites quebrados, a equipe do jQuery voltou attr()a algo próximo (mas não exatamente o mesmo) do antigo comportamento dos atributos booleanos . John Resig também escreveu um blog sobre isso . Eu posso ver a dificuldade em que eles estavam, mas ainda discordo de sua recomendação de preferir attr().

Resposta original

Se você já usou o jQuery e não o DOM diretamente, isso pode ser uma mudança confusa, embora seja definitivamente uma melhoria conceitual. Não é tão bom para os bazilhões de sites que usam jQuery que serão interrompidos como resultado dessa alteração.

Vou resumir os principais problemas:

• Você geralmente quer prop()e não attr().
• Na maioria dos casos, prop()faz o que attr()costumava fazer. Substituir as chamadas attr()por prop()no seu código geralmente funcionará.
• Geralmente, as propriedades são mais simples de lidar do que os atributos. Um valor de atributo pode ser apenas uma sequência, enquanto uma propriedade pode ser de qualquer tipo. Por exemplo, a checkedpropriedade é um booleano, a stylepropriedade é um objeto com propriedades individuais para cada estilo, a sizepropriedade é um número.
• Onde existe uma propriedade e um atributo com o mesmo nome, geralmente atualizar um atualizará o outro, mas esse não é o caso de determinados atributos de entradas, como valuee checked: para esses atributos, a propriedade sempre representa o estado atual enquanto o O atributo (exceto nas versões antigas do IE) corresponde ao valor / verificação padrão da entrada (refletida na propriedade defaultValue/ defaultChecked).
• Essa alteração remove parte da camada do jQuery mágico preso na frente de atributos e propriedades, o que significa que os desenvolvedores do jQuery terão que aprender um pouco sobre a diferença entre propriedades e atributos. Isto é uma coisa boa.

Se você é um desenvolvedor de jQuery e está confuso com toda essa empresa sobre propriedades e atributos, precisa dar um passo atrás e aprender um pouco sobre isso, pois o jQuery não está mais tentando se proteger dessas coisas. Para a palavra autorizada, mas um pouco seca sobre o assunto, há as especificações: DOM4 , HTML DOM , DOM Nível 2 , DOM Nível 3 . A documentação do DOM do Mozilla é válida para a maioria dos navegadores modernos e é mais fácil de ler do que as especificações, portanto, você pode achar útil a referência do DOM . Há uma seção sobre propriedades do elemento .

Como um exemplo de como as propriedades são mais simples de lidar do que os atributos, considere uma caixa de seleção inicialmente marcada. Aqui estão duas partes possíveis de HTML válido para fazer isso:

<input id="cb" type="checkbox" checked>
<input id="cb" type="checkbox" checked="checked">

Então, como você descobre se a caixa de seleção está marcada com jQuery? Observe o Stack Overflow e, normalmente, você encontrará as seguintes sugestões:

• if ( $("#cb").attr("checked") === true ) {...}
• if ( $("#cb").attr("checked") == "checked" ) {...}
• if ( $("#cb").is(":checked") ) {...}

Essa é realmente a coisa mais simples do mundo a ver com a checkedpropriedade booleana, que existe e funciona perfeitamente em todos os principais navegadores de scripts desde 1995:

if (document.getElementById("cb").checked) {...}

A propriedade também torna a seleção ou desmarcação da caixa de seleção trivial:

document.getElementById("cb").checked = false

No jQuery 1.6, isso se torna inequivocamente

$("#cb").prop("checked", false)

A idéia de usar o checkedatributo para criar scripts para uma caixa de seleção é inútil e desnecessária. A propriedade é o que você precisa.

• Não é óbvio qual a maneira correta de marcar ou desmarcar a caixa de seleção está usando o checkedatributo
• O valor do atributo reflete o padrão, e não o estado visível atual (exceto em algumas versões mais antigas do IE, tornando as coisas ainda mais difíceis). O atributo não informa nada sobre se a caixa de seleção na página está marcada. Veja http://jsfiddle.net/VktA6/49/ .

Acho que o Tim falou muito bem , mas vamos voltar atrás:

Um elemento DOM é um objeto, uma coisa na memória. Como a maioria dos objetos no OOP, ele possui propriedades . Além disso, também possui um mapa dos atributos definidos no elemento (geralmente provenientes da marcação que o navegador leu para criar o elemento). Algumas das propriedades do elemento obtêm sua inicial valores de atributos com os mesmos nomes ou nomes semelhantes ( valueobtém seu valor inicial do atributo "value"; hrefobtém seu valor inicial do atributo "href", mas não é exatamente o mesmo valor; classNamedo atributo "class"). Outras propriedades obtêm seus valores iniciais de outras maneiras: Por exemplo, a parentNodepropriedade obtém seu valor com base no que é seu elemento pai;style propriedade, tenha ou não um atributo "estilo".

Vamos considerar essa âncora em uma página em http://example.com/testing.html:

<a href='foo.html' class='test one' name='fooAnchor' id='fooAnchor'>Hi</a>

Alguma arte ASCII gratuita (e deixando de fora muitas coisas):

+ −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
| HTMLAnchorElement |
+ −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
| href: "http://example.com/foo.html" |
| nome: "fooAnchor" |
| id: "fooAnchor" |
| className: "test one" |
| atributos: |
| href: "foo.html" |
| nome: "fooAnchor" |
| id: "fooAnchor" |
| classe: "teste um" |
+ −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−

Observe que as propriedades e atributos são distintos.

Agora, embora sejam distintos, porque tudo isso evoluiu ao invés de ser projetado desde o início, várias propriedades retornam ao atributo do qual derivaram se você as definir. Mas nem todos o fazem, e como você pode ver de hrefcima, o mapeamento nem sempre é um "repasse de valor" direto, às vezes há interpretação envolvida.

Quando falo sobre propriedades como propriedades de um objeto, não estou falando em abstrato. Aqui está um código não-jQuery:

var link = document.getElementById('fooAnchor');
alert(link.href);                 // alerts "http://example.com/foo.html"
alert(link.getAttribute("href")); // alerts "foo.html"

(Esses valores são como na maioria dos navegadores; há algumas variações.)

O linkobjeto é real e você pode ver que há uma distinção real entre acessar uma propriedade e acessar um atributo .

Como Tim disse, na grande maioria das vezes, queremos trabalhar com propriedades. Parcialmente, isso ocorre porque seus valores (até mesmo seus nomes) tendem a ser mais consistentes entre os navegadores. Na maioria das vezes, queremos trabalhar com atributos quando não há propriedade relacionada a ele (atributos personalizados) ou quando sabemos que, para esse atributo específico, o atributo e a propriedade não são 1: 1 (como emhref e "href" acima) .

As propriedades padrão estão dispostas nas várias especificações do DOM:

• HTML DOM2 (amplamente obsoleto, consulte a especificação HTML )
• Núcleo DOM2 (obsoleto)
• DOM3 Core (obsoleto)
• DOM4

Essas especificações têm excelentes índices e eu recomendo manter os links à mão; Eu os uso o tempo todo.

Os atributos personalizados incluiriam, por exemplo, quaisquer data-xyzatributos que você possa colocar em elementos para fornecer metadados ao seu código (agora que é válido a partir do HTML5, desde que você mantenha o data-prefixo). (As versões recentes do jQuery dão acesso a data-xyzelementos por meio da datafunção, mas essa função não é apenas um acessador de data-xyzatributos [ele faz mais e menos que isso]; a menos que você realmente precise de seus recursos, eu usaria a attrfunção para interagir com data-xyzatributo.)

A attrfunção costumava ter uma lógica complicada em torno de obter o que eles pensavam que você queria, em vez de literalmente obter o atributo. Confundiu os conceitos. Mover-se para prope attrpretendia desconstruí-los. Resumidamente em v1.6.0 jQuery foi longe demais a esse respeito, mas a funcionalidade foi rapidamente adicionado de volta para attrlidar com as situações comuns onde as pessoas usam attrquando tecnicamente eles devem usar prop.

Essa mudança foi um longo tempo para o jQuery. Durante anos, eles se contentaram com uma função chamada attr()que recuperou principalmente as propriedades do DOM, e não o resultado que você esperaria do nome. A segregação attr()e prop()deve ajudar a aliviar parte da confusão entre atributos HTML e propriedades DOM. $.fn.prop()agarra a propriedade DOM especificada, enquanto $.fn.attr()agarra o atributo HTML especificado.

Para entender completamente como eles funcionam, aqui está uma explicação detalhada sobre a diferença entre atributos HTML e propriedades DOM:

Atributos HTML

Sintaxe:

<body onload="foo()">

Objetivo: Permite que a marcação tenha dados associados a ela para eventos, renderização e outros fins.

Visualização: O atributo de classe é mostrado aqui no corpo. É acessível através do seguinte código:

var attr;
attr = document.body.getAttribute("class");
//IE 8 Quirks and below
attr = document.body.getAttribute("className");

Os atributos são retornados no formato de sequência e podem ser inconsistentes de navegador para navegador. No entanto, eles podem ser vitais em algumas situações. Como exemplificado acima, o IE 8 Quirks Mode (e abaixo) espera o nome de uma propriedade DOM em get / set / removeAttribute em vez do nome do atributo. Essa é uma das muitas razões pelas quais é importante saber a diferença.

Propriedades do DOM

Sintaxe:

document.body.onload = foo;

Objetivo: fornece acesso às propriedades que pertencem aos nós do elemento. Essas propriedades são semelhantes aos atributos, mas são acessíveis apenas por JavaScript. Essa é uma diferença importante que ajuda a esclarecer o papel das propriedades do DOM. Observe que os atributos são completamente diferentes das propriedades , pois essa atribuição do manipulador de eventos é inútil e não receberá o evento (o corpo não possui um evento onload, apenas um atributo onload).

Visualização:

Aqui, você verá uma lista de propriedades na guia "DOM" no Firebug. Essas são propriedades do DOM. Você notará imediatamente alguns deles, pois você os teria usado antes sem saber. Seus valores são o que você receberá por meio de JavaScript.

Documentação

• JavaScript: O Guia Definitivo de David Flanagan
• Atributos HTML, Mozilla Dev Center
• Propriedades do elemento DOM, Mozilla Dev Center

Exemplo

HTML: <textarea id="test" value="foo"></textarea>

JavaScript: alert($('#test').attr('value'));

Nas versões anteriores do jQuery, isso retorna uma string vazia. Em 1.6, ele retorna o valor adequado foo,.

Sem ter examinado o novo código para qualquer função, posso dizer com confiança que a confusão tem mais a ver com a diferença entre atributos HTML e propriedades DOM, do que com o próprio código. Felizmente, isso esclareceu algumas coisas para você.

-Matt

Uma propriedade está no DOM; um atributo está no HTML que é analisado no DOM.

Maiores detalhes

Se você alterar um atributo, a alteração será refletida no DOM (às vezes com um nome diferente).

Exemplo: Alterar o classatributo de uma tag altera a classNamepropriedade dessa tag no DOM. Se você não tiver nenhum atributo em uma tag, ainda terá a propriedade DOM correspondente com um valor vazio ou padrão.

Exemplo: enquanto sua tag não tem classatributo, a propriedade DOM classNameexiste com um valor de sequência vazio.

editar

Se você alterar um, o outro será alterado por um controlador e vice-versa. Este controlador não está no jQuery, mas no código nativo do navegador.

É apenas a distinção entre atributos HTML e objetos DOM que causa confusão. Para aqueles que se sentem à vontade atuando nas propriedades nativas dos elementos DOM, como this.src this.value this.checkedetc,.prop é uma recepção calorosa à família. Para outros, é apenas uma camada adicional de confusão. Vamos esclarecer isso.

A maneira mais fácil de ver a diferença entre .attre .propé o seguinte exemplo:

<input blah="hello">

1. $('input').attr('blah'): retorna 'hello'conforme o esperado. Não há surpresas aqui.
2. $('input').prop('blah'): retorna undefined- porque está tentando fazer [HTMLInputElement].blah- e não existe essa propriedade nesse objeto DOM. Existe apenas no escopo como um atributo desse elemento, ou seja,[HTMLInputElement].getAttribute('blah')

Agora, mudamos algumas coisas assim:

$('input').attr('blah', 'apple');
$('input').prop('blah', 'pear');

1. $('input').attr('blah'): retorna 'apple'eh? Por que não "pêra", como foi definido por último nesse elemento. Como a propriedade foi alterada no atributo de entrada, não no próprio elemento de entrada do DOM - eles basicamente quase funcionam independentemente um do outro.
2. $('input').prop('blah'): retorna 'pear'

O que você realmente precisa ter cuidado é simplesmente não misturar o uso deles para a mesma propriedade em todo o aplicativo pelo motivo acima.

Veja um violino demonstrando a diferença: http://jsfiddle.net/garreh/uLQXc/

.attr vs .prop :

Rodada 1: estilo

<input style="font:arial;"/>

• .attr('style') - retorna estilos embutidos para o elemento correspondente, ou seja "font:arial;"
• .prop('style') - retorna um objeto de declaração de estilo, ou seja CSSStyleDeclaration

Rodada 2: valor

<input value="hello" type="text"/>   

$('input').prop('value', 'i changed the value');

• .attr('value') - retorna 'hello' *
• .prop('value') - retorna 'i changed the value'

* Nota: o jQuery, por esse motivo, possui um .val()método que internamente é equivalente a.prop('value')

TL; DR

Use em prop()excesso attr()na maioria dos casos.

Uma propriedade é o estado atual do elemento de entrada. Um atributo é o valor padrão.

Uma propriedade pode conter itens de diferentes tipos. Um atributo pode conter apenas cadeias

Verificação suja

Este conceito fornece um exemplo em que a diferença é observável: http://www.w3.org/TR/html5/forms.html#concept-input-checked-dirty

Experimente:

• Clique no botão. Ambas as caixas de seleção foram marcadas.
• desmarque as duas caixas de seleção.
• clique no botão novamente. Somente a propcaixa de seleção foi marcada. BANG!

$('button').on('click', function() {
  $('#attr').attr('checked', 'checked')
  $('#prop').prop('checked', true)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>attr <input id="attr" type="checkbox"></label>
<label>prop <input id="prop" type="checkbox"></label>
<button type="button">Set checked attr and prop.</button>

Para alguns atributos como disabledon button, adicionar ou remover o atributo content disabled="disabled"sempre alterna a propriedade (chamada atributo IDL em HTML5) porque http://www.w3.org/TR/html5/forms.html#attr-fe-disabled diz:

O atributo IDL desativado deve refletir o atributo de conteúdo desativado.

portanto, você pode se safar, embora seja feio, pois modifica o HTML sem necessidade.

Para outros atributos como checked="checked"on input type="checkbox", as coisas quebram porque, quando você clica nele, ele fica sujo e, em seguida, adicionando ou removendo o checked="checked"atributo content não alterna mais a verificação .

É por isso que você deve usar principalmente .prop, pois afeta diretamente a propriedade efetiva, em vez de depender de efeitos colaterais complexos da modificação do HTML.

Tudo está no documento :

A diferença entre atributos e propriedades pode ser importante em situações específicas. Antes do jQuery 1.6, o método .attr () às vezes levava em consideração os valores das propriedades ao recuperar alguns atributos, o que poderia causar comportamento inconsistente. A partir do jQuery 1.6, o método .prop () fornece uma maneira de recuperar explicitamente os valores das propriedades, enquanto o .attr () recupera os atributos.

Então use prop!

atributos estão no seu documento / arquivo de texto HTML (== imagine que este é o resultado da sua marcação html analisada), enquanto as
propriedades estão na árvore HTML DOM (== basicamente uma propriedade real de algum objeto no sentido JS).

É importante ressaltar que muitos deles são sincronizados (se você atualizar a classpropriedade, o classatributo em html também será atualizado; caso contrário). Mas alguns atributos podem ser sincronizados com propriedades inesperadas - por exemplo, atributo checked corresponde à propriedade defaultChecked , para que

• marcar manualmente uma caixa de seleção mudará de .prop('checked')valor, mas não mudará .attr('checked')e.prop('defaultChecked') valores
• A configuração $('#input').prop('defaultChecked', true)também será alterada .attr('checked'), mas isso não será visível em um elemento.

A regra prática é : o .prop()método deve ser usado para atributos / propriedades booleanos e para propriedades que não existem em html (como window.location). Todos os outros atributos (aqueles que você pode ver no html) podem e devem continuar sendo manipulados com o .attr() método ( http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/ )

E aqui está uma tabela que mostra onde .prop()é preferido (mesmo que .attr()ainda possa ser usado).

Por que você às vezes deseja usar .prop () em vez de .attr (), onde este último é oficialmente recomendado?

1. .prop()pode retornar qualquer tipo - string, número inteiro, booleano; while .attr()sempre retorna uma string.
2. .prop()é dito ser cerca de 2,5 vezes mais rápido que .attr().

.attr():

• Obtenha o valor de um atributo para o primeiro elemento no conjunto de elementos correspondentes.
• Fornece o valor do elemento, conforme definido no html no carregamento da página

.prop():

• Obtenha o valor de uma propriedade para o primeiro elemento no conjunto de elementos correspondentes.
• Fornece os valores atualizados dos elementos que são modificados via javascript / jquery

Normalmente você vai querer usar propriedades. Use atributos apenas para:

1. Obtendo um atributo HTML personalizado (já que não é sincronizado com uma propriedade DOM).
2. Obter um atributo HTML que não seja sincronizado com uma propriedade DOM, por exemplo, obter o "valor original" de um atributo HTML padrão, como <input value="abc">.

attributes -> HTML

properties -> DOM

Antes do jQuery 1.6, o attr()método algumas vezes considerava os valores das propriedades ao recuperar atributos, isso causava um comportamento inconsistente.

A introdução do prop()método fornece uma maneira de recuperar explicitamente os valores das propriedades, enquanto .attr()recupera atributos.

Os documentos:

jQuery.attr() Obtenha o valor de um atributo para o primeiro elemento no conjunto de elementos correspondentes.

jQuery.prop() Obtenha o valor de uma propriedade para o primeiro elemento no conjunto de elementos correspondentes.

Lembrete delicado sobre o uso prop(), exemplo:

if ($("#checkbox1").prop('checked')) {
    isDelete = 1;
} else {
    isDelete = 0;
}

A função acima é usada para verificar se a caixa de seleção1 está marcada ou não, se marcada: return 1; caso contrário: retorne 0. Função prop () usada aqui como uma função GET.

if ($("#checkbox1").prop('checked', true)) {
    isDelete = 1;
} else {
    isDelete = 0;
}

A função acima é usada para definir a caixa de seleção1 a ser marcada e retornar SEMPRE 1. Agora, a função prop () é usada como uma função SET.

Não estrague tudo.

P / S: Ao verificar a propriedade Image src . Se o src estiver vazio, prop retornará a URL atual da página (incorreta) e attr retornará uma string vazia (direita).

Uma coisa .attr()pode fazer isso .prop()não pode: afetar seletores CSS

Aqui está um problema que não vi nas outras respostas.

Seletor CSS [name=value]

• responderá a .attr('name', 'value')
• mas nem sempre para .prop('name', 'value')

.prop() afeta apenas alguns seletores de atributos

• input[name] (obrigado @TimDown )

.attr() afeta todos os seletores de atributos

• input[value]
• input[naame]
• span[name]
• input[data-custom-attribute](nenhum deles .data('custom-attribute')afetará esse seletor)

1) Uma propriedade está no DOM; um atributo está no HTML que é analisado no DOM.

2) $ (elem) .attr ("marcado") (1.6.1+) "marcado" (String) Mudará com o estado da caixa de seleção

3) $ (elem) .attr ("marcado") (pré-1,6) true (Boolean) Alterado com o estado da caixa de seleção

• Principalmente, queremos usar o objeto DOM em vez de atributos personalizados, como data-img, data-xyz.

• Também algumas das diferenças ao acessar checkboxvalor e href com attr()e prop()como coisa mudam com a saída DOM com prop()o link completo de origine o Booleanvalor para a caixa de seleção (pre-1.6)

• Só podemos acessar elementos DOM com propoutros, então ele forneceundefined

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>prop demo</title>
  <style>
    p {
      margin: 20px 0 0;
    }
    b {
      color: blue;
    }
  </style>

</head>

<body>

  <input id="check1" type="checkbox" checked="checked">
  <label for="check1">Check me</label>
  <p></p>

  <script>
    $("input").change(function() {
      var $input = $(this);
      $("p").html(
        ".attr( \"checked\" ): <b>" + $input.attr("checked") + "</b><br>" +
        ".prop( \"checked\" ): <b>" + $input.prop("checked") + "</b><br>" +
        ".is( \":checked\" ): <b>" + $input.is(":checked")) + "</b>";
    }).change();
  </script>

</body>

</html>

Existem mais algumas considerações em prop () vs attr ():

• selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked e defaultSelected..etc devem ser recuperados e configurados com o método .prop (). Estes não têm atributos correspondentes e são apenas propriedades.

• Caixa de seleção Para tipo de entrada

     .attr('checked') //returns  checked
     .prop('checked') //returns  true
     .is(':checked') //returns true

• O método prop retorna o valor booleano para verificado, selecionado, desativado, readOnly..etc while attr retorna a sequência definida. Portanto, você pode usar diretamente .prop ('marcado') na condição if.

• .attr () chama .prop () internamente, portanto o método .attr () será um pouco mais lento do que acessá-los diretamente por meio de .prop ().

A resposta de Gary Hole é muito relevante para resolver o problema se o código for escrito dessa maneira

obj.prop("style","border:1px red solid;")

Como a função prop retorna o CSSStyleDeclarationobjeto, o código acima não funcionará corretamente em alguns navegadores (testado comIE8 with Chrome Frame Plugin no meu caso).

Assim, alterando-o para o seguinte código

obj.prop("style").cssText = "border:1px red solid;"

resolveu o problema.