jQuery

O que é jQuery?

jQuery é uma biblioteca JavaScript criada por John Resig e disponibilizada como software livre e aberto, ou seja, de emprego e uso regido segundo licença conforme as regras estabelecidas pelo MIT – Massachusetts Institute of Technology ou pelo GPL – GNU General Public License. Isso, resumidamente, significa que você pode usar a biblioteca gratuitamente tanto em desenvolvimento de projetos pessoais como comerciais.

Como instalar jQuery

A biblioteca jQuery nada mais é do que um arquivo JavaScript (arquivo tipo texto puro gravado com a extensão .js, como por exemplo: meu_arquivo.js) que deverá ser referenciado na página web onde serão aplicados efeitos.

A versão mais recente da biblioteca está no arquivo jquery-1.3.2.js (adiante veremos como e onde fazer o download do arquivo). Então, um documento que use a biblioteca deverá ter marcado em sua seção head o seguinte elemento script entre
outros elementos próprios de cada caso.
...
<head>
...
<!-- esta linha chama a biblioteca jQuery -->
<script type="text/javascript" src="/caminho/jquery-1.3.2.js"></script>
<script type="text/javascript">

// Código

</script>
</head>
...

A partir daqui é imperativo que você tenha gravado no seu HD a última versão da biblioteca para poder acompanhar os exercícios desta apostila e fazer funcionar seus experimentos com jQuery, que, tenho certeza, irão fasciná-lo.
Entre no site oficial http://jquery.com mostrado na figura abaixo faça o download da biblioteca jQuery.

Para o download do jQuery ela tanto fornece compactada quanto normal:

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

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

Exemplos práticos

Seletores

Inserindo o seletor ID

Quando precionamos o título "Primeiro ou Segundo Título" aparece uma caixa de diálogo escrito "Você precionou o primeiro ou segundo título".

Veja que no código abaixo que id="botao_1" e id="botao_2" do titulo h1 são dois botões inseridos em $("#botao_1") $("#botao_2") não esquecendo do # igual ao CSS. O evento click faz o mesmo comando do onclick do Javascript.

  Código Atributo
Seletor $("#elemento1") id = "elemento1"
Classe $(".elemento2") class = "elemento2"
Tag $("tag") <tag ex="xxx">
this $(this) id, class ou tag

Arquivo: jquery.html

<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {

$("#botao_1").click(precionou_1);
$("#botao_2").click(precionou_2);

})
function precionou_1() {

alert("Você precionou o primeiro título");

}
function precionou_2() {

alert("Você precionou o segundo título");

}

</script>
</head>
<body>
<h1 id="botao_1">Primeiro Título</h1>
<h1 id="botao_2">Segundo Título</h1>
</body>
</html>
Resultado

O código pode ser assim como descrito abaixo:

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#botao_1").click(precionou_1);
$("#botao_2").click(precionou_2);
})
function precionou_1() {
alert("Você precionou o primeiro título");
}
function precionou_2() {
alert("Você precionou o segundo título");
}
</script>

Como posso escrever assim:

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(iniciarEvetos)

function iniciarEvetos() {
$("#botao_1").click(precionou_1);
$("#botao_2").click(precionou_2);
}

function precionou_1() {
alert("Você precionou o primeiro título");
}
function precionou_2() {
alert("Você precionou o segundo título");
}
</script>

Ou assim:

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function (){

$("#botao_1").click(function () {
alert("Você precionou o primeiro título");
});

$("#botao_2").click(function () {
alert("Você precionou o segundo título");
});

});
</script>

Existem várias formas que serão descrito nesta apostila.

Se fosse uma CLASSE?

Só mudaria # (grade) por .(ponto) igual ao CSS.

<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".botao_1").click(precionou_1);
$(".botao_2").click(precionou_2);
})
function precionou_1() {
alert("Você precionou o primeiro título");
}
function precionou_2() {
alert("Você precionou o segundo título");
}
</script>
</head>
<body>
<h1 class="botao_1">Primeiro Título</h1>
<h1 class="botao_2">Segundo Título</h1>
</body>
</html>

TAGS HTML

Também posso usar qualquer tag html

<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("h1").click(precionou_1);
})
function precionou_1() {
alert("Você precionou o primeiro ou segundo título");
}
</script>
</head>
<body>
<h1 class="botao_1">Primeiro Título</h1>
<h1 class="botao_2">Segundo Título</h1>
</body>
</html>

Multiplas Classes

