jQuery - A biblioteca javascript

jQuery
A biblioteca javascript

Diogo Benicá

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

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

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

Exemplos
Legenda
Não!

Evitar

Yeah!

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

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

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

Animar conteúdo HTML

html
<div id=”minha_box”></div>

jQuery

$(“#meu_link”).animate({
opacity: 0.25,
left: “+=50”, Com plugin
backgroundColor: “red”
});

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

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

atalho para

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

jQuery - A biblioteca javascript

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a jQuery - A biblioteca javascript

jQuery - A biblioteca javascript