Manipuladores de atributos no jQuery
O jQuery oferece 10 métodos que que estão na categoria de atributos, neste post vou mostrar como cada um deles funcionam, com um exemplo simples e pratico, os métodos que estão na categoria de atributos são:
O método addClass()
Ele serve para adicionar uma class aos elementos selecionados, ele não substitui as class atuais do elemento ele só incrementa mais uma ou varias class, veja como usar:
HTML
<a href="#">Acesse o site</a>
</pre> $(document).ready(function(){ $('a').addClass('link home teste'); }); <pre>
Resultado no HTML
<a href="#">Acesse o site</a>
Você pode adicionar quantas class precisar.
O método removeClass();
Ele serve para remover uma ou várias class dos elementos selecionados, veja como usar:
HTML
<a href="#">Acesse o site</a>
</pre> $(document).ready(function(){ $('a').removeClass('link teste'); }); <pre>
Resultado no HTML
<a href="#">Acesse o site</a>
O método hasClass();
Ele retorna true ou false, se o elemento possui aquela class ou não, veja um exemplos de como usar:
HTML
<a href="#">Acesse o site</a>
</pre> $(document).ready(function(){ var elem = $('a').hasClass('link'); if(elem){ alert('O elemento tem a class link'); } else { alert('O elemento não tem a class link'); } }); <pre>
Neste caso vai retornar false, por que o HTML em contexto não tem a class link
O método toggleClass();
É uma método muito bom, por exemplo se o elemento ter a class usada como parâmetro, ele vai retirar a class deste elemento, porém se o elemento não ter aquela determinada class, ele vai adiciona-la ao elemento, preste muita atenção no exemplos de como usar:
HTML
<a href="#" class="link home">Acesse o site</a> <a href="#" class="link">Acesse o site</a>
jQuery
$(document).ready(function(){ $('a').toggleClass('home'); });
Resultado no HTML
<a href="#" class="link">Acesse o site</a> <a href="#" class="link home">Acesse o site</a>
Repare como ele tirou a class do elemento que tinha a class, e adicionou a class ao elemento que não tinha a class.
O método attr();
Este método é onde você pode afetar exatamente todas os atributos que um elemento pode receber, ele serve tanto para setar um valor de um atributo quanto para retornar o valor usado em um atributo, veja como sar:
Para setar atributos
HTML
<a href="#">Acesse o site</a> <a href="#">Acesse o site</a>
jQuery
</pre> $(document).ready(function(){ // você pode afetar vários atributos com um objeto $('a').attr({ title : 'Titulo', 'class' : 'teste e tals' }); // ou você pode afetar apenas um atributo $('a').attr('title','titulo'); }); <pre>
Resultado no HTML
</pre> <a href="#" title="Titulo" class="teste e tals">Acesse o site</a> <a href="#" title="Titulo" class="teste e tals">Acesse o site</a> <pre>
Para retornar valores, basta você usar como parâmetro o nome do atributo que você quer saber o conteúdo, para retornar o valor de um atributo só é possível com um de cada vez, veja o exemplo:
HTML
</pre> <a href="#" title="Titulo">Acesse o site</a>
jQuery
</pre> $(document).ready(function(){ var title = $('a').attr('title'); // retorna 'Titulo' }); <pre>
O método removeAttr();
Este método serve para remover um atributo de uma seleção de elementos, veja como usar:
HTML
</pre> <a href="#" title="Titulo" class="link">Acesse o site</a> <a href="#" title="Titulo2" class="link2">Acesse o site</a>
jQuery
</pre> $(document).ready(function(){ $('a').removeAttr('title'); }); <pre>
Resultado no HTML
</pre> <a href="#" class="link">Acesse o site</a> <a href="#" class="link2">Acesse o site</a> <pre>
Este método atua exclusivamente no atributo value de formulários, com ele é possível setar e retornar o valor usado no value de um input, preste muita atenção neste exemplo de como usar:
HTML
</pre> <input type="text" /> &nbsp; <pre>
</pre> $(document).ready(function(){ $('input').val('Testo aqui'); });
Resultado no HTML
</pre> <input type="text" value="Texto aqui" />
HTML
<input type="text" value="Texto aqui" />
jQuery
</pre> $(document).ready(function(){ var elem = $('input').val(); // retorna 'Texto aqui' }); &nbsp; <pre>
Neste exemplo o conteúdo do atributo value é colocado na variável ‘elem’.
O método prop();
Este método assim como o attr(), afeta atributos, porém só atributos booleanos, atributos como por exemplo: contenteditable, checked, async, disabled entre muitos outros, veja um exemplo de uso:
HTML
</pre> <input id="radio" type="radio" checked="checked" /> <input id="text" type="text" /> &nbsp; <pre>
jQuery
</pre> $(document).ready(function(){ // retira o atributo checked $('#radio').prop('checked', false); &nbsp; // adiciona o atributo disabled $('#text').prop('disabled', true); }); &nbsp; <pre>
Repare no uso de true e false no final, true significa que eu estou ativando o atributo, false significa que eu estou desativando o atributo, neste exemplo o radio box fica desmarcado e o input text fica desabilitado.
Você também usar para saber se um atributo booleano esta sendo usado ou não no elemento, veja.
</pre> $(document).ready(function(){ var elem = $('input').prop('disabled'); }); &nbsp; <pre>
Neste exemplo caso o elemento input esteja com o atributo disabled a variável elem recebera o valor true, e caso o elemento input não esta com o atributo disabled a variável elem recebera o valor false.
Se quiser ler mais sobre este método acesse este post sobre o método prop() do jQuery
O método removeProp();
Ele serve para remover um atributo booleano, veja o exemplo:
HTML
</pre> <input id="radio" type="radio" checked="checked" /> &nbsp; <pre>
jQuery
</pre> $(document).ready(function(){ $('#radio').removeProp('checked'); }); &nbsp; <pre>
Neste exemplo o atributo checked é retirado do elemento dicando desmarcado.
O método html();
Este método não afeta especificamente os atributos de elementos, mas estava na categoria de atributos na documentação do jQuery, com este método é possível retornar todo o HTML que esta dentro de um elemento, ou setar um novo conteúdo para o elemento.
Veja como usar
HTML
</pre> <div> Meu <strong>nome</strong> é Ofelquis. </div> &nbsp; <pre>
jQuery
</pre> $(document).ready(function(){ $('div').html('O gato <em>pulou</em> no muro.'); }); &nbsp; <pre>
Dentro da tag div selecionada o conteúdo é completamente reescrito.
</pre> <div> O gato <em>pulou</em> no muro. </div>
Você também pode usar este método para retornar o conteúdo de um elemento, dessa forma.
</pre> $(document).ready(function(){ var elem = $('div').html(); });
Como eu não usei nenhum parâmetro ao método, ele vai apenas retornar todo o conteúdo que aquele elemento contém, e neste exemplo estou colocando o retorno dentro da variável ‘elem’.
Bom pessoal é isso, achei que seria bacana mostrar alguns métodos do jQuery aqui, se gostou comente, se não gostou comente, se tem dúvidas comente.