# Johnatan Oliveira ~ joww.net - Internet, Segurança, Tecnologia, Linux, Programação, Música e Vida Profissional » jQuery http://www.joww.net/blog Internet, Segurança, Tecnologia, Linux, Programação, Música e Vida Profissional Thu, 02 Sep 2010 13:13:59 +0000 en hourly 1 http://wordpress.org/?v=3.0 { jQuery } Aprendendo e Usando. (p1) http://www.joww.net/blog/2009/08/18/jquery-aprendendo-e-usando-p1/ http://www.joww.net/blog/2009/08/18/jquery-aprendendo-e-usando-p1/#comments Tue, 18 Aug 2009 10:32:46 +0000 Johnatan Oliveira joww.net http://www.joww.net/blog/?p=247 Olá Pessoal.

Vo tentar passar para vocês alguns tópicos sobre a biblioteca jQuery ( http://jquery.com/ ), do início a algo mais complexo.
Ter conhecimento sobre javascript e modelo de objeto de documento (DOM) são requisito necessários. No processo vou passar do simples hello world, a seletores, eventos, ajax, efeitos e etc.
Para um bom acompanhamento e imprescindível compreender, testar e alterar a sua maneira, para melhor aprendizado.

jquery

Configuração

Para começar, nós precisamos de uma cópia da biblioteca jQuery. A versão mais recente ( v1.3.2 em ago/2009 ) pode ser encontrada neste link ( http://docs.jquery.com/Downloading_jQuery ).
Só fazer o download e aplicar no <head> ( <script src=”jquery-1.3.2.min.js” type=”text/javascript”></script> ) ou usar direto em ( <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js” type=”text/javascript”></script> ).

Simples “Olá jQuery” num link

Como quase tudo o que fazemos quando estamos utilizando o jQuery, lê ou manipula um modelo de objeto de documento (DOM), precisamos nos certificar que começamos adicionado eventos ou qualquer outra função, logo que a aplicação esteja pronta.
Para fazer isso, nós registramos o evento ready (pronto) para o documento.

$(document).ready(function() {
// faça alguma coisa quando o DOM estiver pronto
});

Colocar um alert nesta função não faz muito sentido, pois o alert não requer que o DOM esteja carregado. Então vamos tentar algo mais sofisticado: Mostrar um alert quando clicarmos o link.

$(document).ready(function() {
$(“a”).click(function() {
alert(“Olá jQuery!”);
});
})

Dessa forma o alert será exibido assim que você clicar no link.

$(“a”) é um seletor do jQuery, neste caso, ele seleciona todos os elementos a. O $ por si só é um alias para a “classe” jQuery, por outro lado o $() constrói um novo objeto jQuery.
A função click() que chamamos depois é um método do objeto jQuery. Ele liga o evento clique a todos os elementos selecionados (neste caso, um único elemento a) que colocaremos na página e executa a função fornecida quando o evento ocorre.

Isto é similar ao seguinte código:
<a href=”#” onclick=”alert(‘Olá mundo’)”>Link</a>

A diferença é bem óbvia: Nós não precisamos escrever onclick para todo elemento. Nós temos uma separação clara de estrutura (HTML) e comportamento (JS), assim como separamos estrutura e formatação utilizando CSS.

Final

<script src=”jquery-1.3.2.min.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(document).ready(function() {
$(“a”).click(function() {
alert(“Olá jQuery!”);
});
});
</script><a href=”#”>Link</a>

Esse foi simples não é? Vamos elaborar um pouquinho mais! Vamos adicionar o evento click a uma div. Dentro do <body> coloque:

<div id=”divalerta”>Exibir msg jQuery</div>

Esse div tem que ter um id, para identificarmos no código jQuery. Para que a div funcione como um botão, aplicaremos um CSS.

<style type=”text/css” media=”screen” title=”Estilo criado para o botão”>
div.botao { line-height:30px; width:105px; padding: 0 10px; background: #e1e1e1; border:1px solid #333; cursor:pointer; }
</style>

Neste caso a função fica:

<script type=”text/javascript”>
$(document).ready(function() {
$(“#divalerta”).click(function(){
alert(“Olá jQuery!”);
});
});
</script>

A parte onde você encontra $(#divalerta) você está definido qual será o objeto que irá disparar a ação, .click(); diz qual ação irá acontecer ao clicar no objeto declarando anteriormente, e alert(); faz com que o alerta seja criado.

Basta testar, salve como .html.

Final

<html>
<head>
<style type=”text/css” media=”screen” title=”Estilo criado para o botão”>
div.botao { line-height:30px; width:125px; padding: 0 10px; background: #bbb; border:1px solid #333; cursor:pointer; }
</style>
<script src=”jquery-1.3.2.min.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(document).ready(function() {
$(“#divalerta”).click(function(){
alert(“Olá jQuery!”);
});
});
</script>
</head>
<body>
<div id=”divalerta” class=”botao” >Exibir msg jQuery</div>
</body>
</html>


[ TESTE AQUI!! ]

É isso ai pessoal, até a próxima.
Abraços

]]> http://www.joww.net/blog/2009/08/18/jquery-aprendendo-e-usando-p1/feed/ 2