4 de ago. de 2008

Tutorial JQuery

Tutorial JQuery

Download 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");


//nesse caso, seleciono todas as "li" na div 'p-Getting-Started' na pagina /Main_Page

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.