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

12 ESQUENTAS TDC ESPERANDO POR VOCÊ

O TDC nasceu do sonho de profissionais que valorizam o compartilhamento de conhecimento, experiências e oportunidades entre as comunidades de desenvolvedores.  Por isso, o crescimento do TDC nunca poderia ficar longe do crescimento das comunidades! Pensando nessa união, criamos um projeto quente: O ESQUENTA TDC ! Visando divulgar os meetups de comunidades que querem transformar e inspirar carreiras, foi co-criado este projeto lindo e cheio de apoio, onde o TDC abraça meetups de diversas comunidades espalhadas pelo Brasil e elas contribuem com a divulgação da edição regente.  O TDC Innovation vai rolar de 14 a 16 de JUNHO, mas até lá vão acontecer muitos encontros incríveis!  Fique por dentro das comunidades que vão participar, quais temas irão abordar e claro as datas e locais para você participar. 💥Esquentas TDC Innovation 2023: 24/05 - Esquenta TDC: Carreira e Desenvolvimento Presencial em Floripa das 19:00 as 21:30 com inscrição AQUI Comunidade: Google Developers Groups Nova

Palestras do TDC Business Disponíveis Online

🚨 Atenção, TDC Lovers! O TDC Business em São Paulo acabou, mas os conteúdos mal começaram!  Não pô de aproveitar a STADIUM ao vivo? Não tem problema, porque trouxemos ela até você. Todas as palestras da STADIUM, palco principal do TDC, já estão no ar e liberadas para qualquer pessoa assistir. Essa Trilha incrível conta com palestras de Trilhas Premium e temas variados de forma GRATUITA para você poder maratonar de casa!  Aproveite para prestigiar seu evento de TI favorito com pipoca direto do seu sofá. 🎥 🍿 Gravação da STADIUM, 22 a 24 de Agosto de 2022, disponível aqui: https://www.globalcode.com.br/videos/tdc-2022-business/  Todas as demais trilhas do TDC Business serão publicadas gradualmente nas próximas semanas, fique atento aos nossos e-mails, você será notificado por lá quando sua Trilha estiver disponível. Acompanhe nossas redes sociais para não perder nada e ficar por dentro de todas as novidades do TDC!

TDC INNOVATION lança University Pass

Modalidade de ingresso tem como objetivo ajudar na capacitação dos universitários Uma pesquisa realizada em 2020 pela Associação Brasileira das Empresas de Tecnologia da Informação e Comunicação (Brasscom) diz que até o ano de 2024 o Brasil precisará de cerca de 420 mil profissionais na área de Tecnologia da Informação. Porém, por ano, a mesma pesquisa diz que o país forma apenas 46 mil profissionais capacitados no nicho. Pensando nisso, para ajudar na formação e capacitação desses jovens profissionais, o TDC INNOVATION, segunda edição do ano do The Developer's Conference, lança o University Pass, modalidade de ingresso que possibilita aceso digital gratuito a todas as palestras do evento, ou com 50% de desconto para quem preferir ir pessoalmente. Com o tema central “Desafios para a criação do futuro Digital”, o TDC INNOVATION ocorrerá entre 1 e 3 de junho, de forma híbrida: presencialmente no Centro de Convenções CentroSul, em Florianópolis, e com transmissão simultaneamente pela

Inspire a mudança com a liderança ágil

A liderança ágil é essencial para que uma organização realize mudanças de negócios significativas. Ser líder é uma tarefa desafiadora, especialmente em um cenário de constantes transformações, principalmente na forma de lidar com a relação empresa e pessoal. Pesquisas sobre liderança na era digital revelam que algumas soft skills têm sido substituídas por outras, o profundo conhecimento na área de negócio, ser referência nas tecnologias utilizadas, ter foco total no prazo e nas entregas e conhecer um arsenal de técnicas e ferramentas, têm dado espaço a habilidades, como: empatia; adaptabilidade; senso de equipe; visão e propósito; engajamento constante. A colaboração entre pessoas de todos os níveis hierárquicos são vitais, afinal, as equipes estão trabalhando para o mesmo objetivo: o encantamento e atendimento das necessidades do cliente que proporcionarão um crescimento sustentável da organização. Com propósito claro, estratégia e prioridades definidas, os times desfrutam de uma ma

TDC Digital: o que você precisa saber para transformar sua carreira em 2022

O TDC Digital é o maior evento de TI do mercado e proporciona crescimento profissional a partir de palestras com especialistas e oportunidades de networking com o mundo todo, direto da sua casa. Através da escolha individual de cada participante é possível obter experiências imersivas e transformadoras conforme o tema-chave de cada trilha.  O evento também é o lugar ideal para ajudar no desenvolvimento de carreiras, permitindo que qualquer pessoa com vontade — e um tema interessante — seja palestrante e compartilhe suas experiências e conhecimentos. Para aqueles que querem  participar como ouvinte a plataforma do TDC favorece conferências dinâmicas, e o encontro de diversas comunidades e ecossistemas de TI. E, após a escolha de uma trilha, fica mais fácil acompanhar especialistas para aprender e se inspirar. Em 2021 , o The Developer’s Conference (TDC) foi 100% digital e, em três dias de evento, contou com mais de 300 horas de conteúdos , incluindo: Agile; Testes; Design; Web e Mobile;

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