JQuery

No início da web, a linguagem JavaScript era vista coma linguagem difícil de aprender e utilizar. Depois de uma semana estudando a linguagem, conseguíamos escrever um script que validava um formulário e que com certeza daria erro nos navegadores que eram diferentes do que utilizamos para desenvolver. Afinal, cada navegador tinha o seu próprio padrão de implementação do JavaScript. Poré, para nossa sorte, foram estabelecidos padrões para a linguagem e também houve o surgimento de diversas bibliotecas que foram criadas para lidar com essas diferenças entre navegadores. Desse universo é que surge a jQuery.

A jQuery é uma biblioteca JavaScript, cross-browser, desenvolvida por John Resig. Foi lançada em janeiro de 2006, e se tornou uma das bibliotecas JavaScript mais populares da internet.

A biblioteca é disponibilizada como software livre e disponibilizada sobre as regras das licenças MIT e GPL. Ou seja, é uma biblioteca que pode ser utilizada tanto para projetos pessoais como para projetos comerciais, sem a necessidade de pagar qualquer tipo de licença de uso.

Foi criada tendo como foco a simplicidade e com o objetivo de facilitar a programação JavaScript. Programas que utilizariam linhas e mais linhas de código para obter um determinado efeito ou carregar um componente AJAX, são substituídos por poucas instruções utilizando jQuery o que permite o uso dela por designers e desenvolvedores com pouco conhecimento de JavaScript.

A jQuery é leve (em torno de 30kb), extensível, oferece suporte a plugins e atualmente conta com uma vasta comunidade de programadores que diariamente acrescentam novos recursos à biblioteca. Além de funções, oferece ao programador uma grande quantidade de controles de interface.

A jQuery pode ser utilizada para: adicionar efeitos visuais e animações; acessar e manipular o DOM; carregar componentes AJAX; prover interatividade; alterar conteúdos; simplificar tarefas JavaScript.

A jQuery foi criada para ser uma biblioteca compatível com qualquer navegador Web. Ela resolve para o programador a penosa tarefa de desenvolver programas em JavaScript tendo que prever a enorme gama de navegadores em que sua página poderá rodar. Sabemos que cada navegador tem seu próprio conjunto de características de implementação, que ainda podem variar de acordo com a plataforma e sistema operacional onde estiver rodando. Com a jQuery, a programação é única e transparente.

A jQuery oferece suporte a CSS3. Você pode utilizar os seletores CSS3 mesmo que o navegador não tenha suporte a esta versão de folhas de estilo. No caso da jQuery, ela própria implementa os seletores CSS3, o que a torna independente do navegador em que estiver rodando.

A biblioteca pode ser obtida gratuitamente no site http://jquery.com/. Na página principal, no lado direito da página há um botão de Download (jQuery) onde podemos escolher entre duas versões:

  • PRODUCTION : a versão voltada para ambiente de produção. É uma versão com o código em formato minimizado, sem quebras de linha e com o código obscurecido. Essa versão tem em torno de 15% do tamanho da versão de Desenvolvimento (DEVELOPMENT);
  • DEVELOPMENT: a versão de desenvolvimento. É a versão não compactada da biblioteca e com o código não obscurecido. É ideal para ambientes de desenvolvimento por se integrar facilmente às ferramentas e IDEs.

Basta escolher a versão que você deseja baixar e clicar em Download. A biblioteca abrirá em formato de código JavaScript no próprio navegador, e você deverá clicar em Arquivo > Salvar e guardar a biblioteca na sua pasta de desenvolvimento.

Usualmente guardamos a biblioteca com o nome jquery-1.5.1.min.js quando for a versão compactada, ou com o nome jquery-1.5.1.js quando for a versão de desenvolvimento.

Preferencialmente, salve a jQuery em uma pasta “js” dentro da sua pasta principal de desenvolvimento, ou na raiz do seu site.

Para utilizar a jQuery dentro de uma página HTML, após baixar e salvar a mesma dentro da pasta do nosso site, vamos referenciar a mesma através do parâmetro src da tag script:

<script type=”text/javascript” src=”jquery-1.5.1.min.js”></script>

