dez200922

John Marques

0

JQuery Attr e removeAttr, manipulando atributos dos elementos html

Bom dia pessoal,

vou falar um pouco sobre o método Attr do JQuery e logo depois colocarei um exemplo prático.
Esse metódo serve para Setar e Buscar propriedades de um elemento html.

jQuery.Attr

podemos setar o valor por propriedade ou passar um conjunto de propriedades para o elemento, o exemplo a seguir mostra como passar uma propriedade

// Aqui setamos o caminho do elemento img
$("img").attr('src','caminho/imagem.jpg');

Passando um conjunto de propriedades

// Setamos várias propriedades

$("img").attr({
src: 'caminho/imagem.jpg',
title:'titulo da imagem',
border: '0'
});

viu que legal, rs.

agora para retornamos um valor basta chama o metódo e a propriedade que quer, usando o exemplo vamos dar continuidade no exemplo abaixo

// retornando um valor
$('img').attr('src');

bem simples né?

jQuery.removeAttr

agora vamos aprender como remover uma propriedade, bem simples também, basta informar a propriedade que se deseja remover, segue exemplo.

// Removendo a propriedade title da img
$('img').removeAttr('title');

Habilitando e Desabilitando um campo com jQuery.attr e jQuery.removeAttr

Agora pessoal vamos usar um exemplo prático disso, vamos dizer que você tenha um formulário, e você queira habilitar ou desabilitar um campo. Como fariamos? :/
Não se preocupe é bem simples, até porque essa é a proposta da jQuery diferente do Mootools.

Ex.:

$(function(){
$("#btnHabDes").toggle(
function() {
// Desabilita o campo
$("#campo1").attr("disabled",true);
// atribui valor ao campo e botão
$("#campo1").val("Desabilitado");
// corresponde ao #btnHabDes
$(this).val("Habilitar");
},
function() {
// Habilita o campo, pois remove a propriedade disabled
$("#campo1").removeAttr("disabled");
// atribui valor ao campo e botão
$("#campo1").val("Habilitado");
// corresponde ao #btnHabDes
$(this).val("Desabilitar");
}
);
});

<input type="text" name="campo1" id="campo1" value="Habilitado" />
<input type="button" id="btnHabDes" name="btnHabDes" value="Desabilitar" />

copie o exemplo e veja como funciona, esse exemplo também é válido para a propriedade readonly e só substituir. ;D

Abraços,

John Marques

Gostou do artigo?! Então clique em um dos banners dos nossos anunciantes. =D