O que é Jquery?

21 de dezembro de 2008 por Kadu Oliveira

Este artigo é apenas uma introdução ao Jquery que é uma biblioteca JavaScript criada por John Resig que tem por finalidade facilitar o desenvolvimento de scripts.

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.

O seu criador John Resig, resume o que é jQuery assim:

“O foco principal da biblioteca jQuery é a simplicidade. Por que submeter os desenvolvedores ao martírio de escrever longos e complexos códigos para criar efeitos simples.”

Só pela sua frase, que foi escrita no prefácio de seu livro jQuery in Action, podemos imaginar que é uma maneira simples e fácil de escrever códigos JavaScript. E realmente é. Até mesmo designers e desenvolvedores com pouco conhecimento de programação são capazes de criar rapidamente seus scripts. E o mais impressionante, você não precisa ser um profundo conhecedor de JavaScript para usar essa biblioteca.

Outra grande vantagem, (a primeira é de ser grátis) é de não ter problemas de incompatibilidade entre browsers. Quem usa css sabe do que estou falando.

jQuery foi criada em conformidade com os padrões web, ou seja, compatível com qualquer sistema operacional e navegador.

Como instalar jQuery

A biblioteca jQuery é um arquivo texto, salvo com a extensão .js (Arquivo JavaScript). Esse arquivo deve ser linkado na página onde serão aplicados os efeitos. E pronto! A biblioteca já pode ser usada.

Existem diferentes tipos de apresentação da biblioteca para download. Para ver acesse o site http://jquery.com e vá até a área de download. A mais completa delas, que inclui muitos comentários no arquivo você encontra nesse link http://jqueryjs.googlecode.com/files/jquery-1.2.6.js (baixe aqui para testar os exemplos)

Como linkar a biblioteca jQuery

Na primeira linha do código observe como chamar a biblioteca jQuery para dentro de suas páginas.

 <script type="text/javascript" src="../jquery-1.2.6.js"></script>
<script type="text/javascript">
Aqui vai as funções jQuery...
</sccript>

Você também pode utilizar o arquivo disponível no servidor do Google APIS em vez de usar o arquivo que está hospedado em seu servidor.

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

O Método ready()

Em jQuery equivale ao window.onload. Usamos window.onload para disparar nosso script depois que a página foi completamente carregada.

$(document).ready(function(){
     Faça isso...
})

Temos uma sintaxe abreviada de escrever.

$(function(){
    Faça isso...
})

jQyery na prática

<body>
<head>

<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript">
	$(function(){
		$('#geral').css('background','gold');  // troca cor de fundo da div
		$('p').css('color','red');  //troca cor dos parágrafos
	});

</script>

</head>

<body>
<div id="geral">
	<p>Parágrafo dentro da div #geral</p>
</div>

</body>

Nesse segundo exemplo vamos fazer a mesma coisa, mas quem irá disparar a função será um botão.

O código

	$(function(){
		$('button').click(function(){
			$('#geral').css('background','gold');
			$('p').css('color','red');
		});
	});

HTML

<button type="button">OK</button>
<div id="geral">
	<p>Parágrafo dentro da div #geral</p>
</div>

Nesse primeiro artigo apenas fomos apresentados a biblioteca jQuery e vimos sua sintaxe básica. Até a próxima.

Como instalar jQuery

Como linkar a biblioteca jQuery

O Método ready()

jQyery na prática

Um comentário