Arquivo: jquery.html
<!DOCTYPE html>
<html>
<head>
    <style>
  div,span {
    width: 100px;
    height: 40px;
    float:left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
  </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <div class="myclass">div class="notMe"</div>
 
  <div class="myclass otherclass">div class="myClass"</div>
  <span class="myclass otherclass">span class="myClass"</span>
<script>$(".myclass.otherclass").css("border","13px solid red");</script>
 
</body>
</html>

 

CSS

 

Agora vamos usar o mesmo exemplo acima usando o CSS do jQuery.
Quando precionamos o primeiro ou o segundo título mudaremos a cor da lertra, o tipo de fonte e a cor de fundo:

Arquivo: jquery.html

<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(iniciarEventos);

function iniciarEventos() {
var x;
x = $('#titulo1').click(apertou1);
x = $('#titulo2').click(apertou2);
}

function apertou1() {
var x;
x = $('#titulo1');
x.css("color", "FF0000");
x.css("background-color","FFFF00");
x.css("font-family", "verdana");
}

function apertou2() {
var x;
x = $('#titulo2');
x.css("color", "FFFF00");
x.css("background-color","FF0000");
x.css("font-family", "arial");
}
</script>
</head>
<body>
<h1 id="titulo1">Primeiro Título</h1>
<h1 id="titulo2">Segundo Título</h1>
</body>
</html>
Resultado:

Podemos escrever o CSS também assim:

Arquivo: jquery.html

<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(iniciarEventos);

function iniciarEventos() {
var x;
x = $('#titulo1').click(apertou1);
x = $('#titulo2').click(apertou2);
}

function apertou1() {
var x;
x = $('#titulo1');
x.css("color", "FF0000").css("background-color","FFFF00").css("font-family", "verdana");
}

function apertou2() {
var x;
x = $('#titulo2');
x.css("color", "FFFF00").css("background-color","FF0000").css("font-family", "arial");
}
</script>
</head>
<body>
<h1 id="titulo1">Primeiro Título</h1>
<h1 id="titulo2">Segundo Título</h1>
</body>
</html>

Também assim vale:

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(iniciarEventos);

function iniciarEventos() {
var x;
x = $('#titulo1').click(apertou1);
x = $('#titulo2').click(apertou2);
}

function apertou1() {
$('#titulo1').css("color", "FF0000").css("background-color","FFFF00").css("font-family", "verdana");
}

function apertou2() {
$('#titulo2').css("color", "FFFF00").css("background-color","FF0000").css("font-family", "arial");
}
</script>

Este outro exemplo também vale:

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(iniciarEventos);

function iniciarEventos() {
var x;
x = $('#titulo1').click(apertou1);
x = $('#titulo2').click(apertou2);
}

function apertou1() {
$('#titulo1').css( {
          'color' : 'FF0000',
          'background-color' : 'FFFF00',
          'font-family' : 'verdana'
          } );
}

function apertou2() {
$('#titulo2').css( {
          'color' : 'FFFF00',
          'background-color' :'FF0000',
          'font-family' : 'arial'
          } );
}
</script>

Usando o comando $(this)

podemos usar o comando this ao invés do seletor id, class ou tag, veja exemplo igual ao anterior:

Arquivo: jquery.html

<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(iniciarEventos);

function iniciarEventos() {
var x;
x = $('#titulo1').click(apertou1);
x = $('#titulo2').click(apertou2);
}

function apertou1() {
var x;
x = $(this);
x.css("color", "FF0000");
x.css("background-color","FFFF00");
x.css("font-family", "verdana");
}

function apertou2() {
var x;
x = $(this).css("color", "FFFF00");
x.css("background-color","FF0000");
x.css("font-family", "arial");
}
</script>
</head>
<body>
<h1 id="titulo1">Primeiro Título</h1>
<h1 id="titulo2">Segundo Título</h1>
</body>
</html>

$('#titulo1') <= $(this)

$('#titulo2') <= $(this)

Veja mais um outro exemplo com this:

Arquivo: jquery.html
<html>
<head>
<title>jQuery</title>
<script language="javascript" src="js/jquery-1.3.2.js"></script>
<script language="javascript">
$(document).ready(function iniciarEventos(){
$("tr").click(cor);
})
function cor() {
$(this).css("background-color", "#00FF00")
}
</script>
</head>
<body>
<table border="1">
<tr>
<td>1111111111</td>
<td>1111111111</td>
<td>1111111111</td>
<td>1111111111</td>
</tr>
<tr>
<td>2222222222</td>
<td>2222222222</td>
<td>2222222222</td>
<td>2222222222</td>
</tr>
<tr>
<td>3333333333</td>
<td>3333333333</td>
<td>3333333333</td>
<td>3333333333</td>
</tr>
<tr>
<td>4444444444</td>
<td>4444444444</td>
<td>4444444444</td>
<td>4444444444</td>
</tr>
<tr>
<td>5555555555</td>
<td>5555555555</td>
<td>5555555555</td>
<td>5555555555</td>
</tr>
</table>
</body>
</html>
Resultado:

Tamanho (Altura = height() e Largura = width())

Podemos saber o tamanho, aumentar e diminuir qualquer div, imagens, etc. Com os comandos width e height, veja o código:

Arquivo: jquery.html

<html>
<head>
<title>jQuery</title>
<script language="javascript" src="js/jquery-1.3.2.js"></script>
<script language="javascript">
$(document).ready(function iniciarEventos(){
$("#botao_1").click(tamanho_1);
$("#botao_2").click(tamanho_2);
$("#botao_3").click(tamanho_3);
})
function tamanho_1() {
alert($("#imagem").width() + " x "+ $("#imagem").height());
}
function tamanho_2() {

var x = $("#imagem").width();
var y = $("#imagem").height();

$("#imagem").width(x+10);
$("#imagem").height(y+10);

}
function tamanho_3() {

var x = $("#imagem").width();
var y = $("#imagem").height();

$("#imagem").width(x-10);
$("#imagem").height(y-10);

}
</script>
</head>
<body>
<p><input type="button" id="botao_1" value="Tamanho da imagem"><br>
<input type="button" id="botao_2" value="Aumentar"><br>
<input type="button" id="botao_3" value="Diminuir"></p>
<p><img id="imagem" src="teste.gif">
</p>
</body>
</html>
Resultado:

 

Atributos

attr() e removeAttr()

Arquivo: jquery.html

<html>
<head>
<title>jQuery</title>
<script language="javascript" src="js/jquery-1.3.2.js"></script>
<script language="javascript">
$(document).ready(function () {
$("#botao1").click(adicionar);
$("#botao2").click(recuperar);
$("#botao3").click(eliminar);
})
function adicionar() {
$("#tabela1").attr("border", "1");
}

function recuperar() {
if($("#tabela1").attr("border") != 0){
var x = $("#tabela1").attr("border");
alert(x);
} else {
alert("Tabela sem bordas");
}
}

function eliminar() {
$("#tabela1").removeAttr("border")
}

</script>
</head>
<body>
<input type="button" id="botao1" value="Adicionar borda"><br>
<input type="button" id="botao2" value="Recuperar valor da propriedade borda"><br>
<input type="button" id="botao3" value="Eliminar borda"><br>
<p>&nbsp;</p>

<table id="tabela1">
<tr>
<td>1111111111</td><td>1111111111</td><td>1111111111</td><td>1111111111</td>
</tr>
<tr>
<td>2222222222</td><td>2222222222</td><td>2222222222</td><td>2222222222</td>
</tr>
<tr>
<td>3333333333</td><td>3333333333</td><td>3333333333</td><td>3333333333</td>
</tr>
</table>
</body>
</html>
Resultado:

text()

Arquivo: jquery.html

<html>
<head>
<title>jQuery</title>
<script language="javascript" src="js/jquery-1.3.2.js"></script>
<script language="javascript">
$(document).ready(function iniciarEventos() {
$("#botao1").click(obtertxt);
$("#botao2").click(modificartxt);
$("#botao3").click(modificartds);
})
function obtertxt() {
var x = $("#paragrafo1").text();
alert(x);
}
function modificartxt() {
$("#paragrafo1").text("Novo texto criado pelo jQuery");
}
function modificartds() {
$("td").text("tds modificados com jQuery");
}

</script>
</head>
<body>
<input type="button" value="Obter o texto de um paragrafo" id="botao1"><br>
<input type="button" value="Modificar o texto de um paragrafo" id="botao2"><br>
<input type="button" value="Modificar o texto de todos os elementos td de uma tabela" id="botao3">
<p id="paragrafo1">Texto do primeiro paragrafo</p>
<table border="1">
<tr>
<td>Celula 1,1</td><td>Celula 1,2</td>
</tr>
<tr>
<td>Celula 2,1</td><td>Celula 2,2</td>
</tr>
</table>
</body>
</html>
Resultado:

html()

Arquivo: jquery.html

<html>
<head>
<title>jQuery</title>
<script language="javascript" src="js/jquery-1.3.2.js"></script>
<script language="javascript">
$(document).ready(function () {
$("#botao1").click(mostrarform);
$("#botao2").click(mostrarelement);
})
function mostrarform() {
$("#formulario").html('<form>Insira seu nome: <input type="text"> <br> Insira a sua senha <input type="password"> <input type="submit" value="Enviar"> </form>');
}

function mostrarelement() {
var x = $("#formulario").html();
alert(x)
}
</script>
</head>
<body>
<input type="button" id="botao1" value="Mostrar formulário">
<input type="button" id="botao2" value="Mostrar elementos html do formulário"><br>
<div id="formulario">
</div>
</body>
</html>
Resultado:

addClass() e removeClass()

Arquivo: jquery.html

<html>
<head>
<title>jQuery</title>
<script language="javascript" src="js/jquery-1.3.2.js"></script>
<script language="javascript">
$(document).ready(function () {
$("#botao1").click(adicionarclasse);
$("#botao2").click(removerclasse);
})
function adicionarclasse() {
$("#descricao").addClass("corpo");
}

function removerclasse() {
$("#descricao").removeClass("corpo");
}
</script>
<style type="text/css">
.corpo {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #00FF99;
border-top-width: 1px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 4px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #3300FF;
border-right-color: #3300FF;
border-bottom-color: #3300FF;
border-left-color: #3300FF;
}
</style>
</head>
<body>
<input type="button" id="botao1" value="Adicionar Classe">
<input type="button" id="botao2" value="Remover Classe">
<div id="descricao">
<p>Quis nostrud exercitation ut enim ad minim veniam, in reprehenderit in voluptate. Ut aliquip ex ea commodo consequat. Sunt in culpa qui officia deserunt cupidatat non proident. Duis aute irure dolor ullamco laboris nisi excepteur sint occaecat.</p>
<p>Sunt in culpa eu fugiat nulla pariatur. Cupidatat non proident, qui officia deserunt sed do eiusmod tempor incididunt. Ullamco laboris nisi mollit anim id est laborum. Quis nostrud exercitation consectetur adipisicing elit, ut aliquip ex ea commodo consequat.</p>
<p>Cupidatat non proident, lorem ipsum dolor sit amet, qui officia deserunt. Mollit anim id est laborum. Excepteur sint occaecat ut aliquip ex ea commodo consequat. In reprehenderit in voluptate eu fugiat nulla pariatur. Velit esse cillum dolore ut enim ad minim veniam, mollit anim id est laborum.</p>
<p>Cupidatat non proident, qui officia deserunt eu fugiat nulla pariatur. Ut aliquip ex ea commodo consequat. Ullamco laboris nisi consectetur adipisicing elit, ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt sunt in culpa mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, qui officia deserunt.</p>
<p>Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Eu fugiat nulla pariatur. Velit esse cillum dolore consectetur adipisicing elit, quis nostrud exercitation.</p>
</div>
</body>
</html>
Resultado:

a href target

<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
var indice = 0;
$(document).ready(function () {
$("a").click(google);
})
function google() {
$("a").attr("target","_blank");
$("a").attr("href","http://www.google.com.br/");
return true;
}
</script>
</head>
<body>
<a href="#">Clique aqui =&gt; P&aacute;gina do Google</a>
</body>
</html>

 

Eventos

click

Arquivo: jquery.html
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("tr").click(precionou_1);
})
function precionou_1() {
$(this).css("background-color", "00FF00");
}
</script>
</head>
<body>
<table border="1" id="tabela1">
<tr>
<td>1111111111</td><td>1111111111</td><td>1111111111</td><td>1111111111</td>
</tr>
<tr>
<td>2222222222</td><td>2222222222</td><td>2222222222</td><td>2222222222</td>
</tr>
<tr>
<td>3333333333</td><td>3333333333</td><td>3333333333</td><td>3333333333</td>
</tr>
<tr>
<td>4444444444</td><td>4444444444</td><td>4444444444</td><td>4444444444</td>
</tr>
<tr>
<td>5555555555</td><td>5555555555</td><td>5555555555</td><td>5555555555</td>
</tr>
</table>
</body>
</html>
Resultado:

dblclick

Arquivo: jquery.html
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("tr").dblclick(duploclique);
})
function duploclique() {
$(this).css("background-color", "00FF00");
}
</script>
</head>
<body>
<table border="1" id="tabela1">
<tr>
<td>1111111111</td><td>1111111111</td><td>1111111111</td><td>1111111111</td>
</tr>
<tr>
<td>2222222222</td><td>2222222222</td><td>2222222222</td><td>2222222222</td>
</tr>
<tr>
<td>3333333333</td><td>3333333333</td><td>3333333333</td><td>3333333333</td>
</tr>
<tr>
<td>4444444444</td><td>4444444444</td><td>4444444444</td><td>4444444444</td>
</tr>
<tr>
<td>5555555555</td><td>5555555555</td><td>5555555555</td><td>5555555555</td>
</tr>
</table>
</body>
</html>
Resultado:

mouseover e mouseout

Arquivo: jquery.html
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("tr").mouseover(fundo);
$("tr").mouseout(normal);
})
function fundo() {
$(this).css("background-color", "00FF00");
}
function normal() {
$(this).css("background-color", "FFFFFF");
}
</script>
</head>
<body>
<table border="1" id="tabela1">
<tr>
<td>1111111111</td><td>1111111111</td><td>1111111111</td><td>1111111111</td>
</tr>
<tr>
<td>2222222222</td><td>2222222222</td><td>2222222222</td><td>2222222222</td>
</tr>
<tr>
<td>3333333333</td><td>3333333333</td><td>3333333333</td><td>3333333333</td>
</tr>
<tr>
<td>4444444444</td><td>4444444444</td><td>4444444444</td><td>4444444444</td>
</tr>
<tr>
<td>5555555555</td><td>5555555555</td><td>5555555555</td><td>5555555555</td>
</tr>
</table>
</body>
</html>
Resultado:

hover

Arquivo: jquery.html
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("tr").hover(fundo, normal);
})
function fundo() {
$(this).css("background-color", "00FF00");
}
function normal() {
$(this).css("background-color", "FFFFFF");
}
</script>
</head>
<body>
<table border="1" id="tabela1">
<tr>
<td>1111111111</td><td>1111111111</td><td>1111111111</td><td>1111111111</td>
</tr>
<tr>
<td>2222222222</td><td>2222222222</td><td>2222222222</td><td>2222222222</td>
</tr>
<tr>
<td>3333333333</td><td>3333333333</td><td>3333333333</td><td>3333333333</td>
</tr>
<tr>
<td>4444444444</td><td>4444444444</td><td>4444444444</td><td>4444444444</td>
</tr>
<tr>
<td>5555555555</td><td>5555555555</td><td>5555555555</td><td>5555555555</td>
</tr>
</table>
</body>
</html>
Resultado:

mousedown e mouseup

Arquivo: jquery.html
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("tr").mousedown(precionar);
$("tr").mouseup(soltar);
})
function precionar() {
$(this).css("background-color", "00FF00");
}
function soltar() {
$(this).css("background-color", "FFFFFF");
}
</script>
</head>
<body>
<table border="1" id="tabela1">
<tr>
<td>1111111111</td><td>1111111111</td><td>1111111111</td><td>1111111111</td>
</tr>
<tr>
<td>2222222222</td><td>2222222222</td><td>2222222222</td><td>2222222222</td>
</tr>
<tr>
<td>3333333333</td><td>3333333333</td><td>3333333333</td><td>3333333333</td>
</tr>
<tr>
<td>4444444444</td><td>4444444444</td><td>4444444444</td><td>4444444444</td>
</tr>
<tr>
<td>5555555555</td><td>5555555555</td><td>5555555555</td><td>5555555555</td>
</tr>
</table>
</body>
</html>
Resultado:

focus e blur

Arquivo: jquery.html
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#txt1").focus(foco);
$("#txt1").blur(perdeuFoco);
$("#txt2").focus(foco);
$("#txt2").blur(perdeuFoco);
$("#txt3").focus(foco);
$("#txt3").blur(perdeuFoco);
})
function foco() {
$(this).css("background-color", "#00FF00");
}
function perdeuFoco() {
$(this).css("background-color", "#FFFFFF");
}
</script>
</head>
<body>
<p>
Nome:<input type="text" id="txt1" value="Seu Nome"><br>
Endereço:<input type="text" id="txt2" value="Seu Endereço"><br>
Cidade:<input type="text" id="txt3" value="Sua Cidade">
</p>
</body>
</html>
Resultado:

 

Teclado e mouse

Mouse

Arquivo: jquery.html

<html>
<head>
<title>jQuery</title>
<script language="javascript" src="js/jquery-1.3.2.js"></script>
<script language="javascript">
$(document).ready(function () {
$(document).mousemove(mouse);
})

function mouse(event) {
$("#corx").text("Coordenada x = " + event.clientX);
$("#cory").text("Coordenada y = " + event.clientY);
}
</script>
</head>
<body>
<p id="corx">Coordenada x = </p>
<p id="cory">Coordenada y = </p>
</body>
</html>
Resultado:

Teclado

Arquivo: jquery.html

<html>
<head>
<title>jQuery</title>
<script language="javascript" src="js/jquery-1.3.2.js"></script>
<script language="javascript">
$(document).ready(function () {
$(document).keydown(teclado);
})

function teclado(event) {
shift = (event.shiftKey == true)? " Shift " : "";
ctrl = (event.ctrlKey == true)? " Ctrl " : "";
alt = (event.altKey == true)? " Alt " : "";
$("#Teclado").text("Tecla = " + shift + ctrl + alt +event.keyCode);
}
</script>
</head>
<body>
<p id="Teclado">Tecla = </p>
</body>
</html>
Resultado:

Key Pressed Key Code
backspace 8
tab 9
enter 13
shift 16
ctrl 17
alt 18
pause/break 19
caps lock 20
escape 27
page up 33
page down 34
end 35
home 36
left arrow 37
up arrow 38
right arrow 39
down arrow 40
insert 45
delete 46
0 48
1 49
2 50
3 51
4 52
5 53
6 54
7 55
8 56
9 57
a 65
b 66
c 67
d 68
e 69
f 70
g 71
h 72
i 73
j 74
k 75
l 76
m 77
n 78
o 79
p 80
q 81
r 82
s 83
t 84
u 85
v 86
w 87
x 88
y 89
z 90
left window key 91
right window key 92
select key 93
numpad 0 96
numpad 1 97
numpad 2 98
numpad 3 99
numpad 4 100
numpad 5 101
numpad 6 102
numpad 7 103
numpad 8 104
numpad 9 105
multiply 106
add 107
subtract 109
decimal point 110
divide 111
f1 112
f2 113
f3 114
f4 115
f5 116
f6 117
f7 118
f8 119
f9 120
f10 121
f11 122
f12 123
num lock 144
scroll lock 145
semi-colon 186
equal sign 187
comma 188
dash 189
period 190
forward slash 191
grave accent 192
open bracket 219
back slash 220
close braket 221
single quote 222

Barras de rolagem

Arquivo: jquery.html
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(window).scroll(function () {
$("#barra").text("Barra de rolagem a direita: "+$(document).scrollTop()+" Barra de rolagem em baixo: "+$(document).scrollLeft());
});
})
</script>
</head>
<body>
<div id="barra" style="top:0; left:0;position: fixed;">Barra de rolagem a direita: 0 Barra de rolagem em baixo: 0</div>
<pre> </pre>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>
Resultado:

