Proponha uma correção, faça uma sugestão
Programação Web é a Quinta-Feira
Por Pedro Peixoto para o PPLWARE
Primeiros passos em JQuery
Nos últimos artigos temos vindo a falar da integração do Javascript nas aplicações PHP. Na última semana aumentámos um pouco mais a complexidade dos scripts, percebendo que, embora não estivéssemos a fazer nada de muito admirável, eram já necessárias algumas linhas de código. De facto o Javascript é uma linguagem completa e flexível mas pouco produtiva. Para combater este entrave surgiram bibliotecas que vieram facilitar o trabalho dos programadores. Estas bibliotecas permitem um acesso mais rápido a funcionalidades muito requeridas em aplicações WEB, para além de facilitarem o acesso à estrutura DOM e principalmente simplificarem a utilização de AJAX. Vamos por isso, aprender hoje a utilizar o JQuery.
Mas o que é o jQuery?
“jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.”
De facto o lema do jQuery é “Escreva menos, faça mais!”, e podemos assegurar que ambas as afirmações são verdadeiras. O Javascript foi ganhando ultimamente o seu merecido lugar de destaque, a evolução nos motores JS dos browsers, a impossibilidade do FLASH correr nos iDevices da moda, e a eminente emancipação do HTML5 muito contribuíram para isso. No entanto, existiam três pontos negativos em relação ao Javascript:
- Em primeiro lugar é uma linguagem interpretada pelos browsers, e infelizmente nem sempre interpretada da mesma forma pelos diferentes navegadores. Nenhum programador se esquece das dores de cabeça que o já sepultado (felizmente) IE6 nos dava.
- Outro dos problemas era o facto de o Javascript não possuir certas funcionalidades directas que a grande parte dos sites necessita. Para fazer um fadeout ou uma caixa de diálogo eram necessárias algumas linhas de código, ou até algumas funções, sendo já habito os programadores desenvolverem ficheiros .JS que permitiam funcionalidades deste tipo.
- Por último o JS não permitia de forma fácil uma interacção imediata com as bases de dados e scripts PHP até ao aparecimento do AJAX, no entanto o AJAX também era demasiado complicado de ser usado.
Pretendia-se uma maneira fácil, rápida e bonita de programar certas funcionalidades, componentes e efeitos, para além de uniformizar a forma como os ficheiros .JS poderiam ser usados e adaptados de forma a tornarem-se autênticos PLUGINS. Surgiu então o jQuery, de facto muitos programadores WEB consideram hoje esta biblioteca uma autêntica preciosidade. Mas como “um Hello World vale mais do que mil palavras”... J ... vamos ao que interessa.
Vamos como é hábito criar um ficheiro HTML com a estrutura básica já definida.
<html> <head> <title>Exemplo jQuery</title> </head> <body> </body> </html> |
O jQuery não é mais do que um ficheiro .JS que é necessário incluir na nossa página HTML. É possível baixar o jQuery através do próprio site:
Mas no nosso caso vamos fazer o include ficheiro directo, que está alojado no mesmo sítio:
Para incluir o ficheiro na nossa página adicionamos no head a seguinte linha de código:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script> |
E pronto estamos prontos para usar o jQuery, fácil não é? Vai ser ainda necessário uma “div” para exemplificar o funcionamento da biblioteca, e um botão para executar o código. Vamos começar por colocar o texto “Hello World!” dentro da div quando o botão Executar é clicado. Para isso basta adicionar o seguinte código ao evento click do botão:
$('#teste').html('Hello World!'); |
<html>
<head>
<title>Exemplo jQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
</head>
<body>
<div id="teste"></div>
<br/>
<input type="button" value="Executar"
onClick="$('#teste').html('Hello World!')">
</body>
</html>
E o resultado:
Como se pode perceber, para aceder a um elemento utilizamos a estrutura $(idouclass), com javascript simples para aceder à div teste teríamos:
Document.getElementById(‘teste’); |
Com jQuery:
$(“#teste”) |
O jQuery permite também aceder a elementos de uma determinada classe através do “.” em vez do “#” (como em css). Existem muitos mais selectors, podendo utilizar mesmo a navegação através da estrutura DOM à semelhança do JS mas de uma forma muito mais rápida. Aqui ficam alguns exemplos:
- $("p") //aceder a todos os elementos “p”
- $("#pid") //aceder ao elemento com o id “pid”
- $(".p") //aceder a todos os elementos com a classe “p”
- $("table > tbody > tr") //aceder a todas as linhas da tabela
- $("#t1 > tbody > tr") // aceder a todas as linhas da tabela com id “#t1”
- $("input[type='text']") // aceder aos inputs do tipo texto
Quando seleccionamos mais do que um elemento podemos usar a função each para percorrer elemento a elemento e aplicar uma acção ou então podemos usar filtros como o :first, :last e a função filter.
Em conclusão, o jQuery facilita a agiliza a programação com Javascript sendo por isso uma biblioteca indispensável. Este foi apenas um “cheirinho” para perceberem que não é de forma alguma complicado usarem esta poderosa biblioteca. Nos próximos artigos continuaremos a explorar o jQuery e também introduziremos jQuery UI de forma a aprendermos como criar aplicações/sites WEB mais atractivos e amigos do utilizador. Vamos ainda aprender a usar o jQuery em conjunto com o PHP, principalmente recorrendo ao AJAX e a funções do jQuery que tornam este recursos
Artigos relacionados
Homepage: JQuery
Loading ...
Desde já os meus parabéns e muito obrigado, não só por este, mas por todos os tutoriais que o Pedro Peixoto tem produzido para o Pplware.
Muito bom, é desta que eu vou aprender jQuery 🙂
Muito obrigado Pedro, os parabéns são para a equipa do Pplware que se dedicam 24h sem descanso para que tudo esteja em condições para os utilizadores.
muito util este tutorial
😉
Muito bom tutorial para iniciar jQuery. Fico à espera do próximo. 🙂
Obrigado. Para a semana há mais 🙂
jQuery é uma maravilha!
Realmente dá para fazer coisas decentes com meia dúzia de linhas de código.
A integração com AJAX é mesmo o melhor:
– apenas com um comando (e algumas opções) faz-se um HTTP Request,
– o parser de XML é muito simples, os comandos para aceder aos elementos do XML são os mesmos que se usam para aceder aos elementos da DOM.
– é fácil fazer animações, o que é particularmente interessante para fazer menus bonitinhos.
Conclusão: Vale muito a pena dedicar algum tempo (não é preciso muito) a estudar jQuery, mais tarde poupa muito tempo no desenvolvimento de aplicações, ainda com a vantagem de fazer aplicações mais interessantes com menos trabalho.
hummm, isto parece bash…quero dizer a sintaxe…
cmps
Obrigado pelo tutorial! Toda a gente me fala bem do JQuery mas ainda não tive grande oportunidade de pegar a sério nisso. Venha o próximo!:)
cuidado com o uso das plicas e aspas erradas nos exemplos:
Document.getElementById(‘teste’);
$(“#teste”)
‘ ” em vez de ‘ ”