Pular para o conteúdo principal

Introdução a jQuery - parte 2

Esta é a segunda parte da Introdução a jQuery. No post anterior eu mostrei um exemplo e agora vou dar um pouco mais de detalhes.
Para começar, vou explicar os conceitos da filosofia do jQuery e depois falarei sobre seletores.

Conceitos da filosofia do jQuery

1. Encontrar alguns elementos, através de seletores CSS, e fazer alguma coisa com eles usando métodos jQuery
Ou seja, localizar os elementos na árvore DOM para depois manipulá-los de alguma forma.
Para isso usamos $(seletor) ou jquery(seletor), que retorna um objeto Javascript especial contendo um array de elementos DOM que satisfazem o seletor.
Por exemplo, para selecionar todos os links que estão dentro de um parágrafo, é só fazer:
$("p a");

2. Encadear múltiplos métodos jQuery num conjunto de elementos
Todos os elementos selecionados antes de um método jQuery ser aplicado sempre são retornados de modo que a cadeia continue, permitindo menor uso de memória e uma melhoria na performance.
Com isso podemos fazer algo do tipo:
$('div').hide().text('novo texto').addClass("atualizado").show();
Neste caso, primeiro são selecionados todos os divs da página, daí todos eles são escondidos, depois muda-se o texto de todos eles, em seguida uma classe CSS é acrescentada e por último os divs são mostrados novamente.

3. Usar wrappers jQuery e iterações implícitas
Aproveitando o item anterior, este tipo de construção se chama wrapper porque engloba os elementos selecionados com funcionalidade estendida. Quero dizer que qualquer operação feita no objeto retornado será feita em cada um dos elementos, ou seja, há uma iteração implícita aí.
Quando escrevemos:
$('div').hide();
O método hide() será aplicado em cada um dos elementos div retornados em $('div');

Viu que maravilha? Com uma linha de código o jQuery substitui várias linhas que usamos para escrever JavaScript puro!

Como incluir um código jQuery numa página (X)HTML

Você pode baixar o jQuery do site jquery.com e colocar no seu servidor ou então usar uma versão hospedada no CDN (content distribution network) do Google, que é o que eu fiz no meu exemplo da parte 1, veja a linha 42 da listagem onde eu coloquei o seguinte:
<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

Depois é só colocar o seu código dentro das tags script:
<script>
// seu código jQuery vai aqui
</script>


Normalmente estes trechos de código são colocados na seção de cabeçalho do arquivo HTML, ou seja, entre as tags <head> e </head>, porém, na maioria dos casos aconselha-se a colocar no final do corpo antes da tag </body> para melhorar o carregamento da página.

Seletores

Com o uso de CSS no desenvolvimento de páginas web, podemos separar o que é informação de estilo do que é estrutura do documento. E esta separação facilita não só o manuseio e entendimento mas também quando precisamos mudar muito a cara de uma página e para isso trocamos as folhas de estilo simplesmente.
Como princípio, o jQuery é focado em recuperar elementos das páginas HTML e executar operações neles. E para isso, faz uso de seletores CSS, que descrevem grupos de elementos através de seus atributos ou localização no documento.
jQuery usa a sintaxe do CSS e a extende com alguns métodos customizados para selecionar elementos que nos ajudem a executar tarefas simples e também as complexas.

Alguns exemplos de seletores básicos:
  • div - todos os blocos de elementos div
  • #quadro1 - elementos que contenham o atributo id com o nome "quadro1"
  • .quadro - elementos que tenham o atributo class "quadro"
  • div.quadro - elementos que tenham o atributo class "quadro"
  • div#quadro1 img - elemento img declarado dentro de um elemento div que tenha o atributo id "quadro1"

Para usar num código jQuery, é só colocar dentro de $( );, como nestes exemplos abaixo:
  • $("div.quadro");
  • $("div#quadro1 img");

Outros seletores avançados:
  • $("div#quadro1 > div"); - seleciona elementos div que sejam filhos diretos do div com id igual a quadro1
  • $("input[type=text]"); - seleciona elementos input cujo atributo type seja igual a text
  • $("a[href$=.pdf]"); - seleciona elementos com atributo href que terminam com .pdf
  • $("li:has(a)"); - seleciona elementos li somente se este contiver um elemento a
  • $("p:odd"); - seleciona elementos p ímpares
  • $("p:even"); - seleciona elementos p pares

