Olá pessoal,

Vou abordar uma série de posts sobre JQuery, desde a introdução até efeitos avançados de layout, bem como ajax e a customização de plugins.

Oque é JQuery?

JQuery é uma biblioteca JavaScript criada por John Resig, de código aberto, liberada sob a licença GNU (General Public Licence). É uma biblioteca simples que possibilita não apenas programadores experientes bem como designers e quem possue pouco conhecimento de programação.

O  desenvolvimento com JQuery está centrado em simplicidade, onde você não precisará mais ter que escrever linhas e linhas de código JS para poder selecionar um elemento DOM de sua página, com apenas um método da JQuery este trabalho todo estará eliminado, e já possuirá o elemento DOM em mãos para poder manipulá-lo , validá-lo etc.

Qual a finalidade da JQuery?

  1. Efeitos visuais e animações.
  2. Acesso e manipulaçao de objetos DOM.
  3. Ajax.
  4. Interabilidade.
  5. Alteração de conteúdos.
  6. Modificar layout.
  7. Redução de código JS.

JQuery está em conformidade com todos os padrões WEB estipulados pela W3C, ela oferece total suporte a CSS3, é uma biblioteca compatível com qualquer navegador (cross browser). JQuery visa incrementar de forma progressiva e não obstrutiva a usabilidade e acessibilidade.

OBS: Isso não significa que todo código escrito com Jquery se torna um código válido segundo os padões WEB, isso cabe a cada desenvolvedor escrever seus códigos em conformidade com padrões e acessibilidade.

Principais características:

  1. Utiliza seletores CSS para busca de elementos DOM na árvore HTML.
  2. Arquitetura simples para instalação de plugins e criação de plugins.
  3. Totalmente cross browser.
  4. Não é necessário a criação de loops para busca de elementos na árvore DOM.
  5. Programação encadeada, pois todo método retorna um objeto.
  6. Extensível, permite a você extender a própria biblioteca e customizar a seu modo.

Como instalar?

JQuery não necessita instalação, para você fazer uso a biblioteca basta apenas acessar o site Jquery.com baixe a versão minified, que se trata de um arquivo comprimido; No momento da escrita deste post a versão atual estável é 1.3.1, apos baixar a biblioteca, para linkar o arquivo JS vc deverá fazer isso dentro da head desta forma:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" charset="UTF-8" src="js/jquery-1.3.1.min.js"></script>
<title>Hello word JQuery</title>
</head>
<body>
</body>
</html>

Após feito isso vamos criar outro arquivo JavaScript onde criaremos nosso primeiro HelloWord em Jquery. Crie na pasta js do seu projeto um arquivo chamado helloword.js, e adicione o seguinte código dentro dele:


/**
* O Construtor da jquery é baseado no caracter $
* Todo seletor deve passar por ele, neste caso estamos passando
* o próprio document e quando o document terminar de carregar oque
* estiver dentro da função passada como parametro será executado.
*/
$(document).ready(function(){
// Exibindo mensagem logo apost termino de carregamento
// da página
alert('A pagina terminou de carregar, Hello Word');
});

Para que isso funcione altere a head da  sua página html conforme abaixo:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" charset="UTF-8" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="js/helloword.js"></script>
<title>Hello word JQuery</title>
</head>
<body>
</body>
</html>

Desta forma quando acessada a página index.html será exibida uma mensagem de HelloWord, faça o teste aqui, o download deste projeto de exemplo está aqui.

No próximo post vamos abordar a sintaxe JQuery, e inicio de uso de seletores básicos.

Abraços e até um próximo post.

Ronaldo.