Comparado ao Att, o Prop é novo em 1.6.1. Ambos são entendidos pelo significado chinês e são métodos para obter/definir atributos (atributos e propriedades). É apenas que o uso do método .Attr () na janela ou documento não pode ser executado normalmente antes do jQuery 1.6, porque não pode haver atributos na janela e no documento. Prop surgiu.
Como queremos saber a diferença entre eles, é melhor olhar para o código fonte deles e não ter medo do comprimento do código. Vamos apenas olhar as frases principais:
Att: function (elem, nome, valor, pass) {var ret, ganchos, notxml, ntype = elem.nodeType; // Não obtenha/defina os atributos no texto, comente e atributo nós if (! elem || ntype === 3 || ntype === 8 || ntype === 2) {return; } if (pass && jQuery.isfunction (jQuery.fn [nome])) {return jQuery (elem) [nome] (valor); } // fallback para prop quando os atributos não são suportados se (typeof elem.getAttribute === "indefinido") {return jquery.prop (elem, nome, valor); } Notxml = ntype! == 1 || ! jQuery.isxmldoc (elem); // Todos os atributos são minúsculos // pegue o gancho necessário se for definido se (Notxml) {name = name.tolowerCase (); ganchos = jQuery.attrhooks [nome] || (rboolean.test (nome)? BOOLHOOK: NodeHook); } if (value! == indefinido) {if (value === null) {jquery.removeattr (elem, nome); retornar; } else if (gancho && "set" em gancho && notxml && (ret = hooks.set (elem, valor, nome))! == indefinido) {return return; } else {elem.setAttribute (nome, valor + ""); valor de retorno; }} else if (gancho && "get" em ganchos && notxml && (ret = hooks.get (elem, nome))! == null) {return ret; } else {ret = elem.getAttribute (nome); // atributos inexistentes retornam nulo, normalizamos para return indefinido ret === null? indefinido: ret; }}Código do método de suporte (JQuery versão 1.8.3)
Prop: function (elem, nome, valor) {var ret, ganchos, notxml, ntype = elem.nodeType; // Não obtenha/defina propriedades no texto, comentário e atributo nós if (! elem || ntype === 3 || ntype === 8 || ntype === 2) {return; } Notxml = ntype! == 1 || ! jQuery.isxmldoc (elem); if (NOTXML) {// Corrija o nome e anexe o nome dos ganchos = jQuery.propfix [nome] || nome; ganchos = jQuery.prophooks [nome]; } if (value! == indefinido) {if (ganchos && "set" em ganchos && (ret = hooks.set (elem, valor, nome))! == indefinido) {return ret; } else {return (elem [nome] = value); }} else {if (gancho && "get" em ganchos && (ret = hooks.get (elem, nome))! == null) {return ret; } else {return elem [nome]; }}}No método Att, as duas linhas de código mais críticas, elem.setAttribute (nome, value + "") e ret = elem.getAttribute (nome), é óbvio que os métodos DOM API SetAttribute e GetAttribute operados pelos nós do elemento de atributo.
No método de suporte, as duas linhas de código mais críticas, retornar (elem [nome] = valor) e retornar elem [nome], você pode entendê -lo como document.getElementById (el) [nome] = valor, que é uma propriedade convertida em um objeto JS.
Como entendemos o princípio, vamos dar uma olhada em um exemplo:
<input type = "caixa de seleção" id = "test" abc = "111" />
$ (function () {el = $ ("#teste"); console.log (el.attr ("style")); // console indefinido.log (el.prop ("style")); // cssstyledecLaration objeto console.log (documentElementEdById ("teste).EL.ATTR ("STILE") Saídas indefinidas porque o att é o valor do nó do atributo de objeto obtido. Obviamente, não há nó de atributo no momento, portanto a saída natural é indefinida.
O El.Prop ("Style") produz o objeto CSStyleDeclaration. Para um objeto DOM, ele possui o atributo de objeto de estilo nativo, para que o objeto de estilo seja emitido.
Quanto ao document.getElementById ("teste"). O estilo é o mesmo que o acima
Próximo olhar:
el.attr ("abc", "111") console.log (el.attr ("abc")); // 111 console.log (el.prop ("abc")); //indefinidoPrimeiro, use o método Att para adicionar o atributo ABC Node a esse objeto, com um valor de 111, você pode ver que a estrutura do HTML também mudou.
A saída do el.attr ("ABC") é 111, que é normal
El.Prop ("ABC") Saída indefinida, porque o ABC está nesse nó de propriedade, por isso não pode ser recuperado através do Prop.
el.prop ("ABC", "222"); console.log (el.attr ("abc")); // 111 console.log (el.prop ("abc")); // 222Em seguida, definimos o atributo ABC para esse objeto usando o método de suporte, com um valor de 222. Você pode ver que a estrutura do HTML não mudou. Os resultados da saída não serão explicados.
O exposto acima explicou o princípio claramente e você pode entender o que se usa.
É mencionado que, quando você encontra propriedades como verificadas, selecionadas, readonly e desativadas, é obviamente melhor usar o método de suporte, como o seguinte:
<entrada de entrada = "caixa de seleção" id = "test" checked = "checked" />
console.log (el.attr ("verificado")); // console verificado.log (el.prop ("verificado")); // True Console.log (el.attr ("desativado")); // console indefinido (el.prop ("desativado")); //falsoObviamente, o valor booleano torna o próximo processamento mais razoável que o valor da string.
Ps. Se você tem a limpeza do desempenho do JS, obviamente o desempenho do suporte é maior, porque o Att precisa acessar os nós de atributo DOM, o acesso a DOM é o mais demorado. Esta situação se aplica a várias opções e cenários não selecionados.
Todo mundo sabe que alguns navegadores precisam apenas escrever desativados e verificados, enquanto outros precisam escrever desabilitados = "desativados", verificado = "verificado". Por exemplo, ao usar o att ("verificado") para obter a propriedade verificada de uma caixa de seleção, você pode obter o valor ao selecioná -lo. O valor é "verificado", mas se você não o selecionar, ele será indefinido.
O JQ fornece um novo método "Prop" para obter essas propriedades, que é resolver esse problema. No passado, usamos o Att para obter a propriedade verificada e devolvido "verificado" e "", mas agora usamos o método de suporte para obter as propriedades e retornar verdadeiro e falso.
Então, quando usar o att () e quando usar o prop ()?
1. Adicione o nome do atributo. Este atributo entrará em vigor. Você deve usar prop ();
2. Existem duas propriedades que têm um uso verdadeiro e falso prop ();
3. Use att () para outros;
Todos devem prestar atenção a isso ao atualizar o jQuery no projeto!
A seguir, são apresentadas as sugestões oficiais para o uso de att () e prop ():
A seguir, são apresentadas as sugestões oficiais para o uso de att () e prop ():