Altura e Largura MÁXIMA da Barra de Rolagem

 

Botão direito do mouse

Arquivo: jquery.html
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).bind("contextmenu",function(e){
alert("botão direito do mouse");
return false;
});
});
</script>
</head>
<body>
</body>
</html>
Resultado:

 

Animação

hide e show

slow normal fast

Arquivo: jquery.html
<html>
<head>
<title>jQuery</title>
<script language="javascript" src="js/jquery-1.3.2.js"></script>
<script language="javascript">
$(document).ready(function () {
$("#botao1").click(ocultar);
$("#botao2").click(mostrar);
})
function ocultar() {
$("#descricao").hide('slow');
}
function mostrar() {
$("#descricao").show('fast');
}
</script>
<style type="text/css">
.pai {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #00FF99;
border-top-width: 1px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 4px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #3300FF;
border-right-color: #3300FF;
border-bottom-color: #3300FF;
border-left-color: #3300FF;
}
</style>
</head>
<body>
<input type="button" id="botao1" value="Ocultar div">
<input type="button" id="botao2" value="Mostrar div">
<div id="descricao" class="pai">
<p>Quis nostrud exercitation ut enim ad minim veniam, in reprehenderit in voluptate. Ut aliquip ex ea commodo consequat. Sunt in culpa qui officia deserunt cupidatat non proident. Duis aute irure dolor ullamco laboris nisi excepteur sint occaecat.</p>
<p>Sunt in culpa eu fugiat nulla pariatur. Cupidatat non proident, qui officia deserunt sed do eiusmod tempor incididunt. Ullamco laboris nisi mollit anim id est laborum. Quis nostrud exercitation consectetur adipisicing elit, ut aliquip ex ea commodo consequat.</p>
<p>Cupidatat non proident, lorem ipsum dolor sit amet, qui officia deserunt. Mollit anim id est laborum. Excepteur sint occaecat ut aliquip ex ea commodo consequat. In reprehenderit in voluptate eu fugiat nulla pariatur. Velit esse cillum dolore ut enim ad minim veniam, mollit anim id est laborum.</p>
<p>Cupidatat non proident, qui officia deserunt eu fugiat nulla pariatur. Ut aliquip ex ea commodo consequat. Ullamco laboris nisi consectetur adipisicing elit, ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt sunt in culpa mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, qui officia deserunt.</p>
<p>Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Eu fugiat nulla pariatur. Velit esse cillum dolore consectetur adipisicing elit, quis nostrud exercitation.</p>
</div>
</body>
</html>
Resultado:

outro exemplo:

Arquivo: jquery.html
<html>
<head>
<title>jQuery</title>
<style type="text/css" media="all">
div {
width:200px;
height:300px;
margin:30px 0;
border:2px solid #000;
color:#fff;
background:#f00;
display:none;
}
</style>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('#button1').click(function() {
$('div').show();
});
$('#button2').click(function() {
$('div').hide();
});
$('#button3').click(function() {
$('div').show('slow');
});
$('#button4').click(function() {
$('div').hide('slow');
});
$('#button5').click(function() {
$('div').show(3000);
});
$('#button6').click(function() {
$('div').hide(1500);
});
});
// ]]>
</script>
</head>
<body>

<input id="button1" type="button" value="Efeito show()">
<input id="button2" type="button" value="Efeito hide()"><br /><br />
<input id="button3" type="button" value="Efeito show('slow')">
<input id="button4" type="button" value="Efeito hide('slow')"><br /><br />
<input id="button5" type="button" value="Efeito show(3000)">
<input id="button6" type="button" value="Efeito hide(1500)"><br /><br />
<div>DIV em todo seu esplendor.</div>
</body>
</html>
Resultado:

slideDown slideUp

Arquivo: jquery.html

<html>
<head>
<title>jQuery</title>
<style type="text/css" media="all">
div {
width:200px;
height:300px;
margin:30px 0;
border:2px solid #000;
color:#fff;
background:#f00;
display:none;
}
</style>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('#button1').click(function() {
$('div').slideDown('slow');
});
$('#button2').click(function() {
$('div').slideUp('slow');
});
$('#button3').click(function() {
$('div').slideDown('normal');
});
$('#button4').click(function() {
$('div').slideUp('normal');
});
$('#button5').click(function() {
$('div').slideDown('fast');
});
$('#button6').click(function() {
$('div').slideUp('fast');
});
});
// ]]>
</script>
</head>
<body>
<input id="button1" type="button" value="Efeito slideDown('slow')">
<input id="button2" type="button" value="Efeito slideUp('slow')"><br /><br />
<input id="button3" type="button" value="Efeito slideDown('normal')">
<input id="button4" type="button" value="Efeito slideUp('normal')"><br /><br />
<input id="button5" type="button" value="Efeito slideDown('fast')">
<input id="button6" type="button" value="Efeito slideUp('fast')"><br /><br />

<div>DIV em todo seu esplendor.</div>
</body>
</html>
Resultado:

fadeOut e fadeIn

Arquivo: jquery.html
<html>
<head>
<title>jQuery</title>
<script language="javascript" src="js/jquery-1.3.2.js"></script>
<script language="javascript">
$(document).ready(function () {
$("#botao1").click(ocultar);
$("#botao2").click(mostrar);
})
function ocultar() {
$("#descricao").fadeOut('slow');
}
function mostrar() {
$("#descricao").fadeIn('slow');
}
</script>
<style type="text/css">
.pai {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #00FF99;
border-top-width: 1px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 4px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #3300FF;
border-right-color: #3300FF;
border-bottom-color: #3300FF;
border-left-color: #3300FF;
}
</style>
</head>
<body>
<input type="button" id="botao1" value="Ocultar div">
<input type="button" id="botao2" value="Mostrar div">
<div id="descricao" class="pai">
<p>Quis nostrud exercitation ut enim ad minim veniam, in reprehenderit in voluptate. Ut aliquip ex ea commodo consequat. Sunt in culpa qui officia deserunt cupidatat non proident. Duis aute irure dolor ullamco laboris nisi excepteur sint occaecat.</p>
<p>Sunt in culpa eu fugiat nulla pariatur. Cupidatat non proident, qui officia deserunt sed do eiusmod tempor incididunt. Ullamco laboris nisi mollit anim id est laborum. Quis nostrud exercitation consectetur adipisicing elit, ut aliquip ex ea commodo consequat.</p>
<p>Cupidatat non proident, lorem ipsum dolor sit amet, qui officia deserunt. Mollit anim id est laborum. Excepteur sint occaecat ut aliquip ex ea commodo consequat. In reprehenderit in voluptate eu fugiat nulla pariatur. Velit esse cillum dolore ut enim ad minim veniam, mollit anim id est laborum.</p>
<p>Cupidatat non proident, qui officia deserunt eu fugiat nulla pariatur. Ut aliquip ex ea commodo consequat. Ullamco laboris nisi consectetur adipisicing elit, ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt sunt in culpa mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, qui officia deserunt.</p>
<p>Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Eu fugiat nulla pariatur. Velit esse cillum dolore consectetur adipisicing elit, quis nostrud exercitation.</p>
</div>
</body>
</html>
Resultado:

