Introdução ao jQuery

jQuery é uma biblioteca JavaScript criada por John Resig, de código aberto, liberada sob a licença GPL (General Public Licence), o que significa que você pode usar a biblioteca gratuitamente tanto em desenvolvimento de projetos pessoais como comerciais.

Segundo John Resig, “O foco principal da biblioteca jQuery é a simplicidade. Por que submeter os desenvolvedores ao martírio de escrever longos e complexos códigos para criar simples efeitos?”.

Simplicidade é o objetivo do desenvolvimento com jQuery. Muitas linhas de programação JavaScript para obter um simples efeito sobre determinado objeto são substituídas por algumas, escritas com jQuery.

Para que serve jQuery?

jQuery foi desenvolvida para facilitar a maneira em que adicionamos interatividade e dinamismo às páginas web, proporcionando ao desenvolvedor funcionalidades para desenvolver scripts visando incrementar, de forma não obstrutiva, a usabilidade, a acessibilidade e o design, enriquecendo a navegação do usuário.

O que seria incrementar de forma não obstrutiva?

Imagine uma página desenvolvida com inúmeros efeitos e funcionalidades em JavaScript/jQuery, como esta página se comportará em um navegador com JavaScript desabilitado? Ou que não tenha suporte a JavaScript? Se a página foi desenvolvida de maneira obstrutiva o conteúdo que dependia dessas funcionalidades não ficará acessível, isso quer dizer que está página não está acessível em todo tipo de navegador, o que temos que ter em mente ao adicionar tais efeitos e funcionalidades é primeiro desenvolver uma página acessível e depois adicionar funcionalidades JavaScript/jQuery sem afetar a estrutura da página, para que caso o JavaScript não esteja disponível no lado do cliente, a página ainda deverá continuar mostrando o conteúdo, sem os efeitos que planejamos, mas ainda estará passando as informações que desejamos. Veremos em breve um artigo voltado somente para este assunto.

O que podemos fazer com jQuery?

  • Adicionar efeitos visuais e animações;
  • Acessar e manipular qualquer componente da página;
  • Buscar informações no servidor sem necessidade de recarregar a página;
  • Prover interatividade;
  • Alterar conteúdos;
  • Modificar apresentação e estilização;

Principais características:

  • Arquitetura simples e extensível para instalação de plugins e criação de plugins;
  • Utiliza seletores CSS para busca de elementos DOM na árvore HTML;
  • Emprego cross-browser, elimina a incompatibilidade entre os navegadores;
  • Não é necessário criar loops para busca de elementos na árvore DOM;
  • Programação encadeada, pois todo método retorna um objeto;
  • Extensível, admite criação e inserção de novas funcionalidades;

Como instalo jQuery no meu projeto?

A biblioteca jQuery não precisa ser instalada para ser utilizada no seu projeto, já que é um arquivo JavaScript comum(.js), é necessário apenas que você crie um link para o arquivo entre as tags <head> da página onde a biblioteca será necessária, ou seja, faça uma ligação entre a página web que utilizará recursos jQuery e o arquivo da biblioteca jQuery, seria como se a biblioteca fosse importada para a página web tornando os recursos jQuery acessíveis.

Plugins jQuery

No site oficial da biblioteca jQuery, temos uma lista de plugins escritos com a biblioteca disponíveis para download, iremos deixar este assunto para os próximos artigos, após estudarmos a sintaxe da biblioteca jQuery iremos aprender a utilizar os plugins disponíveis na internet, quando criar seu próprio plugin e como criá-lo.

Para ver a lista de plugins disponíveis acesse: http://plugins.jquery.com/

Desenvolvendo uma página de Hello World com jQuery
Agora vamos desenvolver um exemplo básico demonstrando a utilização da biblioteca jQuery.

Vamos seguir os seguintes passos:

  1. Fazer o download da biblioteca;
  2. Criar uma página web;
  3. Criar um link para a biblioteca;
  4. Adicionar uma funcionalidade usando jQuery na própria página;

Primeiro vamos efetuar o download do jQuery em seu site oficial: http://jquery.com/

É recomendada a utilização da versão PRODUCTION (Minified), ou seja, a versão compactada da biblioteca jQuery, para economizar o consumo de banda entre as requisições, existe uma diferença considerável de tamanho entre as versões (compactadas e não compactadas).

Agora vamos criar nossa página index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Hello World</title>
</head>
<body>
    <h1>P&aacute;gina de demonstra&ccedil;&atilde;o</h1>
    <h2>Exemplo 1</h2>
</body>
</html>

Criando um link para a biblioteca (importando a biblioteca para página)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Hello World</title>
    <!-- Referencia a biblioteca jquery (JS) -->
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
    <h1>P&aacute;gina de demonstra&ccedil;&atilde;o</h1>
    <h2>Exemplo 1</h2>
</body>
</html>

Pronto, agora podemos utilizar a biblioteca da maneira que for necessária, podemos escrever códigos em jQuery na própria página ou criar um arquivo JavaScript(.js) e criar um link assim como fizemos para a biblioteca, ligando a página ao arquivo com as funcionalidades escritas em jQuery. Aqui vamos escrever está simples funcionalidade na própria página.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Hello World</title>
    <!-- Referencia a biblioteca jquery (JS) -->
    <script type="text/javascript" src="jquery.js"></script>
    <!-- Funcionalidades da página -->
    <script type="text/javascript">
        $(document).ready(function(){
            // Exibindo mensagem logo após a página ser carregada
            alert('Hello Word');
        });
    </script>
</head>
<body>
    <h1>P&aacute;gina de demonstra&ccedil;&atilde;o</h1>
    <h2>Exemplo 1</h2>
</body>
</html>

Neste exemplo utilizamos apenas 2 arquivos, 1 arquivo JavaScript referente a biblioteca jQuery e 1 arquivo HTML que faz uma referencia a biblioteca jQuery e declara uma funcionalidade no próprio documento HTML.

Demonstração do exemplo:

Para visualizar o resultado do exemplo desenvolvido, clique aqui.

Para visualizar o exemplo com a funcionalidade externa (outro arquivo JavaScript), clique aqui.

OBS: O resultado das demonstrações é o mesmo, mas se você imaginar uma página com muitas funcionalidades irá notar que a segunda opção organiza melhor o código.

  • Arthur V. Kasper

    02/07/2010 às 01:15

    No caso das características, o que seria “Programação encadeada, pois todo método retorna um objeto;”

  • Diogo Matheus

    03/07/2010 às 01:02

    Olá Arthur,

    Explicando de uma maneira simples, todo método retorna o próprio objeto “modificado”, Por exemplo:
    $(‘#caixa’).css(‘opacity’, 0.5).css(‘color’, ‘#FFFFFF’);
    Nesse exemplo selecionamos a DIV com ID “caixa” e informamos que ela ficará 50% transparente e a cor de sua fonte será branco, primeiro é atribuido que ele será transparente em seguida utilizando o “.” novamente chamamos outro método para informar a cor de sua fonte.
    Pelo fato de todo método retornar o próprio objeto modificado isso se tornou possível, dois métodos foram chamados de forma encadeada sem necessidade de digitar código repetido.

    Abraço

  • Leandro

    16/04/2012 às 16:26

    Estou fazendo um painel de controle para o meu site http://www.paginadigital.com.br inteiro com jQuery. Será tipo o Windows, mais online, com janelas e barra de início. jQuery é fantástico.

Deixe uma resposta

O seu endereço de e-mail não será publicado.. Campos obrigatórios são marcados com *