Introdução ao jQuery
2.4 Modificando o conteúdo
<script>
$(document).ready(function(){
$("#photo").mouseover(function(){
$(this).attr("width",650);
});
$("#photo").mouseout(function(){
$(this).attr("width",620);
});
});
</script>
2.4 Modificando o conteúdo
As funções text(), html() e val() permitem obter e alterar o conteúdo de um elemento. A seguir veremos a diferença entre cada um.
Função text()
Esta função permite pegar o texto dentro de uma tag ou colocar um outro texto dentro da mesma. Abaixo temos um exemplo de uma função que copia o texto do segundo parágrafo para o primeiro. Veja que o comando $("#p2").text() usa a função text() sem passar nenhum parâmetro. Quando não passamos parâmetro, estamos dizendo ao jQuery que queremos que ele retorne o conteúdo daquele elemento. Logo na sequência, o conteúdo de p2 é salvo na variável p2Texto. Na próxima linha, $("#p1").text(p2Texto) , estamos usando a mesma função text(), mas agora passando um parâmetro. Aqui a função text() se comporta de maneira diferente, pois quando definimos um parâmetro o jQuery entende que desejamos alterar o conteúdo do elemento para aquele especificado no argumento do método. Então é nessa linha que o conteúdo de p2 é copiado para p1.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8"/>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#copiar").click(function(){
// Salva conteúdo de p2 em uma variavel:
var p2Texto = $("#p2").text();
// Atribui a p1 o conteúdo de p2:
$("#p1").text(p2Texto);
});
});
</script>
</head>
<body>
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.</p>
<button id="copiar">Copy p2 -> p1</button>
<p id="p2">Duis <b>aute</b> irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</body>
</html>
Porém, preste atenção no resultado final dessa cópia. É possível afirmar que o método copiou fielmente o conteúdo? Se observarmos bem, pode-se ver que em p2 temos uma palavra em negrito (aute). Quando o conteúdo é copiado, a palavra em negrito, ou melhor, a tag <b> não é copiada, apenas o seu texto. Essa é a principal característica da função text(), copiar apenas o texto, retirando todo o código html. Se você precisa copiar o código HTML também, precisamos usar a função html() descrita a seguir.
Função html()
Similar a função text(), a função html() permite copiar tanto o texto contido dentro da tag como também todo o código html. No exemplo a seguir, o conteúdo do segundo parágrafo é copiado para o primeiro parágrafo, substituindo seu conteúdo original.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8"/>
<title></title>
<style>
b{color:red;}
i{color:blue;}
</style>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#copiar").click(function(){
var p2_conteudo = $("#p2").html();
$("#p1").html(p2_conteudo);
});
});
</script>
</head>
<body>
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
<button id="copiar">Copy p2 -> p1</button>
<p id="p2">Duis <b>aute</b> irure <i>dolor</i> in reprehenderit
in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.</p>
</body>
</html>
Nesse exemplo, o conteúdo de p2, incluindo o código HTML interno, será copiado para p1, ficando ambos exatamente idênticos.
Função val()
A função val() é utilizada para as tags input e select. Ela permite definir um valor para a input ou retornar o valor contido dentro da input. A função val() funciona como get, quando não passamos nenhum valor como parâmetro. Por outro lado, quando o parâmetro é especificado, a função val() funciona como um método set(). Esse comportamento se repete em várias outras funções do jQuery.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8"/>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#confirmar").click(function(){
var novaCor = $("#nome").val();
$("body").css("background-color",novaCor);
});
});
</script>
</head>
<body>
<b>Digite o nome de uma cor:</b>
<input type="text" id="nome" name="nome"> <button id="confirmar">Aplicar</button>
</body>
</html>
Nesse caso, usamos a função val() como get para obter o valor digitado pelo usuário na input #nome e em seguida aplicamos esse valor como cor de fundo na tag body.
Função is()
A função is() permite testar o estado de um elemento. Por exemplo, suponha que precisemos verificar se uma checkbox está marcada ou não, e nesse caso exibir ou esconder uma div:
<script>
$(document).ready(function(){
$("#exibir").click(function(){
if($(this).is(":checked")){
$(".infoBox").show();
}else{
$(".infoBox").hide();
}
});
});
</script>
A função is() sempre retorna true ou false de acordo com o seletor passado como parâmetro. No exemplo, o seletor é ":checked" e só faz sentido usá-lo em tags do tipo checkbox.
Função toggle()
Existem diversos cenários onde os elementos HTML oscilam entre dois estados como, por exemplo, oculto e visível. Pensando na facilidade de programar tal situação, o jQuery implementa a função toggle() que faz em uma só linha o que seria necessário fazer em duas ou mais com as funções hide() e show(). Vejamos um exemplo:
<script>
$(document).ready(function(){
$("#exibir").click(function(){
$(".infoBox").toggle();
});
});