fadeTo

Arquivo: jquery.html
<html>
<head>
<title>jQuery</title>
<script language="javascript" src="js/jquery-1.3.2.js"></script>
<script language="javascript">
$(document).ready(function () {
$("#botao1").click(ocultar);
$("#botao2").click(mostrar);
})
function ocultar() {
$("#descricao").fadeTo('slow', 0.5);
}
function mostrar() {
$("#descricao").fadeTo('slow', 1);
}
</script>
<style type="text/css">
.pai {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #00FF99;
border-top-width: 1px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 4px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #3300FF;
border-right-color: #3300FF;
border-bottom-color: #3300FF;
border-left-color: #3300FF;
}
</style>
</head>
<body>
<input type="button" id="botao1" value="Ocultar div">
<input type="button" id="botao2" value="Mostrar div">
<div id="descricao" class="pai">
<p>Quis nostrud exercitation ut enim ad minim veniam, in reprehenderit in voluptate. Ut aliquip ex ea commodo consequat. Sunt in culpa qui officia deserunt cupidatat non proident. Duis aute irure dolor ullamco laboris nisi excepteur sint occaecat.</p>
<p>Sunt in culpa eu fugiat nulla pariatur. Cupidatat non proident, qui officia deserunt sed do eiusmod tempor incididunt. Ullamco laboris nisi mollit anim id est laborum. Quis nostrud exercitation consectetur adipisicing elit, ut aliquip ex ea commodo consequat.</p>
<p>Cupidatat non proident, lorem ipsum dolor sit amet, qui officia deserunt. Mollit anim id est laborum. Excepteur sint occaecat ut aliquip ex ea commodo consequat. In reprehenderit in voluptate eu fugiat nulla pariatur. Velit esse cillum dolore ut enim ad minim veniam, mollit anim id est laborum.</p>
<p>Cupidatat non proident, qui officia deserunt eu fugiat nulla pariatur. Ut aliquip ex ea commodo consequat. Ullamco laboris nisi consectetur adipisicing elit, ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt sunt in culpa mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, qui officia deserunt.</p>
<p>Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Eu fugiat nulla pariatur. Velit esse cillum dolore consectetur adipisicing elit, quis nostrud exercitation.</p>
</div>
</body>
</html>
Resultado:

toggle

Arquivo: jquery.html
<html>
<head>
<title>jQuery</title>
<script language="javascript" src="js/jquery-1.3.2.js"></script>
<script language="javascript">
$(document).ready(function () {
$("#botao1").click(ocultar_mostrar);
})
function ocultar_mostrar() {
$("#descricao").toggle('slow');
}
</script>
<style type="text/css">
.pai {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #00FF99;
border-top-width: 1px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 4px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #3300FF;
border-right-color: #3300FF;
border-bottom-color: #3300FF;
border-left-color: #3300FF;
}
</style>
</head>
<body>
<input type="button" id="botao1" value="Ocultar e mostrar div">
<div id="descricao" class="pai">
<p>Quis nostrud exercitation ut enim ad minim veniam, in reprehenderit in voluptate. Ut aliquip ex ea commodo consequat. Sunt in culpa qui officia deserunt cupidatat non proident. Duis aute irure dolor ullamco laboris nisi excepteur sint occaecat.</p>
<p>Sunt in culpa eu fugiat nulla pariatur. Cupidatat non proident, qui officia deserunt sed do eiusmod tempor incididunt. Ullamco laboris nisi mollit anim id est laborum. Quis nostrud exercitation consectetur adipisicing elit, ut aliquip ex ea commodo consequat.</p>
<p>Cupidatat non proident, lorem ipsum dolor sit amet, qui officia deserunt. Mollit anim id est laborum. Excepteur sint occaecat ut aliquip ex ea commodo consequat. In reprehenderit in voluptate eu fugiat nulla pariatur. Velit esse cillum dolore ut enim ad minim veniam, mollit anim id est laborum.</p>
<p>Cupidatat non proident, qui officia deserunt eu fugiat nulla pariatur. Ut aliquip ex ea commodo consequat. Ullamco laboris nisi consectetur adipisicing elit, ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt sunt in culpa mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, qui officia deserunt.</p>
<p>Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Eu fugiat nulla pariatur. Velit esse cillum dolore consectetur adipisicing elit, quis nostrud exercitation.</p>
</div>
</body>
</html>
Resultado:

slideToggle