Isso só para dar uma pequena amostra. Para saber mais consulte algum tutorial ou livro sobre CSS para mais informação.
Eu gosto muito do livro CSS the missing manual, de David MacFarland, O'Reilly.

Métodos

O jQuery tem vários métodos prontos na sua API. Sua documentação é muito boa, por isso vou listar somente alguns deles aqui como ilustração:
  • .hide() - os elementos do conjunto selecionado serão escondidos imediatamente, sem animação: $(".quadro").hide();
  • .show() - os elementos do conjunto selecionado serão mostrados imediatamente, sem animação: $(".quadro").show();
  • .size() - retorna o número de elementos do conjunto selecionado: $("div").size();
  • .get(index) - retorna o elemento conforme o index informado ou todos caso não tenha sido passado nenhum parâmetro: $("img").get(0); - seleciona a primeira imagem
  • .addClass(name) - adiciona a classe informada em todos os elementos do conjunto selecionado
  • .css(name,value) - atribui o valor "value" a uma propriedade de estilo de nome "name": $("div").css("width",300");
  • .css(name) - retorna o valor da propriedade de estilo que tem o nome igual a "name"

Sobre jQuery, ainda tem muita coisa além disso e que daria muitas páginas mais, tais como:
  • funções utilitárias
  • eventos
  • extendendo jQuery
  • plugins para jQuery
  • usando Ajax

Bom, espero que esta introdução que escrevi aqui nestas 2 partes tenha sido de algum valor para quem está iniciando e que também tenha sido uma motivação para procurar saber mais sobre jQuery.

[]s

Ana
Twitter: @anabrant
http://blog.globalcode.com.br/search/label/ANA ABRANTES

Comentários

duboris disse…
Ana,

Parabéns pelo Post.
Já utilizei JQuery, mas nunca tinha parado para entendê-lo e agora consegui entender bem o conceito.

Sds.

Postagens mais visitadas deste blog

O que é Lógica de programação?

Este é o segundo de uma série de posts voltados aos leitores do blog que estão dando início à carreira de desenvolvimento de software. O assunto de hoje é a lógica de programação. Para ler antes: Entendendo como funciona a programação de computadores: linguagens de programação, lógica, banco de dados A lógica de programação é um pré-requisito para quem quer se tornar um desenvolvedor de software, independente da linguagem de programação que se pretende utilizar. Mas o que é de fato a Lógica de Programação e como saber se eu tenho esse pré-requisito? A lógica de programação nada mais é do que a organização coerente das instruções do programa para que seu objetivo seja alcançado. Para criar essa organização, instruções simples do programa, como mudar o valor de uma variável ou desenhar uma imagem na tela do computador, são interconectadas a estruturas lógicas que guiam o fluxo da execução do programa. Isso é muito próximo ao que usamos em nosso cotidiano para realizar atividad

Devo fazer um curso ou ler um livro?

Acredito que todos os instrutores ou professores, independentemente da área, escola ou centro de treinamento, já devam ter recebido essa pergunta alguma vez na vida: devo fazer um curso ou ler um livro? Para responder a essa pergunta, precisamos avaliar os prós e contras de cada opção. Trabalho com treinamento há algum tempo e, hoje, recebi essa pergunta de um aluno. Não adianta responder a ou b sem argumentar, demonstrando as opções conforme a situação do aluno. O conteúdo, a forma de transmissão e a capacidade de assimilação do indivíduo são chaves para haver benefício maior de aprendizado. Tanto em um bom curso quanto em um bom livro, o conteúdo é a premissa básica . Por conteúdo entendemos: se está organizado; se respeita pré-requisitos; se promove o aprendizado guiado e incremental; se aborda de forma satisfatória os principais pontos; se tem bom balanço entre teoria, exemplos e prática (favorecendo exemplos e prática); se tem como premissa a acessibilidade possível (e cabível) pa

TDC ONLINE: SUA PLATAFORMA DE PALESTRAS GRAVADAS DO TDC DISPONÍVEL

Além do conteúdo ao vivo transmitido online nas edições do TDC, agora você pode ter acesso à centenas de palestras gravadas, através da nossa nova plataforma de vídeos - o TDC Online, que reúne todas as Trilhas premium, Stadium e Salas dos Patrocinadores das edições anteriores de 2022, TDC Innovation e TDC Connections.  Para acessar, basta clicar na edição em que você participou ( TDC Innovation ou TDC Connections ); Fazer o mesmo login (com e-mail e senha) cadastrados na hora de adquirir ou resgatar o seu ingresso no TDC; E clicar na Trilha de sua opção, e de acordo com a modalidade do seu ingresso. Logo em seguida, você será direcionado para a seguinte página com a lista de todas as palestras por Trilha: Pronto! Agora você tem acesso à centenas de palestras gravadas da sua área de interesse, para assistir como e quando quiser! Caso tenha esquecido a senha, clique na opção "Esqueci a senha" , insira o e-mail que você realizou para o cadastro no evento, e aparecerá a op

10 reasons why we love JSF

1. One-slide technology: it's so simple that I can explain basic JSF with one slide. 2. Easy to extend: components, listeners, render kit, Events, Controller, etc. 3. Real-world adoption: JBoss, Exadel, Oracle, IBM, ... 4. Architecture model: you can choose between more than 100 different architecture. 5. Open-mind community: using JSF you are going to meet very interesting people. 6. We are using JSF the last 5 years and we found very good market for JSF in Brazil 7. Progress: look to JSf 1.1 to JSF 1.2, JSF 1.2 to JSF 2.0. People are working really hard! 8. Many professionals now available 9. It's a standard. It's JCP. Before complain, report and help! 10. Ed Burns, spec leader, is an old Globalcode community friend! EXTRA: My wife is specialist in JSF. She's my F1 for JSF :) Nice job JSF community! -Vinicius Senger

