Loading ...-
jQuery - Introdução
Posted on julho 13th, 2009 1 commentOlá a todos os leitores do Strict Web Standards. Já faz um tempo que não escrevo nada devido a falta de tempo, mas a partir de hoje pretendo escrever uma série de tutoriais sobre esta incrível biblioteca de JavaScript que é o jQuery.
Bibliotécas e Frameworks
Uma biblioteca ou framework pode ser traduzido como um conjunto de ferramentas e funções que auxiliam no desenvolvimento de uma aplicação seja ela qual for.
No mundo do JavaScript existem diversas bibliotecas, dentre elas:
Por que jQuery ?
Claro que cada uma tem suas vantagens e desvantagens, mas com certeza a mais difundida é jQuery principalmente pela extensa documentação existente e pela variedade de plugins que se encontra na rede.
O que é preciso saber ?
Para aprender jQuery você não precisa ser nenhum expert em JavaScript, mas se você não sabe nada ou muito pouco JavaScript recomendo que estude antes de mergulhar nesta biblioteca. Mesmo porque você ainda precisara de muito JavaScript “puro” para resolver seus problemas.
É bom ter um certo conhecimento de CSS e HTML também. Afinal como você vai trabalhar sem conhecer suas ferramentas?
Significado do nome jQuery
O nome jQuery muito provavelmente significa algo “javascriptQuery” ou “consultas javascript” o que faz muito sentido a partir do momento que você passa a compreende-lo.
Como veremos adiante, é através de “consultas” a seletores CSS que acessamos os objetos da página e os manipulamos.
Algo como acessar o primeiro paragrafo de uma div em um documento:
$("div p:first").css({color:'red', border:'1px solid blue'});Editores
É claro que para desenvolver em jQuery você não precisa de nenhum editor de texto especifico, mas gostaria de lhes recomendar o komodo Edit, ele é Free, está disponível em várias plataformas e foi desenvolvido usando a mesma Engine do Firefox que é baseada no próprio JavaScript.
Mas o melhor está no seu suporte a auto-complete tanto para JavaScript como para outras linguagens e frameworks como PHP, Ruby, Python entre muitas outras.
Ele está disponível no seguinte link:
www.activestate.com/komodo_edit/
A função jQuery ou $
Tudo no jQuery funciona baseado na função “$” ou jQuery, é através dela que você acessa os elementos da página e os manipula.
Você pode usar tanto $ como jQuery para acessar os elementos, ambos são a mesma coisa:
$("#id").fn(); //é o mesmo que jQuery("#id").fn();Um pensamento prático sobre objetos
Para ficar mais fácil entender vamos pensar um pouco na programação orientada a objetos, na qual um objeto tem seus métodos que são suas funções e suas propriedades que são valores significativos que ele armazena.
Na junção HTML + JavaScript temos os mesmos conceitos.
Imaginem um botão em HTML:
<input type="button" value="ok" />
Ele tem várias propriedades e métotos como por exemplo “type” e “value” são propriedades e “click”, “mouseover”, “mousedown” entre outras são seus métodos ou “eventos”.
Download
Primeiramente precisamos da biblioteca, que você pode fazer download no site oficial no seguinte link:
http://docs.jquery.com/Downloading_jQuery
jQuery (que atualmente está na versão 1.3.2) é distribuído de duas maneiras que são Minified, Uncompressed que se diferem apenas em arquivo com compressão ou não.
Como iniciar?
Tudo que precisamos agora é de um arquivo html simples como o abaixo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br"> <head> <title>jQuery</title> </head> <body> </body> </html>
Para usar jQuery apenas anexamos a biblioteca ao arquivo HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br"> <head> <title>jQuery</title> <script type="text/javascript" src="pasta/jquery.js"></script> </head> <body> </body> </html>
Para iniciar um script temos que usar o “container” de script do jQuery que é a o método “ready“:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br"> <head> <title>jQuery</title> <script type="text/javascript" src="pasta/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { //seu código aqui }); </script> </head> <body> </body> </html>O ready do jQuery é semelhante ao window.onload convencional do JavaScript, sendo usado para acessar os elementos da página após eles terem sido carregados.
O ready é melhor que o window.onload pois espera apenas o HTML carregar, já o window.onload aguarda que todo conteúdo da página seja carregado.
Obrigado a todos os leitores e aguardem que em breve publicarei a continuação deste material
Posts relacionados
JavaScript, jQuery bibliotecas, css, frameworks, html, jQuery, komodo, komodo edit, padroes web, ready, tutorial, tutorial jquery, window.onload, xml
(1 votes, average: 5,00 out of 5)
Loading ...One Response to “jQuery - Introdução”
-
Andrezão setembro 16th, 2009 at 15:07
Boa dica para pessoas como eu que esta querendo aprender Jquery.
Valeu.
Leave a Reply
Strict Web Standards
(X)HTML, CSS, JavaScript, AJax & PHP
Sobre Mim
Olá, meu nome é Carlos Roberto tenho 23 anos e trabalho com desenvolvimento web a mais de um ano participando ativamente na criação de sites webstandards. Atualmente trabalho em uma agência de publicidade e propaganda na cidade de Ribeirão Preto, a Atual Interativa (Atual/CD) na qual atuo como Webdesigner.
Neste blog pretendo colocar dicas e textos das áreas de Web Standards e ajudar a difundir o conceito na comunidade brasileira de desenvolvedores.
Boa leitura a todos!