Também é muito comum encontrarmos na internet páginas que fazem referência a jQuery apontando os servidores do Google:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js”></script>

Construtores com Jquery

A jQuery faz uso do construtor $() para encontrar os elementos HTML dentro da página e utilizar as funções da biblioteca. Tecnicamente chamamos ele de construtor, ou função construtora e ele estará nas páginas em que vamos utilizar a jQuery.

É denominado dessa forma para ser simples e fácil de decorar. E o fato de se chamar $, evita que ocorra conflitos com outras funções da biblioteca do usuário. Eventualmente, podemos estar utilizando alguma outra biblioteca que faça uso de uma função chamada $. Nesse caso podemos utilizar como alternativa a função jQuery().

O construtor faz uso de um parâmetro $(alvo), onde ‘alvo’ é um seletor CSS do tipo TAG, id, ou classe como nos exemplos abaixo:

$(‘h1’);

$(‘p’);

4(‘table’);

$(‘#conteudo’);

$(‘.negrito’);

Nos exemplos acima, estamos instruindo a jQuery a encontrar os elementos H1, P, TABLE, e os elementos de id=”conteudo” e class=”negrito”.

Um dos requisitos básicos para utilizar a jQuery é saber usar os seletores CSS.

Uma das primeiras coisas que devemos aprender sobre a jQuery é sobre como fazer uso da função $(document).ready(). De maneira bem simples, podemos dizer que essa função é responsável por executar o conteúdo do método ready() tão logo o navegador tenha carregado todos os elementos HTML.

A prática mais comum, é utilizarmos ela em conjunto com uma função anônima, contendo os comandos que queremos executar:

$(document).ready(function() {

// seu código jQuery vai aqui

});

Uma das vantagens que o uso do método ready() nos apresenta, é a possibilidade de separar o código contendo o comportamento da nossa página em um arquivo separado sem misturar JavaScript com o HTML.

Uma das coisas que mais fazemos usualmente, é executar algum código JavaScript logo após a carga da página para inicializarmos nosso código JavaScript utilizando o evento onLoad:

window.onload = function() { alert(“página carregada”);}

Essa prática porém, traz consigo o fato de que o nosso código não será executado enquanto todas as imagens da página, incluindo banners, não forem carregados. Mas ao mesmo tempo, o evento onLoad é a única saída quando precisamos garantir que todos os elementos da página já estão disponíveis no DOM para serem manipulados e utilizados.

Encadeamento de métodos no Jquery

Por fim, outro conceito muito importante da jQuery é o encadeamento de métodos. Vamos tomar como referência a seguinte página 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=utf-8″ />

<title>Encadeamentos</title>

<style type=”text/css”>

.escondido {

display: none;

}

</style>

<script type=”text/javascript” src=”jquery-1.5.1.js”></script>

<script type=”text/javascript”>

$(document).ready( function() {

// aciona os eventos de forma encadeada

$(‘div’).addClass(‘escondido’).fadeIn(3000);

});

</script>

</head>

<body>

<div>

<h1>Encadeamentos</h1>

<p>Teste.</p>

</div>

</body>

</html>

Repare na linha “$(‘div’).addClass(‘escondido’).fadeIn(3000);”, pois nela temos o nosso exemplo de encadeamento de métodos. No comando acima, estamos dizendo para jQuery encontrar os elementos da página, adicionar a classe escondido a eles, e exibir eles com um fade in que deve durar 3 segundos.

Uma tarefa bastante comum é a de adicionar ou remover classes de elementos HTML. A jQuery disponibiliza três métodos para tal função:

  • addClass(“lista”) : adiciona uma ou mais classes;
  • removeClass(“lista”) : remove uma ou mais classes;
  • toggleClass(“lista”) : adiciona ou remove uma ou mais classes de um elemento, dependendo se elas estiverem ou não presentes no elemento. Se estiverem presentes, remove, caso contrário, adiciona.

3

Source: scriptcase / JQuery

Comments

comments

Greg

Old school developer with a passion for food, bikes and a whole lot of weird things.

Leave a Reply

Your email address will not be published.