jQuery - A biblioteca javascript
-
Upload
diogo-benica -
Category
Technology
-
view
309 -
download
3
description
Transcript of jQuery - A biblioteca javascript
![Page 1: jQuery - A biblioteca javascript](https://reader036.fdocuments.net/reader036/viewer/2022081506/559e94a91a28ab2c3d8b473f/html5/thumbnails/1.jpg)
A biblioteca javascript
jQuery
Diogo Benicá
![Page 2: jQuery - A biblioteca javascript](https://reader036.fdocuments.net/reader036/viewer/2022081506/559e94a91a28ab2c3d8b473f/html5/thumbnails/2.jpg)
Escreva menosFaça mais
![Page 3: jQuery - A biblioteca javascript](https://reader036.fdocuments.net/reader036/viewer/2022081506/559e94a91a28ab2c3d8b473f/html5/thumbnails/3.jpg)
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
![Page 4: jQuery - A biblioteca javascript](https://reader036.fdocuments.net/reader036/viewer/2022081506/559e94a91a28ab2c3d8b473f/html5/thumbnails/4.jpg)
Javascript!
Mas antes...
![Page 5: jQuery - A biblioteca javascript](https://reader036.fdocuments.net/reader036/viewer/2022081506/559e94a91a28ab2c3d8b473f/html5/thumbnails/5.jpg)
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>
![Page 6: jQuery - A biblioteca javascript](https://reader036.fdocuments.net/reader036/viewer/2022081506/559e94a91a28ab2c3d8b473f/html5/thumbnails/6.jpg)
Porém, os navegadores tem pequenas diferenças no DOM
![Page 7: jQuery - A biblioteca javascript](https://reader036.fdocuments.net/reader036/viewer/2022081506/559e94a91a28ab2c3d8b473f/html5/thumbnails/7.jpg)
![Page 8: jQuery - A biblioteca javascript](https://reader036.fdocuments.net/reader036/viewer/2022081506/559e94a91a28ab2c3d8b473f/html5/thumbnails/8.jpg)
Legenda
Não!
Evitar
Yeah!
Exemplos
![Page 9: jQuery - A biblioteca javascript](https://reader036.fdocuments.net/reader036/viewer/2022081506/559e94a91a28ab2c3d8b473f/html5/thumbnails/9.jpg)
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”)
![Page 10: jQuery - A biblioteca javascript](https://reader036.fdocuments.net/reader036/viewer/2022081506/559e94a91a28ab2c3d8b473f/html5/thumbnails/10.jpg)
<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”)
![Page 11: jQuery - A biblioteca javascript](https://reader036.fdocuments.net/reader036/viewer/2022081506/559e94a91a28ab2c3d8b473f/html5/thumbnails/11.jpg)
<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!”);
}
![Page 12: jQuery - A biblioteca javascript](https://reader036.fdocuments.net/reader036/viewer/2022081506/559e94a91a28ab2c3d8b473f/html5/thumbnails/12.jpg)
<div id=”minha_box”></div>
$(“#meu_link”).animate({
});
html
jQuery
Animar conteúdo HTML
opacity: 0.25,left: “+=50”,backgroundColor: “red”
Com plugin
![Page 13: jQuery - A biblioteca javascript](https://reader036.fdocuments.net/reader036/viewer/2022081506/559e94a91a28ab2c3d8b473f/html5/thumbnails/13.jpg)
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});
![Page 14: jQuery - A biblioteca javascript](https://reader036.fdocuments.net/reader036/viewer/2022081506/559e94a91a28ab2c3d8b473f/html5/thumbnails/14.jpg)
$.getJSON(“http://site.com/produtos”, função)
atalho para
$.ajax({dataType: “json”,url: “http://site.com/produtos”,success: função
});
![Page 15: jQuery - A biblioteca javascript](https://reader036.fdocuments.net/reader036/viewer/2022081506/559e94a91a28ab2c3d8b473f/html5/thumbnails/15.jpg)
Fim