Arquivo: jquery.html
<html>
<head>
<title>jQuery</title>
<script language="javascript" src="js/jquery-1.3.2.js"></script>
<script language="javascript">
$(document).ready(function () {
$("#botao1").click(ocultar_mostrar);
})
function ocultar_mostrar() {
$("#descricao").slideToggle('slow');
}
</script>
<style type="text/css">
.pai {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #00FF99;
border-top-width: 1px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 4px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #3300FF;
border-right-color: #3300FF;
border-bottom-color: #3300FF;
border-left-color: #3300FF;
}
</style>
</head>
<body>
<input type="button" id="botao1" value="Ocultar e mostrar div">
<div id="descricao" class="pai">
<p>Quis nostrud exercitation ut enim ad minim veniam, in reprehenderit in voluptate. Ut aliquip ex ea commodo consequat. Sunt in culpa qui officia deserunt cupidatat non proident. Duis aute irure dolor ullamco laboris nisi excepteur sint occaecat.</p>
<p>Sunt in culpa eu fugiat nulla pariatur. Cupidatat non proident, qui officia deserunt sed do eiusmod tempor incididunt. Ullamco laboris nisi mollit anim id est laborum. Quis nostrud exercitation consectetur adipisicing elit, ut aliquip ex ea commodo consequat.</p>
<p>Cupidatat non proident, lorem ipsum dolor sit amet, qui officia deserunt. Mollit anim id est laborum. Excepteur sint occaecat ut aliquip ex ea commodo consequat. In reprehenderit in voluptate eu fugiat nulla pariatur. Velit esse cillum dolore ut enim ad minim veniam, mollit anim id est laborum.</p>
<p>Cupidatat non proident, qui officia deserunt eu fugiat nulla pariatur. Ut aliquip ex ea commodo consequat. Ullamco laboris nisi consectetur adipisicing elit, ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt sunt in culpa mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, qui officia deserunt.</p>
<p>Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Eu fugiat nulla pariatur. Velit esse cillum dolore consectetur adipisicing elit, quis nostrud exercitation.</p>
</div>
</body>
</html>
Resultado:

animate

Arquivo: jquery.html
<html>
<head>
<title>jQuery</title>
<style type="text/css">
div {
width:40px;
height:40px;
margin:30px 0;
border:2px solid #000;
background:#0f0;
}
</style>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#botao1").click(animar);
$("#botao2").click(retornar);
});
function animar(){
$('div').animate({
width: '300px',
height: '600px',
opacity: 0.33,
border: '10px dashed #f00'
},
1500 )
}
function retornar(){
$('div').animate({
opacity: 1,
width: '40px',
height: '40px',
border: '2px solid #000'
},
1500 )
}
</script>
</head>
<body>
<input type="button" id="botao1" value="Animar"> <input type="button" id="botao2" value="Retornar">
<div></div>
</body>
</html>
Resultado:

outro exemplo:

Arquivo: jquery.html
<html>
<head>
<title>jQuery</title>
<style type="text/css">
div {
position:absolute;
width:80px;
height:80px;
left:10px;
top:100px;
border:2px solid #000;
background:#f00;
}
</style>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#botao1").click(animar);
$("#botao2").click(parar);
$("#botao3").click(voltar);
$("#botao4").click(reset);
});
function animar(){
$('div').animate({left: '+=1000px'}, 8000);
}
function parar(){
$('div').stop();
}
function voltar() {
$('div').animate({left: '-=1000px'}, 8000)
}
function reset() {
$('div').css({left:'10px'});
}
</script>
</head>
<body>
<input type="button" id="botao1" value="Animar">
<input type="button" id="botao2" value="Parar">
<input type="button" id="botao3" value="Voltar">
<input type="button" id="botao4" value="Reset">
<div></div>
</body>
</html>
Resultado:

setTimeout

Sem setTimeout
Arquivo: jquery.html
<html>
<head>
<title>jQuery</title>
<style type="text/css">
#x1 {
position:absolute;
width:80px;
height:80px;
left:10px;
top:100px;
border:2px solid #000;
background:#f00;
}
#x2 {
position:absolute;
width:80px;
height:80px;
left:500px;
top:100px;
border:2px solid #000;
background:#0f0;
}
</style>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#botao1").click(animar);
$("#botao2").click(parar);
$("#botao3").click(voltar);
$("#botao4").click(reset);
});
function animar(){
$('#x1').animate({left: '+=500px'}, 8000);
$('#x2').animate({left: '-=500px'}, 8000);
}
function parar(){
$('#x1').stop();
$('#x2').stop();
}
function voltar() {
$('#x1').animate({left: '-=500px'}, 8000)
$('#x2').animate({left: '+=500px'}, 8000)
}
function reset() {
$('#x1').css({left:'10px'});
$('#x2').css({left:'500px'});
}
</script>
</head>
<body>
<input type="button" id="botao1" value="Animar">
<input type="button" id="botao2" value="Parar">
<input type="button" id="botao3" value="Voltar">
<input type="button" id="botao4" value="Reset">
<div id="x1"></div>
<div id="x2"></div>
</body>
</html>
Resultado:

 

Com setTimeout
Arquivo: jquery.html
<html>
<head>
<title>jQuery</title>
<style type="text/css">
#x1 {
position:absolute;
width:80px;
height:80px;
left:10px;
top:100px;
border:2px solid #000;
background:#f00;
}
#x2 {
position:absolute;
width:80px;
height:80px;
left:500px;
top:100px;
border:2px solid #000;
background:#0f0;
}
</style>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#botao1").click(animar);
$("#botao2").click(parar);
$("#botao4").click(reset);
});
function animar(){
$('#x1').animate({left: '+=500px'}, 8000);
$('#x2').animate({left: '-=500px'}, 8000);
setTimeout(function() {
$('#x1').animate({left: '-=500px'}, 8000)
$('#x2').animate({left: '+=500px'}, 8000)
},8000);
}
function parar(){
$('#x1').stop();
$('#x2').stop();
}
function reset() {
$('#x1').css({left:'10px'});
$('#x2').css({left:'500px'});
}
</script>
</head>
<body>
<input type="button" id="botao1" value="Animar e voltar">
<input type="button" id="botao2" value="Parar">
<input type="button" id="botao4" value="Reset">
<div id="x1"></div>
<div id="x2"></div>
</body>
</html>
Resultado:

 

Ajax

 

Arquivo: jquery.html

<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {

$("#menu a").click(carregando);

})
function carregando() {

$("#detalhes").load($(this).attr('href'));
return false;

}
</script>
</head>
<body>
<div id="menu">
<a id="ajax" href="pagina.php?cod=1">Link 1</a> |
<a id="ajax" href="pagina.php?cod=2">Link 2</a> |
<a id="ajax" href="pagina.php?cod=3">Link 3</a> |
<a id="ajax" href="pagina.php?cod=4">Link 4</a> |
<a id="ajax" href="pagina.php?cod=5">Link 5</a><br>
</div>
<div id="detalhes">Selecione o link</div>
</body>
</html>
arquivo: pagina.php

<?php
header('Content-Type: text/html; charset=ISO-8859-1');

$cod = $_GET['cod'];

