jQuery - A biblioteca javascript

A biblioteca javascript

jQuery

Diogo Benicá

Escreva menosFaç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...

DOMhtml

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

http://meusite.com.br/produtos




$.getJSON(“http://site.com/produtos”, função)

atalho para

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

});





jQuery - A biblioteca javascript

Technology

Transcript of jQuery - A biblioteca javascript