JQuery

Giovane Montine Moreira Gurgel

giovane.gurgel@ifrn.edu.br

Instalao
Acesse http://www.jquery.com Duas verses disponveis para download:
Compacta:
jquery-1.4.2.min.js

Com linhas e comentrios:

jquery-1.4.2.js

Online:
<script type=text/javascript src= http://code.jquery.com/jquery.js></script>

Selecionando elementos pelo ID

toggleClass: adiciona uma classe ao elemento e remove caso j tenha sido aplicado; addClass: aplica uma classe ao elemento.
<style> .escolhido { background-color: cyan; } </style> <h1>Selecionando um pargrafo</h1> <p>Pargrafo 1.</p> <p>Pargrafo 2.</p> <p id=tres>Pargrafo 3.</p> <p>Pargrafo 4.</p> <input type="button" value="Alterar pargrafo" onclick=selecionando()">
3

function selecionando(){ $('#tres').toggleClass('escolhido'); }

Selecionando um conjunto de elementos

size: retorna o total de elementos selecionados; Pode selecionar baseado no estilo.
function contando(){ var total = $(p').size(); alert(existem + total + pargrafos); } <p>Pargrafo 1.</p> <p>Pargrafo 2.</p> <p id=tres>Pargrafo 3.</p> <p>Pargrafo 4.</p> <input type="button" value=Contar pargrafos" onclick=contando()">

Selecionando o primeiro elemento

:first primeiro elemento; :last ltimo elemento; css: altera/recupera atributos dos estilos;
function setEstilo(){ $('p:first').css('font-style','italic'); } function getEstilo(){ var estilo = $('p:first').css('font-style'); alert(estilo); } <p>Pargrafo 1.</p> <p>Pargrafo 2.</p> <p id=tres>Pargrafo 3.</p> <p>Pargrafo 4.</p> <input type="button" value=Alterar estilo" onclick=setEstilo()">
5

Mostrando / escondendo elementos

show() primeiro elemento; hide() ltimo elemento;
function mostra(){ $('p:first').show(); } function esconde(){ $('p:first').hide(); } <p>Pargrafo 1.</p> <p>Pargrafo 2.</p> <p id=tres>Pargrafo 3.</p> <p>Pargrafo 4.</p> <input type="button" value=Esconder" onclick=esconde()"> <input type="button" value=Mostrar" onclick=mostra()">
6

Fading elementos
fadingIn(duracao) aparece gradualmente; fadingOut(duracao) desaparece gradualmente;
function fadeIn(){ $('#img1').fadeIn(); } function fadeOut(){ $('#img1').fadeOut(); } <img id="img1" src="img1.jpg" width="200" height="200"> <input type="button" value="Fade out" onclick="fadeOut()"> <input type="button" value="Fade in" onclick="fadeIn()">

SLIDE - Mostrando / escondendo elementos

slideUp(slow||normal||fast); slideDown(slow||normal||fast);
function fecha() { $('p:first').slideUp('slow'); } function abre() { $('p:first').slideDown('slow'); } <p>Pargrafo 1.</p> <p>Pargrafo 2.</p> <p id=tres>Pargrafo 3.</p> <p>Pargrafo 4.</p> <input type="button" value=Fechando" onclick=fecha()"> <input type="button" value=Abrindo" onclick=abre()">
8

Criando novos elementos HTML

(elem).insertAfter(seletor) insere elem depois de seletor; (elem).insertBefore(seletor) insere elem antes de seletor;
function inserirDepois(){ $('<p>eu sou novo elemento HTML</p>').insertAfter('p:first'); } function inserirAntes(){ $('<p>eu sou novo</p>').insertBefore('p:first'); } <p>Pargrafo 1.</p> <p>Pargrafo 2.</p> <p id=tres>Pargrafo 3.</p> <p>Pargrafo 4.</p> <input type="button" value="NOVO DEPOIS" onclick="inserirDepois()"> <input type="button" value="NOVO ANTES" onclick="inserirAntes()">
9

Alterando o contedo de elementos HTML $(elemen).html(conteudo) insere conteudo em elemen.

function chdiv(){ $('#div1').html('<strong>OK</strong>'); }

<div id="div1" style="border:1px solid gray;width:200px;height:200px;"> TESTE </div> <input type="button" value=Alterar contedo" onclick="chdiv()">

10

Alterando o contedo de campos de forms $(elemen).val(conteudo) insere conteudo em elemen; $(elemen).val() retorna o value de elemen.
function setNome(){ $('#nome').val('Fulano'); } function getNome(){ alert($('#nome').val()); } <form> <input type="text" id="nome" name="nome"> <input type="button" value="Show nome" onclick="getNome()"> <input type="button" value="Alterar nome" onclick="setNome()"> </form>

11

Exerccio
Elabore uma pgina que simule o Twitter. As mensagens so inseridas em uma tag <p>, sendo que a ltima mensagem sempre aparece no topo (use o fadeIn). Cada mensagem deve ter um link para apagar a mensagem. A pgina deve ter uma seo para mostrar os seguidores e os cones de lista e expandido.

12

Assynchronous JavaScript and XML (AJAX)

Processamento server-side sem reload da pgina; Ex.: sugestes de pesquisa no Google; Assncrono significa que h o envio da requisio independente da resposta do servidor; Geralmente o retorno do processamento obtido em formato XML;
13

A funo load
load(url, parmetros, callback)
url script server-side; parmetros objeto JavaScript com valores a serem enviados ao servidor; callback funo chamada ao final da requisio ao servidor.

14

15

16