JQuery - Manipulação de Atributos

Manipulação de Atributos

Clique para Executar jQuery

Ao passar o mouse na imagem, o browser apresenta o valor do atributo title.
Nessa imagem Sistema Solar. Passe o mouse e confira. Obs. alt, title. src são atributos.

No Html:
<img src="/static/img/sistema-solar-dois.jpg" alt="Sistema Solar" title="Sistema Solar" />
<span>Executar jQuery</span>

No javaScript:
$(document).ready(function(){
$("span").click(function(){ //botão que dispara a execução das funções jQuery
});

Funções para Manipulação de Atributos

.attr();

Esta função define o atributo e recupera atributos de elementos Html. No exemplo, será resgatado o valor do atrributo title do elemento img. Para recuperar o elemento img, será usado o seletor img e para recuperar um determinado atributo a função attr, indicando o atributo a ser consultado. Por fim, uma janela de alerta apresenta o valor.

No javaScript:
$(document).ready(function(){
$("span").click(function(){
	alert($("img").attr("title"));
});
});
	Reultado: Sistema Solar

Recuperando o valor do Atributo

Nesse exemplo será recuperado o valor do atributo src e o alert apresentará a url da imagem.

No javaScript:
	$(document).ready(function(){
	$("span").click(function(){
		alert($("img").attr("title"));
    });
    });
Reultado:/static/img/sistema-solar-dois.jpg

Definindo outro Atributo

No exemplo abaixo, será apresentada outra imagem, ao clicar-se em Clique para Executar jQuery. Mas a primeira imagem não será substituída pela nova imagem.

   No javaScript:
	$(document).ready(function(){
	 $("span").click(function(){
		 $("img")
		.attr("src", "/static/img/lua.jpg")
		.attr("title", "Lua");
		 });
	});

Outra forma de Definir Atributos

Começa por definir pares de valores $("img").attr({}); No formato Gson.

No javaScript:
     $(document).ready(function(){
	$("span").click(function(){
		$("img").attr({
		src: "/static/img/lua.jpg",
		title: "Lua"
		 });
     });
     });

.removeAttr();

Função para remover atributos.

No javaScript:
	$(document).ready(function(){
	$("span").click(function(){
		$("img").removeAttr("src");
		$("img").removeAttr("src").removeAttr("title").removeAttr("alt");
		nessa declaração remove-se não só a imagem, mas também o título, e alt
		 });
	});

.addClass();

Esta função acrescenta uma classe a um elemento Html. Nesse exemplo foi adicionada uma moldura em torno da imagem. A classe css destaque, está escrita abaixo e deve ser colocada no top da página, mas a classe desta mesma página foi escrita em folha de estilo separada, como prescreve a boa prática de programação.

Colocar essa folha de estilo no cabeçalho, entre <head> e </head>
<head>
<style type="text/css">
.destaque{ border: 5px dashed white;}
span:hover{background:black; color: blue;}
span{font-size: 20px; color: brown; font-family:"lucinda grande",
"lucinda sans", verdana, sans-serif;}
</style>
</head>

No javaScript:
$(document).ready(function(){
$("span").click(function(){
$("img").addClass("destaque");
});
});

.removeClass();

Remover classe

.hasClass();

Permite descobrir se uma classe específica existe em um determinado elemento. Aqui está sendo adicionado dois alertas. Um antes de adicionar a classe destaque (que coloca a moldura), apresenta alert false e outro depois de acrescentar a classe destaque, alert true. Clique para executar jQuery.

    $(document).ready(function(){
	$("span").click(function(){
	alert($("img").hasClass("destaque"));
	$("img").addClass("destaque");
	alert($("img").hasClass("destaque"));
	});
	});

.toggleClass();

Alterna a inclusão ou exclusão de uma classe css em um elemento.

$(document).ready(function(){
$("span").click(function(){
alert($("img").toggleClass("destaque"));
});
});

Essas funções também são encontradas na documentação da jQuery em Attributes