jQuery - A biblioteca javascript
-
Upload
diogo-benica -
Category
Technology
-
view
302 -
download
3
description
Transcript of 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});
$.getJSON(“http://site.com/produtos”, função)
atalho para
$.ajax({dataType: “json”,url: “http://site.com/produtos”,success: função
});
Fim