O JQuery possui métodos para que você possa manipular elementos e seus atributos de varias maneiras diferentes, permitindo que você adicione, copie ou remova atributos dos elementos.
- addClass() – Adiciona classes especificadas nos elementos designados.
- removeClass() – Remove classes especificadas nos elementos designados.
Você pode saber mais sobre outros métodos de manipulação de atributos no seguinte link:
Manipulation: http://api.jquery.com/category/manipulation/
JQuery – Manipulação
Exemplo:
Neste exemplo utilizamos o recurso de manipulação para inserir e remover uma classe CSS nos atributos da imagem.
JQuery
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Desenvolvimento Aberto</title>
<style type="text/css">
.imagem {
border-style: dashed;
border-width: 10px;
}
</style>
<!-- Está é uma instalação do JQuery, você apenas precisa apontar
para o respectivo script da versão que você deseja utilizar -->
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>
<!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
Todo o script roda no evento equivalent ao OnLoad da pagina html-->
<script>
// Declara eventos de clique
$( document ).ready(function() {
// Manipulação de atributos
$( "#bnt01" ).click(function() {
$("img").addClass("imagem");
});
$( "#bnt02" ).click(function() {
$("img").removeClass("imagem");
});
});
</script>
</head>
<body>
<h1>Desenvolvimento Aberto - Manipulação de Atributos</h1>
<img src="Imagem/tecnologia.jpg" alt="tecnologia">
<p>
Escolha uma opção:
</p>
<button id="bnt01">Adicionar Classe CSS</button>
<button id="bnt02">Remover Classe CSS</button>
</body>
</html>
Ricardo Mantovani
Desenvolvimento Código Aberto 