O que é jQuery?

Postado por Abraão Levi Oliveira Figueredo em 13 de janeiro de 2010

Em poucas palavras: jQuery é um framework JavaScript para ajudar os desenvolvedores a se concentrarem na lógica dos sistemas da web e não nos problemas de incompatibilidade dos navegadores atuais. Suas principais funcionalidades:

• Resolução da incompatibilidade entre os navegadores.
• Redução de código.
• Reutilização do código através de plugins.
• Utilização de uma vasta quantidade de plugins criados por outros desenvolvedores.
• Trabalha com AJAX e DOM (Modelo de Objetos de Documentos).
• Implementação segura de recursos do CSS1, CSS2 e CSS3.

A grande vantagem do jQuery é que ele foi desenvolvido conforme os padrões web, ou seja, compatível com qualquer sistema operacional e navegador. Um dos pontos mais interessantes é que a biblioteca jQuery é disponibilizada como software livre (pode ser usada, copiada, estudada, modificada e redistribuída sem restrição), ou seja, você pode usar a biblioteca gratuitamente tanto para desenvolver seus projetos pessoais e comerciais. Para mostrar isso é só observar: grandes empresas estão usando o jQurey em seus projetos como o Google, Dell, Drupal,Wordpress, Mozilla entre outras muitas.

Usando o jQuery!

Antes de iniciar, devemos linkar a biblioteca para a página que estamos criando, podemos fazer das seguintes maneiras: 1. Entrar no site http://jquery.com/ e baixar a biblioteca e usar ela a partir do mesmo servido que encontra sua página ou aplicação Web, ou 2. “Puxar” de um outro servidor, como do nosso amigo Google. Vejamos primeiramente como podemos fazer do modo de número 1: Ao entrar no site existem duas opções para fazer o Download: a versão de Produção e a versão de Desenvolvimento. A diferença entre elas é que a de Produção vem compactada, ou seja, mais leve e disponibilizada para aqueles que não vão fazer modificações no código. Já a de Desenvolvimento é todo “formatado”, para quem quer estudar e compreender o código fonte, para fazer modificações ou coisas semelhantes. Aqui vamos usar a de Produção, já que não iremos fazer nenhuma modificação no fonte, iremos somente usar o framework. Após baixarmos o jQuery, teremos que incluir a sua referência no cabeçalho da página html:

<script type="text/javascript" language="javascript" src="javascript/jquery.js"></script>

Onde “src” mostra o caminho onde se encontrar o biblioteca.
Ou podemos fazer tudo isso de um modo mais simples, “Puxar” do nosso amigo Google, fazendo da seguinte forma:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

Lembrando que o código acima deve entrar no cabeçalho do seu site, dentro da tag .

Como este primeiro artigo tem a função de apresentar o jQuery, vamos fazer algo bem simples, como primeiro exemplo, o clássico “Hello World!”.

Para que o código funcione deve-se ter a seguinte estrutura:

<script type="text/javascript">
$(document).ready(function() {
// Seu código entra aqui
});
</script>

Entendendo:
$() : utilizado em todas as funções que devem ser referenciadas a jQuery.
document : expressão que indica o documento HTML.
ready() : esta associado a leitura do documento enquanto está sendo carregado.
function{} : dentro das chaves {},devemos colocar os comandos javascript ou jQuery que serão. interpretados pelo browser.

No corpo do HTML (dentro do ) faça um link:

<a href="#" title="jQuery">Usando jQuery</a>

Agora vamos fazer um Função que faz exibir a Mensagem “Hello World”, na estrutura mostrada anteriormente onde está “// Seu código entra aqui” Substitua por:

$("a").click(function() {
	alert("Hello World!");
});

Vamos dar uma olhada no que estamos fazendo: $(“a”) é um seletor do jQuery, neste caso, ele seleciona todos os elementos “a” (que no caso é o link). O $ por si só é um alias para a “classe” jQuery, por outro lado o $() constrói um novo objeto jQuery. A função click() que chamamos depois é um método do objeto jQuery. Ele liga o evento clique a todos os elementos selecionados (neste caso, um único elemento a) e executa a função fornecida quando o evento ocorre.

O código do HTML ficou da seguinte forma:

<html>
<head>
	<title>Falando TI – Primeiro exemplo jQuery</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>  
	<script type="text/javascript">
		$(document).ready(function() {
			$("a").click(function() {
				alert("Hello World!");
			});
		});
	</script>
</head>
 
<body>
<a href="#" title="jQuery">Usando jQuery</a>
</body>
</html>

Você pode aplicar CSS como quiser sem problemas. Aqui vimos apenas o mais básico para podermos aprender um pouco de jQuery, posteriormente estarei colocando mais tutorias e artigos sobre jQuery.
Se você gostou pode acessar a documentação dessa ótima biblioteca em http://docs.jquery.com (em inglês).