jQuery - Introdução

A biblioteca javascript jQuery Diogo Benicá

Escreva menos Faça mais

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

Javascript! Mas antes...

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>

Porém, os navegadores tem pequenas diferenças no DOM

Legenda Não! Evitar Yeah! Exemplos

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”)

<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”)

<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!”); }

<div id=”minha_box”></div> $(“#meu_link”).animate({ }); html jQuery Animar conteúdo HTML opacity:
0.25, left: “+=50”, backgroundColor: “red” Com plugin

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 });

$.getJSON(“http://site.com/produtos”, função) atalho para $.ajax({ dataType: “json”, url: “http://site.com/produtos”, success:
função });

jQuery - Introdução

jQuery - Introdução

Diogo Benicá

Other Decks in Programming

Featured

Transcript

A biblioteca javascript jQuery Diogo Benicá

Escreva menos Faça mais

Encontrar elementos em um HTML Alterar conteúdo HTML Ouvir ações

Javascript! Mas antes...

DOM html head title Meu título body h1 Notícias p

Porém, os navegadores tem pequenas diferenças no DOM

Legenda Não! Evitar Yeah! Exemplos

Encontrar elementos em um HTML <body> <a href=”#” id=”meu_link” class=”classe_do_link”>

<body> <span id=”meu_texto”>Hello jQuery!</span> </body> $(“#meu_texto”).html(“Hello!”) $(“#meu_texto”).append(“Hello!”).width(170) html jQuery Alterar

<a href=”#” id=”meu_link”> $(“#meu_link”).click( ); html jQuery Ouvir ações do

<div id=”minha_box”></div> $(“#meu_link”).animate({ }); html jQuery Animar conteúdo HTML opacity:

http://site.com/produtos $.getJSON(“http://site.com/produtos”, function(dados){ ); servidor jQuery Conversar com outras páginas/sistemas

$.getJSON(“http://site.com/produtos”, função) atalho para $.ajax({ dataType: “json”, url: “http://site.com/produtos”, success:

Fim