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

[sourcecode language=”html”]
<a href="#">Acesse o site</a>
[/sourcecode]

Resultado no HTML

[sourcecode language=”html”]
<a href="#">Acesse o site</a>
[/sourcecode]

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

[sourcecode language=”html”]
<a href="#">Acesse o site</a>
[/sourcecode]

Resultado no HTML

[sourcecode language=”html”]
<a href="#">Acesse o site</a>
[/sourcecode]

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

[sourcecode language=”html”]
<a href="#">Acesse o site</a>
[/sourcecode]

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

[sourcecode language=”html”]

<a href="#" class="link home">Acesse o site</a>

<a href="#" class="link">Acesse o site</a>

[/sourcecode]

jQuery

[sourcecode language=”javascript”]

$(document).ready(function(){

$(‘a’).toggleClass(‘home’);

});

[/sourcecode]

Resultado no HTML

[sourcecode language=”html”]

<a href="#" class="link">Acesse o site</a>

<a href="#" class="link home">Acesse o site</a>

[/sourcecode]

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

[sourcecode language=”html”]

<a href="#">Acesse o site</a>

<a href="#">Acesse o site</a>

[/sourcecode]

jQuery

[sourcecode language=”javascript”]

</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>
[/sourcecode]

Resultado no HTML

[sourcecode language=”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>
[/sourcecode]

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

[sourcecode language=”html”]</pre>
<a href="#" title="Titulo">Acesse o site</a>

[/sourcecode]

jQuery

[sourcecode language=”javascript”]</pre>
$(document).ready(function(){

var title = $(‘a’).attr(‘title’);

// retorna ‘Titulo’

});
<pre>
[/sourcecode]

O método removeAttr();

Este método serve para remover um atributo de uma seleção de elementos, veja como usar:

HTML

[sourcecode language=”html”]</pre>
<a href="#" title="Titulo" class="link">Acesse o site</a>

<a href="#" title="Titulo2" class="link2">Acesse o site</a>

[/sourcecode]

jQuery

[sourcecode language=”javascript”]</pre>
$(document).ready(function(){

$(‘a’).removeAttr(‘title’);

});
<pre>
[/sourcecode]

Resultado no HTML

[sourcecode language=”html”]</pre>
<a href="#" class="link">Acesse o site</a>

<a href="#" class="link2">Acesse o site</a>
<pre>
[/sourcecode]

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

[sourcecode language=”html”]</pre>
<input type="text" />

&nbsp;
<pre>
[/sourcecode]

[sourcecode language=”javascript”]</pre>
$(document).ready(function(){

$(‘input’).val(‘Testo aqui’);

});

[/sourcecode]

Resultado no HTML

[sourcecode language=”html”]</pre>
<input type="text" value="Texto aqui" />

[/sourcecode]

HTML

[sourcecode language=”html”]
<input type="text" value="Texto aqui" />
[/sourcecode]

jQuery

[sourcecode language=”javascript”]</pre>
$(document).ready(function(){

var elem = $(‘input’).val();

// retorna ‘Texto aqui’

});

&nbsp;
<pre>
[/sourcecode]

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

[sourcecode language=”html”]</pre>
<input id="radio" type="radio" checked="checked" />

<input id="text" type="text" />

&nbsp;
<pre>
[/sourcecode]

jQuery

[sourcecode language=”javascript”]</pre>
$(document).ready(function(){

// retira o atributo checked

$(‘#radio’).prop(‘checked’, false);

&nbsp;

// adiciona o atributo disabled

$(‘#text’).prop(‘disabled’, true);

});

&nbsp;
<pre>
[/sourcecode]

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.

[sourcecode language=”javascript”]</pre>
$(document).ready(function(){

var elem = $(‘input’).prop(‘disabled’);

});

&nbsp;
<pre>
[/sourcecode]

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

[sourcecode language=”html”]</pre>
<input id="radio" type="radio" checked="checked" />

&nbsp;
<pre>[/sourcecode]

jQuery

[sourcecode language=”javascript”]</pre>
$(document).ready(function(){

$(‘#radio’).removeProp(‘checked’);

});

&nbsp;
<pre>
[/sourcecode]

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

[sourcecode language=”html”]</pre>
<div>

Meu <strong>nome</strong> é Ofelquis.

</div>

&nbsp;
<pre>
[/sourcecode]

jQuery

[sourcecode language=”javascript”]</pre>
$(document).ready(function(){

$(‘div’).html(‘O gato <em>pulou</em> no muro.’);

});

&nbsp;
<pre>
[/sourcecode]

Dentro da tag div selecionada o conteúdo é completamente reescrito.

[sourcecode language=”html”]</pre>
<div>

O gato <em>pulou</em> no muro.

</div>

[/sourcecode]

Você também pode usar este método para retornar o conteúdo de um elemento, dessa forma.

[sourcecode language=”javascript”]</pre>
$(document).ready(function(){

var elem = $(‘div’).html();

});

[/sourcecode]

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.