JQuery - Primeiros Experimentos

No post anterior, falei apenas de algumas características do JQuery, mas sem entrar muito no seu uso. Vamos ver agora algo mais concreto e útil, que já serve de base para estudos mais detalhados.

Algo simples para começar

<html>
<head>
<script type="text/javascript" >>
src="js/jquery.js"></script>
<script type="text/javascript">
//Código criado que usará a JQuery para >>
manipular sua página
</script>
<link rel="stylesheet" type="text/css" >>
href="estilo.css" media="screen" />
</head>
<body>
<p>Um simples parágrafo.</p>
</body>
</html>

Nessa página básica temos um arquivo jquery.js que contém a biblioteca JQuery que pode ser baixada no site oficial, um segundo código Javascript para inlcuir o nosso código, uma declaração de um arquivo CSS e um parágrafo como conteúdo dessa página.

O que iremos fazer agora é utilizar a JQuery para brincar com o conteúdo atual. Podemos por exemplo trocar a tag P de estilo quando o mouse estiver sobre ela, como forma de destaque. Para isso, o código JQuery seria:

 $(document).ready(function(){
   $("p").hover(function () {
      $(this).addClass("destaque");
    }, function () {
      $(this).removeClass("destaque");
    });
 });

Vamos por partes

A primeira parte a notar é a função que verifica se todos os elementos foram carregados.

$(document).ready(function(){
//Restante do código aqui
 });

Em seguida temos a linha que pega todos os elementos P e aplica uma função quando os mesmos estiverem com o mouse sobre eles, hover:

$("p").hover(function () {

Quando isso acontecer, uma classe (definida no arquivo estilo.css) chamada destaque será aplicada:

$(this).addClass("destaque");

Por fim, quando isso (mouse sobre os elementos P) não estiver mais acontecendo, aplica-se a próxima função, que remove a classe:

$(this).removeClass("destaque");

Esse exemplo é bem simples mas já mostra algumas utilizações reais e servem para um estudo básico. No próximo post estarei descrevendo os passos para a utilização de efeitos em Javascript com a JQuery.

Comente esse artigo comente este artigo