Tutorial JQuery
Tutorial JQueryDownload JQuery
$() - seletor jquery - equivale ao document.getElementByID()
//aqui vem todo o js ,
//que será executado só quando o DOM estiver pronto
$(document).ready(function(){
//aqui dentro o seu codigo js ou funcoes do jquery
});
//atualiza uma div com "hahahahahaah"
//html - equivale ao innerHtml
$("#main").html("hahahahahaah");
//selecionando nós filho do nó pai
//em todas as divs dentro da minha div #main aplicarei esse css
$("#main > *").css("border", "3px double red");
//div pai em div filho
$("#pai > #filho").css("border", "3px double red");
//esconde uma div
$("#main").hide();
//efeito fade na div
$("#main").FadeIn("fast");
$("#main").FadeOut("slow");
//chama um efeito para uma div e realiza uma funcao no callback
$("#main").show( "slow", function(){ alert("deslizou!")} )
//efeito de slide
$("#main").slideDown("slow")
$("#main").slideUp("fast")
//carrego em uma div determinado conteudo de outra pagina
$("#links").load("/Main_Page #p-Getting-Started li");
REQUISIÇÃO AJAX
//isso pode ficar dentro de uma funcao
$.ajax({
type: "POST",//tipo
url: "some.php",//arquivo a passar os parametros
data: { nome: "wallace", idade: "22" },//aqui vc pode usar alguma funçao que retorne os dados dos campos de um form, por exemplo
success: function(retorno_do_php){
alert( "Dados retornados: " + retorno_do_php);
}
});
some.php
if(isset($_POST['nome']) && isset($_POST['idade'])){
print "{$_POST['nome']} - {$_POST['idade']}";
}
outras coisinhas do site http://simplesideias.com.br/usando-jquery-na-pratica/
Exemplos práticos
Agora você conhece os seletores do jQuery, veja alguns exemplos mostrando como usar este framework.
- Executando códigos no após o carregamento da página (onload) - ready.html
- Zebrar uma tabela, adicionando uma classe de CSS - zebra-table.html
- Adicionar um evento
onmouseovernas linhas de uma tabela, alterando a cor de fundo - table-row.html - Iterar em uma lista de elementos retornados - iteration.html
- Mover itens de uma lista para outra - list-items.html
- Carregar HTML em um elemento - html-content.html
- Carregar dados em formato JSON - json-content.html
- Exibir/Esconder elementos - show-hide.html
