Introdução ao JQuery

Neste post irei  mostrar um pouco dos recursos que o JQuery, poderá trazer de interatividade nos seus websites.

O JQuery é uma biblioteca Javascript que foi desenvolvida para simplificar os scripts que rodam no lado cliente que interagem com o HTML, essa simplificação é muito grande se comparado ao Javascript propriamente dito.

Para aqueles que já possuiram algum contato com a linguagem de scripts Javascript, a curva de aprendizado é bem tranquila, pois a sintaxe é a mesma, o que muda é a implementação de novas funções que visam facilitar a escrita e leitura do código para uma possível manutenção ou reaproveitamento;

Vejamos um exemplo desta optimização:

Em Javascript

document.getElementById('teste').value = 5;

Em JQuery

$('#teste').val(5);

Bom, vamos iniciar

Para baixar o jQuery precisamos acessar o site http://jquery.com e ir até a seção de downloads. Para este artigo usamos a versão 1.6.4 Uncompressed. Trata-se de uma arquivo chamado jquery-1.6.4.js . Salve este arquivo em qualquer diretório público no seu servidor web, ou sua estação de desenvolvimento (seu computador).

Feito isso, podemos escrever páginas em HTML tranquilamente somente referenciando o local onde está armazenado o arquivo baixado, vamos para um exemplo básico onde temos uma div e dois botões, cada um deles com um evento sobre a div, um oculta ela e o outro exibe, tudo de forma gradual.

Vejam o código como ficou:

<html>

	<head>
<title>Exemplo JQuery</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script src="../Scripts/jquery-1.6.4.js" type="text/javascript" ></script>

</head>

<body>

<input type="button" id="btnAbrir" onclick="$('#dvTexto').show('slow')" value="Abrir"/>

<input type="button" id="btnFechar" onclick="$('#dvTexto').hide('slow')" value="Fechar"/>

<div id="dvTexto">

Este é um exemplo dos poderes do JQuery: exibir e ocultar esta div.

</div>

</body>

</html>

Note que esta DIV possui o valor “dvTexto” para sua propriedade id, ou seja, este elemento pode agora ser manipulando usando tal identificação. Vejamos agora o código para os dois botões:

<input type=”button” id=”btnAbrir” onclick=”$(‘#dvTexto’).show(‘slow’)” value=”Abrir”/>

<input type=”button” id=”btnFechar” onclick=”$(‘#dvTexto’).hide(‘slow’)” value=”Fechar”/>

Estes são os botões usados para exibir ou ocultar a DIV. Veja que no evento onclick do primeiro botão nós temos:

onclick=”$(‘#dvTexto’).show(‘slow’)”

Observe como usamos o identificador da DIV para chamar o método show(). O valor “slow” fornecido para o método é o responsável por fazer com que o elemento seja exibido lentamente. O código para o segundo botão segue a mesma lógica, desta vez usando o método hide().

Links complementares com funções e outros recursos: http://api.jquery,com

Bom, por hoje é só, continuarei postando alguns dos recursos do JQuery na sequência, até a próxima.

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s