: left; tab-stops: 15.0cm" align=left>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 Seleciona todos os elementos pelo nome da tag. $(“p”): Seleciona todos os elementos
da página. $(“div”): Seleciona todos os elementos
$(“table”): Seleciona todas as tabelas da página. .classe ou elemento.classe Seleciona todos os elementos que possuem uma determinada classe CSS. $(“.caminho”): Seleciona todos os elementos cuja classe vale “caminho”. $(“p.caminho”): Seleciona todos os elementos
que possuem “caminho” como classe. $(“div.msg”): Seleciona todos os elementos
* Seleciona todos os elementos da página. $(“*”): Seleciona todos os elementos da página. seletor1, seletor2, seletor3 Seleciona todos os elementos que atendem a pelo menos um dos seletores especificados. $(“p, div, .caminho”): Seleciona todos os elementos
,
Tabela 1. Seletores básicos para elementos do DOM
Em um documento qualquer, poderíamos selecionar os elementos de título com $(“h1”). Também podemos pegar todos os parágrafos com $(“p”). Se o documento possui um parágrafo com classe “alfa”, podemos selecioná-lo com $(“p.alfa”). Para todos os casos, sempre podemos usar o método size() para saber quantos elementos foram selecionados no DOM:
var quantos = $(“p”).size();
Antes de estudarmos mais sobre seletores, precisamos aprender alguma coisa que facilite a visualização dos elementos selecionados. Assim, podemos estudar um pouco sobre a mudança de aparência dos elementos e aplicá-la no aprendizado dos seletores.
Mudando a aparência dos elementos
Podemos mudar a aparência de elementos do DOM de forma muito fácil. Para isso, basta chamar o método css() do objeto jQuery para consultar ou alterar o estilo dos elementos
$(“p”).css(“background-color”, “blue”);
Esse código altera a cor de fundo de todos os parágrafos da página. Também podemos alterar várias propriedades ao mesmo tempo, criando um objeto temporário com os novos valores e passando-o para o método:
var obj = {
color: “blue”,
backgroundColor: “#FF33AA”
};
$(“p”).css(obj);
Repare que os atributos do objeto temporário são escritos sem o hífen. Assim, se a propriedade chama
$(“p”).css(“color”, “blue”).css(“background-color”, “#FF33AA”);
Para consultar o valor de uma propriedade de um determinado elemento, podemos chamar o método css() apenas com o nome dessa propriedade:
var cor = $(“p”).css(“background-color”);
É importante lembrar que se o objeto jQuery possuir mais de um elemento do DOM, o método css(nome) opera sobre o primeiro elemento selecionado.
Os objetos jQuery ainda possuem outros métodos integrados com CSS. A Tabela 2 resume essa lista de métodos e apresenta alguns exemplos.
|
Método |
Descrição |
Exemplos |
|
css(nome) |
Retorna o valor da propriedade informada no primeiro elemento selecionado. |
$(“div”).css(“color”): Retorna a cor do texto no primeiro elemento
|
|
css(nome, valor) |
Altera a propriedade informada com o valor passado no segundo parâmetro. Todos os elementos selecionados sofrem essa alteração. |
$(“#menu”).css(“background-color”, “#AAAAAA”): Altera a cor de fundo do elemento cujo id é “menu” para o valor #AAAAAA. |
|
css(objeto) |
Altera todas as propriedades informadas no objeto passado como parâmetro. Todos os elementos selecionados sofrem essa alteração. |
$(“p.alfa”).css( { color: “blue”, border: “1px solid red” } ): Altera a cor do texto e a borda dos parágrafos que contém “alfa” como classe. |
|
offset() |
Retorna a distância do primeiro elemento selecionado para a parte superior e lateral esquerda da janela. |
var offset = $(“#menu”).offset(); offset.top: Distância do elemento (cujo id é “menu”) para a parte de cima da janela. offset.left: Distância do elemento (cujo id é “menu”) para a lateral esquerda da tela. |
|
height() |
Retorna a altura do primeiro elemento selecionado. |
... |
