O jQuery, sem sombra de dúvidas, revolucionou a forma como escrevemos códigos na linguagem Javascript. Não somente pela facilidade, mas também pela grande variedade de recursos que podemos dispor ao utilizar este excelente framework javascript, que vão desde simples edições de DOM até requisições Ajax e tratamento de eventos.
Utilizada por boa parte dos desenvolvedores web atualmente, esta framework vem sendo constantemente atualizada e melhorada, mas uma das coisas que mais impressiona é o tamanho da framework, que em conjunto com o GZip atinge o tamanho de menos de 30KB. Isso mesmo, você pode desfrutas de todos esses recursos e isso vai pesar o seu projeto em apenas 30KB. E para melhorar ainda, agora o jQuery é hospedado pelo Google e seu “super cache”.
Incluindo a framework no projeto
Para incluir esta biblioteca em seu projeto, há 3 formas distintas:
- Baixar o arquivo e hospedá-lo localmente em seu servidor.
- Utilizar a API do Google para a carga da biblioteca:
onde o “1.8.3” é a versão do framework que você deseja utilizar. Se você informar ‘1’ neste parâmetro, a API do Google vai retornar sempre a versão mais recente.12<script src="http://www.google.com/jsapi?key=sua_chave_aqui" type="text/javascript"</script><script type="text/javascript">google.load('jquery','1.8.3');</script> - Chamada direta na API (Minha preferida):
1<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
Introdução a Seletores
Um dos grandes atrativos da equipe de desenvolvimento do jQuery, foi pensar na praticidade e facilidade de seus seletores. Os seletores são formas de agrupar e selecionar vários objetos via Javascript e aplicar ações e eventos nesse grupo de elementos ou em um elemento específico. Esse agrupamento pode ser realizando usando o #id, a .classe do objeto, uma característica de CSS, nome do objeto, um atributo HTML na página, elementos filhos de um elemento pai e muito mais!
Exemplos:
– Selecionando todos as tags <p> da <div id="’teste’"> e alterando a cor da fonte para #ffffff com CSS.
|
1 |
$("#teste p").css("color", "#fffffff"); |
– Recuperar todos os elementos cuja classe=’testeClasse’ e adicionar a classe “outraClasse” aos elementos.
|
1 |
$(".testeClasse").addClass("outraClasse"); |
– Recuperar todos os elementos de link (<a>) que não possuem a classe “produto”
|
1 |
$("a:not('.produto')") |
– Recuperar todos os elementos de link (<a>) que abrem links externos (target=’_blank’)
|
1 |
$("a[target='_blank']") |
– Recuperar todos os elementos de link (<a>) que abrem links que contenham “facebook.com”
|
1 |
$("a[href*='facebook.com']") |
– Recuperar o primeiro elemento, último e o 9º elemento de link (<a>) da página
|
1 2 3 |
$("a:first"); $("a:last"); $("a:nth(8)"); // Índice inicia em 0 |
Veja mais sobre todos os seletores acessando este link.
Eventos
Outra grande revolução que o jQuery trouxe para o desenvolvimento Web foi a forma como gerenciamos os eventos de nossas aplicações. Antes, tínhamos que “contaminar” nossas páginas HTML com códigos onclick, onchage, onblur, etc. o que vai totalmente contra ao padrão de desenvolvimento em camadas, separando as regras de negócio da interface (Sim, dá para programar orientado a objetos e utilizando MVC no Javascript).
Isso agora mudou! Com o jQuery, podemos isolar totalmente as páginas HTML e os códigos Javascript.
Exemplos:
– Imprimindo na tela o valor selecionado de um <select> cujo id=”id_aluno”
|
1 2 3 4 |
$("#id_aluno").change(function() { var valor_selecionado = $(this).val(); alert(valor_selecionado); }); |
– Validando um campo com id = “nome” antes de enviar o formulário cujo id seja “frmCadastroAluno”
|
1 2 3 4 5 6 |
$("#frmCadastroAluno").submit(function() { if ($("#nome").val().length == 0) { alert("Por favor, preencha o campo Nome"); return false; } }); |
– Imprimindo a URL de um link (<a>) ao clicar e não seguir o link:
|
1 2 3 4 5 6 7 8 9 10 |
$("a").click(function (e) { e.preventDefault(); var elemento = $(this); var link = elemento.attr("href"); alert(link); }); |
Veja todos os eventos acessando este link.
Plugins
Outra grande inovação que este projeto nos proporcionou foi a criação e utilização de plugins para reaproveitamento de código. Se você pesquisar no Google, vai encontrar milhares de plugins, que fazem as mais variadas funções em conjunto com o jQuery. Galerias de imagens, efeitos visuais, novos recursos, melhorias de usabilidade, melhorias de interface…
Segue abaixo, a minha lista de plugins indispensáveis
- Tablesorter – Melhorias e aprimoramentos em tabelas, como ordenação.
- TipTip – Nova interface para balões de ajuda, mais elegante e amigável.
- SexyAlertBox – Um jeito mais moderno e estiloso para exibir mensagens de alerta.
- Easing – Um plugins que proporciona diversos efeitos para suas aplicações.
- jCarousel – Um dos melhores plugins para se fazer um carousel de imagens.
- Colorbox – Uma galeria de fotos super leve e elegante, com 5 temas diferentes.
- Cycle – O melhor e mais completo plugin para criar um banner animado.
- Uploadify – A melhor solução para o envio de uploads múltiplos. Bem customizável e se adapta bem para qualquer projeto ou necessidade.
- MaskMoney – Plugin que permite criar campos do tipo moeda facilmente e sem complicações.
- InputValue – Faça um filtro de quais tipos de valores serão aceitos pelos campos do seu formulário com este plugin.
- MaskedInput – Crie máscara para os mais diversos campos do seu formulário, como telefone, e-mail, CPF, etc.
- BlockUI – “Trave” a interface do seu usuário enquanto um processo é executado em background ou para dar foco à outra janela.
- MeioMask – Plugin brasileiro que realiza diversos tipos de máscaras e validações em formulários.
- jQuery SWFObject – Insira animações em Flash em suas aplicações dinamicamente e sem causar problemas de validação de HTML no validador do W3C.
Portuguese 
English