if($cod == 1) {
echo "<h1>Texto 1</h1>";
} else if($cod == 2) {
echo "<h1>Texto 2</h1>";
} else if($cod == 3) {
echo "<h1>Texto 3</h1>";
} else if($cod == 4) {
echo "<h1>Texto 4</h1>";
} else if($cod == 5) {
echo "<h1>Texto 5</h1>";
}
?>
Simulação:

Barras progressivas

Inspired by the Firefox 1.5 busy icon
Inspired by the Firefox 1.5 busy icon (yellow version)
Inspired by RememberTheMilk (tuned to orange)
Tiny red (original creation)
Black busy (original creation)
Gray busy (original creation)
Green rotate (original creation)
Rotation (big – edited from google images)
Rotating arrows

Arquivo: jquery.html

<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {

$("#menu a").click(carregando);

})
function carregando() {
$("#detalhes").ajaxStart(carregar);
$("#detalhes").load($(this).attr('href'));
return false;

}
function carregar() {
$('#detalhes').html('<img src="carregando.gif">');
}
</script>
</head>
<body>
<div id="menu">
<a id="ajax" href="pagina.php?cod=1">Link 1</a> |
<a id="ajax" href="pagina.php?cod=2">Link 2</a> |
<a id="ajax" href="pagina.php?cod=3">Link 3</a> |
<a id="ajax" href="pagina.php?cod=4">Link 4</a> |
<a id="ajax" href="pagina.php?cod=5">Link 5</a><br>
</div>
<div id="detalhes">Selecione o link</div>
</body>
</html>
pagina.php

<?php
header('Content-Type: text/html; charset=ISO-8859-1');
sleep(3);
$cod = $_GET['cod'];

if($cod == 1) {
echo "<h1>Texto 1</h1>";
} else if($cod == 2) {
echo "<h1>Texto 2</h1>";
} else if($cod == 3) {
echo "<h1>Texto 3</h1>";
} else if($cod == 4) {
echo "<h1>Texto 4</h1>";
} else if($cod == 5) {
echo "<h1>Texto 5</h1>";
}
?>
Imagem
Simulação:

 

OUTROS

append

Arquivo: jquery.html

<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
var indice = 0;
$(document).ready(function () {

$("#botao1").click(carregando);
$("#botao2").click(apagar);

})
function apagar() {
$('#indice').empty();
}
function carregando() {
$('#indice').append('O índice deste parágrafo é : <b style="color: #FF0000">' + indice + '</b><br />');
indice++
}
</script>
</head>
<body>
<input type="button" id="botao1" value="Carregar">
<input type="button" id="botao2" value="Apagar">
<p style="color:#FF0000">Indice</p>
<div id="indice"></div>
</body>
</html>
Resultado:

appendTo

Arquivo: jquery.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>Untitled Document</title>
</head><html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
var indice = 0;
$(document).ready(function () {

$("#botao1").click(carregando);
$("#botao2").click(apagar);

})
function apagar() {
$('#indice').empty();
}
function carregando() {
$('<span>O índice deste parágrafo é : <b style="color: #FF0000">' + indice + '</b></span><br />').appendTo('#indice');
indice++
}
</script>
</head>
<body>
<input type="button" id="botao1" value="Carregar">
<input type="button" id="botao2" value="Apagar">
<p style="color:#FF0000">Indice</p>
<div id="indice"></div>
</body>
</html>

<body>
</body>
</html>
Resultado:

after

Arquivo: jquery.html

<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
var indice = 0;
$(document).ready(function () {

$("#botao1").click(carregando);
$("#botao2").click(apagar);

})
function apagar() {
$('#indice').empty();
}
function carregando() {
$('#indice').after('<span>O índice deste parágrafo é : <b style="color: #FF0000">' + indice + '</b></span><br />');
indice++
}
</script>
</head>
<body>
<input type="button" id="botao1" value="Carregar">
<input type="button" id="botao2" value="Apagar">
<h2>O empty não funciona no after</h2>
<p style="color:#FF0000">Indice</p>
<div id="indice"></div>
</body>
</html>
Resultado:

eq

input:button
input:text
input:password
input:radio
input:checkbox
input:hidden
input:file
input:submit
input:reset

Arquivo: jquery.html

<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#teste input:button").eq(0).click(function(){$("div").text("Botão 1");});
$("#teste input:button").eq(1).click(function(){$("div").text("Botão 2");});
$("#teste input:button").eq(2).click(function(){$("div").text("Botão 3");});
$("#teste input:button").eq(3).click(function(){$("div").text("Botão 4");});
$("#teste input:button").eq(4).click(function(){$("div").text("Botão 5");});
})
</script>
</head>
<body>
<input type="button" value="Botão x">
<hr />
<p id="teste">
<input type="button" value="Botão 1"> <br>
<input type="button" value="Botão 2"> <br>
<input type="button" value="Botão 3"> <br>
<input type="button" value="Botão 4"> <br>
<input type="button" value="Botão 5"> <br>
</p>
<div></div>
</body>
</html>
Resultado:

Quantidade

Arquivo: jquery.html
<html>
<head>
<title>jQuery</title>
<style type="text/css" media="all">
div {
width:200px;
height:100px;
border:1px solid #000;
margin:20px;
}
</style>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#total").click(total);
})
function total() {
var s = $("div#n").length;
alert(s);
}
</script>
</head>
<body>
Clique aqui para saber quantas DIVs existem nesse documento
<input type="button" id="total" value="Total">.
<hr />
<div id="n">DIV</div>
<div id="n">DIV</div>
<div id="n">DIV</div>
<div>DIV FALSA</div>
</body>
</html>
Resultado:

Consertando o erro do after

Arquivo: jquery.html

<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
var indice = 0;
$(document).ready(function () {

$("#botao1").click(carregando);
$("#botao2").click(apagar);

})
function apagar() {
var s = $("div#apagar_x").length;
alert(s);
for(x = s-1; x>=0; x--){
$("div#apagar_x").eq(x).remove();
}
}
function carregando() {
$('#indice').after('<div id="apagar_x">O índice deste parágrafo é : <b style="color: #FF0000">' + indice + '</b><br /><div>');
indice++
}
</script>
</head>
<body>
<input type="button" id="botao1" value="Carregar">
<input type="button" id="botao2" value="Apagar">
<p style="color:#FF0000">Indice</p>
<div id="indice"></div>
</body>
</html>
Resultado: