Este documento apresenta a biblioteca jQuery, que permite escrever menos código JavaScript para realizar tarefas comuns no DOM, como encontrar e alterar elementos HTML, ouvir eventos do usuário e animar conteúdo. Explica brevemente como o DOM representa a estrutura HTML e fornece exemplos de como selecionar e manipular elementos, adicionar eventos de clique e animações usando jQuery.
5. DOM
html
<html>
<head> head
<title>
Meu título title
</title>
</head> Meu título
<body>
<h1>Notícias</h1> body
<p>
Primeira notícia h1
</p> Notícias
</body>
</html>
p
Primeira notícia
9. Encontrar elementos em um HTML
html
<body>
<a href=”#” id=”meu_link” class=”classe_do_link”>
</body>
jQuery
$(“a”) $(“#meu_link”)
$(“.classe_do_link”) $(“a.classe_do_link”)
10. Alterar conteúdo HTML
html
<body>
<span id=”meu_texto”>Hello jQuery!</span>
</body>
jQuery
$(“#meu_texto”).html(“Hello!”)
$(“#meu_texto”).append(“Hello!”).width(170)
$(“#meu_input”).val(“jQuery”)
11. Ouvir ações do usuário
html
<a href=”#” id=”meu_link”>
jQuery
$(“#meu_link”).click( function(){
$(“#login-box”).show();
$(“#login-box > p”).html(“Bem-vindo!”);
});
12. Animar conteúdo HTML
html
<div id=”minha_box”></div>
jQuery
$(“#meu_link”).animate({
opacity: 0.25,
left: “+=50”, Com plugin
backgroundColor: “red”
});
13. Conversar com outras páginas/sistemas
servidor
GET http://site.com/produtos json
jQuery
$.getJSON(“http://site.com/produtos”, function(dados){
//dados é o retorno
$.each(dados, function(){
// Loop para cada item que retornou no json
});
);