Javascript Fácil com jQuery
Parte 1: Trabalhando com elementos no DOM
Conheça a poderosa biblioteca jQuery e seus mecanismos para facilitar e reduzir o trabalho com javascript em suas aplicações web
jQuery é uma biblioteca javascript open source que oferece uma grande variedade de funcionalidades, além de uma sintaxe fácil de aprender. A sua robusta compatibilidade permite que as aplicações funcionem nos browsers mais comuns e ainda possui centenas de plugins que estendem o seu núcleo, fazendo desta uma ferramenta essencial para qualquer desenvolvedor web.
O arquivo para produção possui apenas 26kb (versão 1.2.1 empacotada), o qual pode ser baixado do site jquery.com. Basta incluir esse arquivo no seu site e você já está pronto para começar. O site também oferece o código completo da biblioteca (legível e comentado) num arquivo de 77kb, caso você queira estudar ou modificar o código.
O que a biblioteca jQuery é capaz de fazer?
jQuery é uma biblioteca genérica para se trabalhar com javascript e ainda possui a capacidade de ser estendida para a criação de plugins. O núcleo dessa biblioteca está preparado para:
1. Acessar partes de uma página: sem uma biblioteca, é comum precisarmos de muitas linhas de código para operar na árvore de elementos do DOM (Document Object Model). A jQuery possui mecanismos fáceis e rápidos para atingir esse objetivo.
2. Modificar a aparência de uma página: a jQuery integra as vantagens do CSS (Cascading Style Sheets) com o poder do javascript. Isso significa que podemos mudar as classes e estilos dos elementos mesmo após o carregamento da página.
3. Alterar o conteúdo de uma página: é possível modificar um documento com poucas linhas de código. Assim, textos podem ser mudados, imagens podem ser inseridas ou trocadas, listas podem ser reordenadas ou todo documento pode ser reescrito.
4. Criar interação com os usuários: a jQuery possui uma forma elegante de interceptar eventos criados pelo usuário, como cliques ou teclas pressionadas, sem poluir o HTML da página. Além disso, esse tratamento de eventos elimina as inconsistências entre os browsers, o que é um sério problema para os desenvolvedores web.
5. Adicionar animação a uma página: animações são ótimos recursos para evitar transições bruscas no visual de uma página. A biblioteca possui um conjunto de efeitos prontos, como desbotamento (fade) ou deslizamento (slide), além de ser possível criar efeitos personalizados.
6. Comunicar com o servidor sem recarregar a página: A parte de AJAX também está bem integrada com as outras funcionalidades, o que permite criar páginas dinâmicas e com melhor usabilidade.
7. Simplificar tarefas comuns de javascript: A biblioteca possui melhorias para as construções do javascript, como iteração e manipulação de arrays.
Este artigo está dividido em duas partes. Nessa primeira parte abordamos dos tópicos 1 ao 3, o que já significa bastante funcionalidade. A segunda parte do artigo explica os tópicos 4, 5, 6 e 7, além de fornecer outros detalhes sobre plugins e projetos de extensão.
Conhecendo a sintaxe
Uma das grandes facilidades da biblioteca jQuery está na sua função principal chamada $(). Tipicamente, essa função recebe uma string como parâmetro que representa uma consulta (query) nos elementos do DOM (daí surgiu o nome jQuery). Na verdade, a função $() é uma fábrica de objetos jQuery, os quais encapsulam os elementos do DOM. Portanto, o resultado da chamada a função $() sempre retorna um objeto jQuery contendo zero, um ou vários elementos do DOM. Para explicar o que isso significa, imagine o seguinte trecho de uma página HTML:
...
Parágrafo 1
Parágrafo 2
...
Se executarmos a chamada $(“.estilo”) na página acima, teríamos um objeto jQuery que encapsula os dois elementos de parágrafo. Repare que usamos a string “.estilo” para selecionar todos os elementos que possuem “estilo” como classe CSS. Essa string seria a mesma que o CSS usaria para definir a apresentação dos elementos. Por exemplo:
.estilo { color: #333333; }
A maioria dos parâmetros (também chamados de seletores) da função $() segue a sintaxe padrão do CSS. A Tabela 1 apresenta um resumo dos seletores básicos, contendo descrição e exemplos de uso. Com base nessa tabela, podemos selecionar o primeiro parágrafo do exemplo anterior chamando $(“#p1”), já que esse elemento possui id = “p1”.
|
Seletor |
Descrição |
Exemplos |
|
#id |
Seleciona o elemento que possui o valor do id fornecido. |
$(“#janela”): Seleciona o elemento cujo id vale “janela”. |
|
elemento |
ATENÇÃO! A EXIBIÇÃO DESTE ARTIGO FOI INTERROMPIDA.
|
|
|
|
|
Conheça os planos de créditos DevMedia e visualize esse post agora mesmo!
#Este é um post fechado 
1
0
