Close

Not a member yet? Register now and get started.

lock and key

Sign in to your account.

Account Login

Forgot your password?

13 Oct Posted by in Javascript, Jquery | 3 comments

Aprendendo jQuery – Configurando o ambiente

Aprendendo jQuery – Configurando o ambiente
 

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.

DOWNLOAD DO EXEMPLO COMPLETO


  1. Rety14:20:53 13/10/2010

    Animal! Bem simples de entender… =)

  2. Samuel17:34:57 08/03/2011

    Muito Legal, jquery realmente é muito bom de programar!

Leave a Reply

  1. Aprendendo jQuery – Acessando elementos | Ronie Neubauer10-20-10