Trabalhar com javascript sempre foi uma grande dor de cabeça dos desenvolvedores web, o principal motivo é a incompatibilidade e a dificuldade de manipular o DOM.

Visando solucionar este problema surgiu uma biblioteca que facilita bastante a vida de quem trabalha com javascript a JQuery. Uma biblioteca que permite manipular e selecionar elementos do DOM de forma muito fácil.

Você pode baixá-la pelo seguinte endereço jquery.js ou também pode utilizá-la pelo Google pelo seguinte link “http://jqueryjs.googlecode.com/files/jquery-1.3.2.js” e deve ser inserida na tag head (<script src="jquery.js"></script>).

Vamos aos exemplos: 

<div id="content">
<ul>
    <li><a href="#">Teste1</a></li>
    <li><a href="#">Teste2</a></li>
    <li><a href="#">Teste3</a></li>
    <li><a href="#">Teste4</a></li>
    <li><a href="#">Teste5</a></li>
</ul>
</div>

Bom vamos começar por um clássico quando clicarmos no link exibiremos a mensagem Hellos World:

$(document).ready(function() {
    $('a').click(function(){
        alert("Hello World");
    });
});

Antes de explicarmos o código vale chamar atenção para função $() ela recebe por parâmetro um seletor que identificará um elemento HTML e é através desta função chamaremos outras funções da biblioteca jQuery utilizando o operador “.” .

No nosso exemplo a primeira coisa que fazemos é selecionarmos o document ou seja o documento HTML em si e utilizarmos a função ready que executa a função passada para ela por parâmetro quando o DOM estiver pronto, ou seja, a página estiver carregada. Este é um recurso essencial já que sem ele as funções podem serem executadas sem que seus alvos(seletores) tenham sido carregados.

Na linha 2 selecionamos o elemento “a” ou seja os links da página e chamamos a função click e passamos por parâmetro uma função que exibe um alert("Hello World"). A função click é, resumidamente, uma alias para o atributo onclick do elemento, então agora em qualquer link que clicarmos na página será exibida a mensagem “Hello World“.

Esta é uma das maiores facilidades que a JQuery proporciona, permitir que utilizemos seletores CSS para selecionarmos os elementos do DOM. Podemos desta forma selecionar os elementos com muita facilidade como por exemplo: 

$('h3')
$('.botao')
$('#conteudo')
$('.content li a')

Na linha 1 selecionamos todos os elementos h3 da página, na 2 todos os elementos da classe botao na linha 3 selecionamos o elemento que tiver o id conteudo, na linha 4 selecionamos todos os elementos que a que estiverem dentro de um elemento li que estiverem dentro de um elemento que pertença a classe content.

Um outro seletor muito importante é o $(this) com ele é possível acessar a referência do elemento que chamou o método como vemos no exemplo a seguir.

$('#bloco a').click(function(){
    alert( $(this).attr('title'))
} );

Métodos mais comuns da JQuery

Vamos fazer agora uma pequena introdução à alguns métodos do JQuery:

$('#bloco').html();

Retorna o HTML que estiver dentro do elemento. 

$('#bloco').html("Texto aqui");

Insere o texto passado por parâmetro dentro do elemento. Eliminando o conteúdo antigo.

$('#bloco').append("Texto aqui");

Adiciona o texto enviado por parâmetro no final do conteúdo do elemento selecionado.

$('#bloco a').attr('title','Boteco Digital');

Define o valor para uma propriedade do elemento selecionado. 

$('#bloco a').attr('title');

Retorna o valor de uma propriedade do elemento selecionado. 

$('#bloco input').val();

Retorna o valor de campo do formulário. 

$('#bloco').addClass("vermelho");

Adiciona a classe passada por parâmetro ao elemento selecionado. 

$('#bloco').hover(function() {
    $(this).addClass("verde");
}, function() {
    $(this).removeClass("verde");
});

Simula o :hover, quando o mouse estiver sobre o elemento selecionado executa a linha 2, quando o mouse saber de cima do elemento selecionado executa a linha 4.

$('#bloco').css('background','#CCC');

Define propriedade CSS para um elemento selecionado. 

$('#bloco').css('background-color');

Retorna o valor da propriedade CSS. 

$('#bloco select').change(function(){
    alert( $(this).val())
} );

Executa a função passada por parâmetro quando o elemento selecionado for alterado

Mais funções podem ser encontradas aqui.

Pessoal comentem o que acharam, se está claro. No próximo artigo irei ensinar como fazer um pouco de animação com JQuery.

T++.c