jQuery - Introdução

Introdução ao jQuery

Transcript

1. A biblioteca javascript jQuery Diogo Benicá
2. Escreva menos Faça mais
3. Encontrar elementos em um HTML Alterar conteúdo HTML Ouvir ações do usuário Animar conteúdo HTML Conversar com outras páginas/sistemas
4. Javascript! Mas antes...
5. DOM html head title Meu título body h1 Notícias p Primeira notícia <html> <head> <title> Meu título </title> </head> <body> <h1>Notícias</h1> <p> Primeira notícia </p> </body> </html>
6. Porém, os navegadores tem pequenas diferenças no DOM
8. Legenda Não! Evitar Yeah! Exemplos
9. Encontrar elementos em um HTML <body> <a href=”#” id=”meu_link” class=”classe_do_link”> </body> $(“a”) $(“#meu_link”) $(“.classe_do_link”) html jQuery $(“a.classe_do_link”)
10. <body> <span id=”meu_texto”>Hello jQuery!</span> </body> $(“#meu_texto”).html(“Hello!”) $(“#meu_texto”).append(“Hello!”).width(170) html jQuery Alterar conteúdo HTML $(“#meu_input”).val(“jQuery”)
11. <a href=”#” id=”meu_link”> $(“#meu_link”).click( ); html jQuery Ouvir ações do usuário function(){ $(“#login-box”).show(); $(“#login-box > p”).html(“Bem-vindo!”); }
12. <div id=”minha_box”></div> $(“#meu_link”).animate({ }); html jQuery Animar conteúdo HTML opacity: 0.25, left: “+=50”, backgroundColor: “red” Com plugin
13. http://site.com/produtos $.getJSON(“http://site.com/produtos”, function(dados){ ); servidor jQuery Conversar com outras páginas/sistemas GET json //dados é o retorno $.each(dados, function(){ // Loop para cada item que retornou no json });
14. $.getJSON(“http://site.com/produtos”, função) atalho para $.ajax({ dataType: “json”, url: “http://site.com/produtos”, success: função });
15. Fim