.gif&w=556&h=133&zc=1)
Parte 1 – Configurando Ambiente
Parte 2 – Acessando Elementos
Este é o primeiro de uma série de posts ensinando como programar com a jQuery, do básico ao avançado.
A meta é ensinar qualquer pessoa que tenha um pouco de conhecimento em html e javascript a fazer o que imaginar usando jQuery.
Por que usar a jQuery?
jQuery é um framework desenvolvido para javascript compatível com todos os browsers. Foi desenvolvida para facilitar a programação e entendimento dos desenvolvedores. Resumindo, você consegue fazer coisas extraordinárias com javascript, usando códigos simples de maneira muito mais simplificada.
De quebra, a comunidade de Jquery é imensa.
Inclusive dentro do site oficial existe uma grande comunidade brasileira sobre o assunto.
Vamos ao que interessa – Configurando o ambiente
Vamos criar uma pasta onde ficarão os arquivos html e js para utilizar a jQuery.
- Crie uma pasta para nosso teste chamada jquery
- Crie um arquivo .html chamado index.html
- Crie uma pasta chamada js dentro da pasta jquery
- Crie um arquivo .js chamado default.js (Neste arquivos vamos programar os comandos da jQuery dentro)
- Vamos baixar a jQuery. Entre no site oficial e clique em Downlod jquery
- Salve o arquivo com o nome jquery.js, dentro da pasta js (Somente para mantermos um padrão).
Pronto, estamos com a nossa pasta configurada para começarmos, ela deve estar da seguinte maneira:
Edite o arquivo index.html e cole o código abaixo:
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
<head>
<title>Aprendendo jQuery - Configurando Ambiente</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/default.js"></script>
</head>
<body>
<div id="general">
<h1>Aprendendo jQuery - Configurando Ambiente</h1>
</div>
</body>
</html>
O código acima é um html básico, que está puxando dois arquivos .js (jquery.js e default.js) de dentro da pasta js que criamos. Dentro do conteúdo da página temos uma div com o id (general) e um h1 com um texto dentro.
Algumas regras:
- Em todas as páginas aonde a jQuery for usada, é obrigatório a inclusão do arquivo jquery.js no cabeçalho das páginas.
- O arquivo jquery.js deverá SEMPRE ser carregado primeiro que os demais arquivos que utilizem a jQuery.
Agora vamos criar um exemplo do uso da jQuery para finalizarmos o exemplo deste post.
Edite seu arquivo default.js e cole o código abaixo:
function init()
{
$('#general h1').html('Hello World!');
}
// Quando a pagina estiver carregada chama a funcao init
$(document).ready(init);
Vamos entender este código acima.
Criei uma função chamada init.
Dentro da função init existe um comando da jquery que irá trocar o texto da tag h1 que está dentro da div com o id (general) para o texto Hello World!
Caso não tenha entendido direito este comando não se preocupe pois no próximo post sobre jQuery vou ensinar e descrever todos os comandos básicos.
Agora o comando mais importante deste post:
$(document).ready(init);
Esse é o comando que irá chamar a função que esta entre parenteses (a nossa init que criamos).
Este comando é muito importante porque ele só irá chamar a função init depois que toda a página já estiver sido carregada pelo browser.
Já imaginou se a internet estivesse um pouco lerda e fossemos editar uma tag html com jQuery e ela ainda não estivesse sido carregada pelo browser? Daria erro e não funcionaria o código, por isso utilizamos este código na última linha chamando uma função somente depois que a página estiver completa.
Utilizando-se dele, pode ter certeza que muitos erros futuros serão evitados, pois você tem controle de quem está sendo executado e quando.
É isso, ficou um pouco grande mais acredito que sirva para ajudar as pessoas que estejam começando com jQuery.
Espero que gostem.
Animal! Bem simples de entender… =)
Muito Legal, jquery realmente é muito bom de programar!