Trabalhando com jQuery e ASP.NET - Revista .Net Magazine 90

A evolução no desenvolvimento de páginas WEB trouxe uma crescente e desafiadora busca por interatividade e usabilidade entre usuário e aplicação. Desenvolvimento rápido e ágil é um dos desafios do jQuery, que juntamente com a estrutura DOM (Document Object Model) simplifica a manipulação dos elementos HTML, a fim de proporcionar uma maior produtividade. A Microsoft segue esta mesma linha e por isso está lançando um novo conceito em relação aos seus componentes, usufruindo da biblioteca jQuery.

Apresentando o jQuery

A biblioteca jQuery surgiu em 2006, criada pelo americano John Resing que observou a necessidade de simplificar a utilização do JavaScript e seus complexos e trabalhosos recursos. O jQuery se destaca pela capacidade de resolver questões de compatibilidade entre navegadores de forma transparente, reduzindo significativamente a quantidade de código necessário para criar animações personalizadas, produzir efeitos distintos, acessar e modificar estruturas de documentos, entre outros.

O jQuery está centrado na recuperação de elementos e execução de ações em páginas HTML, destacando-se a função $(), que dependendo dos parâmetros passados pode tanto selecionar e criar elementos como manipular eventos.

A função $() retorna um objeto do tipo jQuery, que armazena todos os elements do DOM, como div, h, p e a. Um element pode conter atributos e elementos filhos, fornecendo métodos para navegar entre seus nós. Nesse sentido, o objeto jQuery se comporta como um array (apesar de não ser um tipo Array do JavaScript), sendo possível acessar e percorrer seus elements por meio de um índice. Sempre que um método provocar alterações no conjunto de elementos, será criado um novo objeto jQuery contendo essas alterações, possibilitando o retorno ao estado anterior através do método end().

A utilização de uma string passada como parâmetro para a função $() permite retornar um objeto jQuery com os elementos da seleção, que podem ser utilizados na edição e manipulação da estrutura do documento. Esse é o mecanismo dos seletores, que possuem uma sintaxe parecida com a utilizada no CSS, porém com algumas opções adicionais do jQuery, resultando em um poderoso mecanismo de busca. No código a seguir,

$("p").css("text-align", "justify");

um seletor CSS “p” foi passado como parâmetro para filtrar todos os parágrafos do documento, e também a ação que configura o alinhamento do texto como justificado.

Um dos métodos mais importantes do jQuery é o ready(), que permite executar código logo após o navegador analisar o documento e converter o HTML para a estrutura de árvore DOM. Isto significa que não é necessário esperar o carregamento de recursos externos como imagens e vídeos para acrescentar novos comportamentos. Na sentença a seguir,

$(document).ready(function() {
  $("table tbody tr:even").css("background","#00FF22");  
  });

o efeito “zebrado” foi definido, adicionando um novo comportamento ao elemento table, e sem a necessidade de aguardar o carregamento completo da página. Em contrapartida, com JavaScript puro seria necessário utilizar o efeito onLoad, que ocorre apenas quando todos os recursos das páginas foram carregados.

Caso alguma funcionalidade da biblioteca padrão do jQuery não atenda as necessidades do desenvolvedor, este tem à disposição uma gama de plugins que poderão ser utilizados para prover recursos adicionais, tais como validação, mudança de aparência, personalização de mensagem e novos componentes visuais.