Lançamento do JDK 7 no TDC2011 em São Paulo

O The Developer's Conference foi realmente um grande momento para toda comunidade de desenvolvedores, um encontro de comunidades de TI onde foi possível interagir com pessoas incríveis das comunidades .NET, PHP, Python, Cloud, Games e tantas outras. Com mais de 200 palestrantes e 25 coordenadores é difícil até citar nomes sem ser injusta. Neste post gostaria de falar um pouco sobre um acontecimento muito especial para a comunidade Java, o Lançamento mundial do JDK 7! A história toda começou há muito tempo atrás, num relacionamento construído ao longo de vários anos de atuação dos membros do SouJava, participando do JavaOne, das JSRs e muito networking. Mas, durante o último JustJava conversamos com Roger Brinkley e Bruno Souza, e tivemos a felicidade de ter o TDC2011 exatamente no dia planejado para o Lançamento Mundial do JDK7. O grande mérito foi do SouJava e do amigo Bruno Souza (JavaMan). Com a participação formal no Executive Committeé do JCP estamos ficando cada vez ma

Saiba como programar para Arduino sem ter nenhum hardware disponível

O Arduino já é uma tecnologia muito difundida entre os amantes de tecnologia. É difícil encontrar um profissional da computação que não brincou um pouco com esta ferramenta de prototipagem ou, que gostaria de fazer isso. Porém, em alguns casos, o programador quer conhecer o arduino mas não dispõe de nenhum hardware, nem mesmo da placa. Como isso poderia ser resolvido? A primeira resposta seria aquela mais simples e direta: ir as compras. Isso pode ser feito em uma loja física ou pela internet. No meu caso, por exemplo, tive a felicidade de encontrar em um site (não me lembro qual) um kit arduino, com um conjunto de sensores e um DVD com 41 vídeo aulas. Mas digamos que o profissional não esteja passando por um bom momento financeiro, ou ainda, simplesmente não queira comprar o Arduino sem antes conhecê-lo um pouco melhor. Para a última situação também já existe uma resposta, e diga-se de passagem, uma excelente resposta. Trata-se do site 123D Circuits.io . Depois de criar seu u