Você está na página 1de 28

Biblioteca jQuery

Biblioteca jQuery

O que jQuery?
jQuery uma biblioteca feita para facilitar o trabalho em Biblioteca jQuery
O que jQuery?
Javascript Por que usar jQuery?
Slogan: Write less, do more! Como usar?
Sintaxe
Tarefas que requerem muitas linhas de cdigo em Evento Document Ready
Exemplo de aplicao
JS puro podem ser realizadas de forma gil em Seletores
jQuery Elemento
id
Classe

A prpria biblioteca jQuery um conjunto de classes e Alguns eventos DOM


click()
funes escritas em JS; dblclick()
mouseenter()
mouseleave()

Simplifica a manipulao do Document Object Model mousedown()


mouseup()
(DOM); hover()
focus()
blur()
Algumas aplicaes: on()
Mtodos val e html
manipulao HTML/DOM; Exemplos
Referncias
manipulao de CSS;
eventos e mtodos HTML;
integrao com AJAX.
Biblioteca jQuery

Por que usar jQuery?


Existem outros frameworks para JS, no entanto jQuery Biblioteca jQuery
O que jQuery?
o mais popular e o mais extensvel; Por que usar jQuery?
Como usar?
Sintaxe
Algumas grandes empresas que usam jQuery so: Evento Document Ready

Google; Exemplo de aplicao


Seletores
Microsoft; Elemento
id
IBM; Classe

Wikipedia; Alguns eventos DOM


click()
Netflix e outros. dblclick()
mouseenter()
mouseleave()

H duas maneiras de usar jQuery em um projeto: mousedown()


mouseup()
1. Fazer o download da biblioteca no site jQuery.com: hover()
focus()
Um arquivo JS simples blur()

2. Incluir jQuery a partir de um Content Delivery on()


Mtodos val e html
Network (CDN): Exemplos
Referncias
CDN da Google ou da Microsoft
Biblioteca jQuery

Como usar jQuery?


Usando a alternativa de download: Biblioteca jQuery
O que jQuery?
Por que usar jQuery?
<head> Como usar?
Sintaxe
<script src="caminhoRelativo/query-1.11.3.min.js"></script> Evento Document Ready
</head> Exemplo de aplicao
Seletores
Elemento
id
Usando CDN: Classe

Google Alguns eventos DOM


click()
dblclick()
<head> mouseenter()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> mouseleave()
</head> mousedown()
mouseup()
hover()
focus()
Microsoft blur()
on()
<head> Mtodos val e html
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script> Exemplos
</head> Referncias
Biblioteca jQuery

Sintaxe
jQuery projetado sob medida para a manipulao de Biblioteca jQuery

elementos HTML e para realizar aes sobre esses


O que jQuery?
Por que usar jQuery?
elementos; Como usar?
Sintaxe
Evento Document Ready

A sintaxe bsica $(selector).action(), onde: Exemplo de aplicao


Seletores
$ define/acessa jQuery; Elemento
id
(selector) consulta ou encontra elementos HTML; Classe

action() executa uma ao sobre um elemento Alguns eventos DOM


click()
dblclick()
mouseenter()
Outra notao: jQuery(selector).action() mouseleave()
mousedown()
mouseup()
Exemplos: hover()
focus()
$(this).hide() blur()

jQuery("p").hide() on()
Mtodos val e html
$(".nomeDeUmaClasse").hide() Exemplos
Referncias
jQuery("#nomeDeUmIdentificador").hide()
Biblioteca jQuery

O evento Document Ready


Evita que um cdigo jQuery seja executado antes que o Biblioteca jQuery

documento tenha o contedo totalmente carregado (isto


O que jQuery?
Por que usar jQuery?
, document ready); Como usar?
Sintaxe
Evento Document Ready
Antes de manipular o documento, interessante esperar Exemplo de aplicao
que ele seja totalmente carregado; Seletores
Elemento
id
Exemplos de algumas falhas que podem ocorrer caso Classe

algum mtodo seja executado antes do documento ter Alguns eventos DOM
click()
sido totalmente carregado so: dblclick()
mouseenter()
Tentativa de esconder um elemento que ainda no mouseleave()

foi criado e; mousedown()


mouseup()
Tentativa de pegar o tamanho de uma fonte que hover()
focus()
ainda no foi carregada completamente. blur()

Sintaxe: on()
Mtodos val e html
Exemplos
$(document).ready(function(){ Referncias
//O cdigo jQuery deve ser escrito aqui
});
Biblioteca jQuery

jQuery: exemplo de aplicao


Biblioteca jQuery
O que jQuery?
<!DOCTYPE html>
Por que usar jQuery?
<html> Como usar?
<head> Sintaxe
Evento Document Ready
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"> Exemplo de aplicao
</script> Seletores
Elemento
id
<script> Classe
$(document).ready(function(){ Alguns eventos DOM
$("button").click(function(){ click()
jQuery("p").hide(); dblclick()
}); mouseenter()
mouseleave()
});
mousedown()
</script> mouseup()
hover()
</head> focus()
<body> blur()
<h2>Usando jQuery</h2> on()
<p>Eu sou um pargrafo. Aps o click do boto eu vou ficar escondido</p> Mtodos val e html
Exemplos
<p>E eu mais tu</p>
Referncias
<button>Ocultar pargrafos</button>
</body>
</html>
Biblioteca jQuery

Seletores
uma das partes mais importantes da biblioteca; Biblioteca jQuery
O que jQuery?
Por que usar jQuery?
Os seletores so usados para "encontrar" (ou selecionar) Como usar?
Sintaxe
elementos HTML baseados no ID, na classe, no tipo, nos Evento Document Ready

atributos, nos valores de atributos, etc; Exemplo de aplicao


Seletores
Elemento
id
Baseia-se nos seletores CSS existentes e, alm disso, Classe

possui alguns seletores prprios personalizados. Alguns eventos DOM


click()
dblclick()
mouseenter()
mouseleave()
mousedown()
mouseup()
hover()
focus()
blur()
on()
Mtodos val e html
Exemplos
Referncias
Biblioteca jQuery

Seletor Elemento
Seleciona os elementos com base no nome dos Biblioteca jQuery

elementos;
O que jQuery?
Por que usar jQuery?
Como usar?
Sintaxe
Exemplos: Evento Document Ready

$("p") Exemplo de aplicao


Seletores
$("h1") Elemento
id
$("div") Classe
Alguns eventos DOM
click()
dblclick()
mouseenter()
mouseleave()
mousedown()
mouseup()
hover()
focus()
blur()
on()
Mtodos val e html
Exemplos
Referncias
Biblioteca jQuery

Seletor #id
Utiliza o atributo id de uma tag HTML para encontrar o Biblioteca jQuery

elemento especfico;
O que jQuery?
Por que usar jQuery?
Como usar?
Sintaxe
Vale lembrar que: um id deve ser nico dentro de uma Evento Document Ready

pgina HTML; Exemplo de aplicao


Seletores
Elemento
id
Exemplos: Classe

$("#meu_paragrafo") Alguns eventos DOM


click()
$("#cab_01") dblclick()
mouseenter()
$("#div_topo") mouseleave()
mousedown()
mouseup()
hover()
focus()
blur()
on()
Mtodos val e html
Exemplos
Referncias
Biblioteca jQuery

Seletor #id: exemplo


Biblioteca jQuery
O que jQuery?
Por que usar jQuery?
<!-- Na tag head: --> Como usar?
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script> Sintaxe
<script> Evento Document Ready
$(document).ready(function(){ Exemplo de aplicao
Seletores
$("#ocultar").click(function(){
Elemento
jQuery("p").hide(); id
}); Classe
$("#mostrar").click(function(){ Alguns eventos DOM
jQuery("p").show("slow"); click()
}); dblclick()
mouseenter()
});
mouseleave()
</script> mousedown()
mouseup()
<!-- Na tag body: --> hover()
<h2>Usando jQuery</h2> focus()
<p>Eu sou um pargrafo. Aps o click do boto eu vou ficar escondido</p> blur()
<p>E eu mais tu</p> on()
Mtodos val e html
<button id="ocultar">Ocultar pargrafos</button>
Exemplos
<button id="mostrar">Mostrar pargrafos</button> Referncias
Biblioteca jQuery

Seletor Classe
Utilizado para encontrar elementos pertencentes a uma Biblioteca jQuery

classe especfica;
O que jQuery?
Por que usar jQuery?
Como usar?
Sintaxe
Exemplos: Evento Document Ready

$(".meus_paragrafos") Exemplo de aplicao


Seletores
$(".seus_paragrafos") Elemento
id
$(".nossos_paragrafos") Classe
Alguns eventos DOM
click()
dblclick()
mouseenter()
mouseleave()
mousedown()
mouseup()
hover()
focus()
blur()
on()
Mtodos val e html
Exemplos
Referncias
Biblioteca jQuery

O que so Eventos?
So todas as aes que uma webpage pode responder; Biblioteca jQuery
O que jQuery?
Por que usar jQuery?
Um evento representa um momento especfico quando Como usar?
Sintaxe
algo acontece; Evento Document Ready
Exemplo de aplicao
Seletores
Por exemplo: Elemento
id
Movimento do mouse sobre um elemento; Classe

Seleo de uma opo em um radio button; Alguns eventos DOM


click()
Clique em um elemento. dblclick()
mouseenter()
mouseleave()
mousedown()
mouseup()
hover()
focus()
blur()
on()
Mtodos val e html
Exemplos
Referncias
Biblioteca jQuery

Alguns eventos DOM


Biblioteca jQuery
O que jQuery?
Eventos Por que usar jQuery?
Como usar?
Mouse Teclado Formulrios Documentos Sintaxe
Evento Document Ready
click keypress submit load Exemplo de aplicao
Seletores
dblclick keydown change resize Elemento
id
mouseenter keyup focus scroll Classe
Alguns eventos DOM
mouseleave blur unload click()
dblclick()
mouseenter()
mouseleave()
mousedown()
mouseup()
hover()
focus()
blur()
on()
Mtodos val e html
Exemplos
Referncias
Biblioteca jQuery

Evento click()
Ele disparado quando o usurio clica em um elemento Biblioteca jQuery

HTML;
O que jQuery?
Por que usar jQuery?
Como usar?
Sintaxe
<!DOCTYPE html> Evento Document Ready
<html> Exemplo de aplicao
<head> Seletores
Elemento
id
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js">
Classe
</script> Alguns eventos DOM
click()
<script> dblclick()
$(document).ready(function(){ mouseenter()
$("p").click(function(){ mouseleave()
$(this).hide(); mousedown()
mouseup()
}); hover()
}); focus()
</script> blur()
on()
</head> Mtodos val e html
<body> Exemplos
Referncias
<p>Eu sou um pargrafo. Clique sobre mim!</p>
</body>
</html>
Biblioteca jQuery

Evento dblclick()
O evento disparado quando o usurio faz um duplo Biblioteca jQuery

clique em um elemento HTML;


O que jQuery?
Por que usar jQuery?
Como usar?
Sintaxe
<!DOCTYPE html> Evento Document Ready
<html> Exemplo de aplicao
<head> Seletores
Elemento
id
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js">
Classe
</script> Alguns eventos DOM
click()
<script> dblclick()
$(document).ready(function(){ mouseenter()
$("h1").dblclick(function(){ mouseleave()
$(this).hide(); mousedown()
mouseup()
}); hover()
}); focus()
</script> blur()
on()
</head> Mtodos val e html
<body> Exemplos
Referncias
<h1>Sou um cabealho H1. Faa um duplo clique sobre mim!</h1>
</body>
</html>
Biblioteca jQuery

Evento mouseenter()
O evento disparado quando o ponteiro do mouse Biblioteca jQuery

posicionado sobre um elemento HTML;


O que jQuery?
Por que usar jQuery?
Como usar?
Sintaxe
<!DOCTYPE html> Evento Document Ready
<html> Exemplo de aplicao
<head> Seletores
Elemento
id
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js">
Classe
</script> Alguns eventos DOM
click()
<script> dblclick()
$(document).ready(function(){ mouseenter()
$("h2").mouseenter(function(){ mouseleave()
alert("Obrigado por ter colocado o mouse sobre mim."); mousedown()
mouseup()
}); hover()
}); focus()
</script> blur()
on()
</head> Mtodos val e html
<body> Exemplos
Referncias
<h2>Sou um cabealho H2. Passe o mouse sobre mim!</h2>
</body>
</html>
Biblioteca jQuery

Evento mouseleave()
O evento disparado quando o ponteiro do mouse sai Biblioteca jQuery

de cima de um elemento HTML;


O que jQuery?
Por que usar jQuery?
Como usar?
Sintaxe
<!DOCTYPE html> Evento Document Ready
<html> Exemplo de aplicao
<head> Seletores
Elemento
id
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js">
Classe
</script> Alguns eventos DOM
click()
<script> dblclick()
$(document).ready(function(){ mouseenter()
$("h1").mouseleave(function(){ mouseleave()
alert("Obrigado! Tchau!"); mousedown()
mouseup()
}); hover()
}); focus()
</script> blur()
on()
</head> Mtodos val e html
<body> Exemplos
Referncias
<h1>Posicione o ponteiro do mouse sobre mim e, em sequida, tire-o!</h1>
</body>
</html>
Biblioteca jQuery

Evento mousedown()
Disparado quando um dos botes do mouse est Biblioteca jQuery

pressionado sobre um elemento HTML;


O que jQuery?
Por que usar jQuery?
Como usar?
Sintaxe
<!DOCTYPE html> Evento Document Ready
<html> Exemplo de aplicao
<head> Seletores
Elemento
id
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js">
Classe
</script> Alguns eventos DOM
click()
<script> dblclick()
$(document).ready(function(){ mouseenter()
$("p").mousedown(function(){ mouseleave()
alert("Valeu: boto do mouse pressionado!"); mousedown()
mouseup()
}); hover()
}); focus()
</script> blur()
on()
</head> Mtodos val e html
<body> Exemplos
Referncias
<p>Pressione o mouse sobre mim e segure o boto!</p>
</body>
</html>
Biblioteca jQuery

Evento mouseup()
Disparado quando um dos botes do mouse foi Biblioteca jQuery

pressionado sobre um elemento HTML e, em seguida,


O que jQuery?
Por que usar jQuery?
liberado; Como usar?
Sintaxe
Evento Document Ready
Exemplo de aplicao
<!DOCTYPE html> Seletores
Elemento
<html>
id
<head> Classe
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"> Alguns eventos DOM
</script> click()
<script> dblclick()
$(document).ready(function(){ mouseenter()
mouseleave()
$("p").mouseup(function(){
mousedown()
alert("Valeu: boto do mouse pressionado e, em seguida, liberado!"); mouseup()
}); hover()
}); focus()
</script> blur()
</head> on()
<body> Mtodos val e html
Exemplos
<p>Pressione o mouse sobre mim e solte o boto!</p>
Referncias
</body>
</html>
Biblioteca jQuery

Evento hover()
Disparado quando o ponteiro do mouse passa sobre Biblioteca jQuery

um elemento HTML:
O que jQuery?
Por que usar jQuery?
Como usar?
Sintaxe
<!DOCTYPE html> Evento Document Ready
<html> Exemplo de aplicao
<head> Seletores
Elemento
id
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js">
Classe
</script> Alguns eventos DOM
click()
<script> dblclick()
$(document).ready(function(){ mouseenter()
$("h3").hover(function(){ mouseleave()
alert("Voc passou o mouse sobre mim!"); mousedown()
mouseup()
}); hover()
}); focus()
</script> blur()
on()
</head> Mtodos val e html
<body> Exemplos
Referncias
<h3>Passe o mouse sobre mim!</h3>
</body>
</html>
Biblioteca jQuery

Evento focus()
Disparado quando um campo de um formulrio recebe o Biblioteca jQuery

foco:
O que jQuery?
Por que usar jQuery?
Como usar?
Sintaxe
<!DOCTYPE html> Evento Document Ready
<html> Exemplo de aplicao
<head> Seletores
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"> Elemento
id
</script>
Classe
<script> Alguns eventos DOM
$(document).ready(function(){ click()
$("input").focus(function(){ dblclick()
$(this).css("backgroundcolor", "#cccccc"); mouseenter()
}); mouseleave()
}); mousedown()
mouseup()
</script> hover()
</head> focus()
<body> blur()
<form> on()
<label for="nome">Nome:<label> Mtodos val e html
<input type="text" id="nome" name="nome"> Exemplos
Referncias
</form>
</body>
</html>
Biblioteca jQuery

Evento blur()
Disparado quando um campo de um formulrio perde o Biblioteca jQuery

foco:
O que jQuery?
Por que usar jQuery?
<!DOCTYPE html> Como usar?
<html> Sintaxe
<head> Evento Document Ready
Exemplo de aplicao
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js">
Seletores
</script> Elemento
<script> id
$(document).ready(function(){ Classe
$("input").focus(function(){ Alguns eventos DOM
$(this).css("backgroundcolor", "#cccccc"); click()
}); dblclick()
mouseenter()
$("input").blur(function(){
mouseleave()
$(this).css("backgroundcolor", "#ffffff"); mousedown()
}); mouseup()
}); hover()
</script> focus()
</head> blur()
on()
<body>
Mtodos val e html
<form> Exemplos
<label for="nome">Nome:<label><input type="text" id="nome" name="nome"> Referncias
<label for="fone">Fone:<label><input type="text" id="fone" name="fone">
</form>
</body>
</html>
Biblioteca jQuery

Evento on()
Permite que mais de um evento seja disparado sobre um Biblioteca jQuery

mesmo elemento:
O que jQuery?
Por que usar jQuery?
Como usar?
<!-- Na tag head: --> Sintaxe
Evento Document Ready
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js">
Exemplo de aplicao
</script> Seletores
<script> Elemento
$(document).ready(function(){ id
$("p").on({ Classe
mouseenter: function(){ Alguns eventos DOM
click()
$(this).css("backgroundcolor", "lightgray");
dblclick()
}, mouseenter()
mouseleave: function(){ mouseleave()
$(this).css("backgroundcolor", "lightblue"); mousedown()
}, mouseup()
click: function(){ hover()
focus()
$(this).css("backgroundcolor", "yellow");
blur()
} on()
}); Mtodos val e html
}); Exemplos
</script> Referncias

<!-- Na tag body: -->


<p>Vrios eventos podem ser disparados aqui: entrada, sada e click do mouse.</p>
Biblioteca jQuery

Mtodos val() e html()


val() Biblioteca jQuery

Retorna ou atribui o valor de um elemento


O que jQuery?
Por que usar jQuery?
selecionado; Como usar?
Sintaxe
Sintaxe: Evento Document Ready

Para retornar valor: $(selector).val(); Exemplo de aplicao


Seletores
Para atribuir valor: $(selector).val(valor). Elemento
id
Classe

html() Alguns eventos DOM


click()
Retorna ou atribui o contedo (innerHTML) dos dblclick()
mouseenter()
elementos selecionados; mouseleave()

Sintaxe: mousedown()
mouseup()
Para retornar valor: $(selector).html(); hover()
focus()
Para atribuir valor: $(selector).html(conteudo). blur()
on()
Mtodos val e html
Exemplos
Referncias
Biblioteca jQuery

Mtodo val(): exemplo


Biblioteca jQuery
O que jQuery?
Por que usar jQuery?
<!-- Na tag head, alm da chamada da biblioteca jQuery, adicione o cdigo abaixo--> Como usar?
$(document).ready(function(){ Sintaxe
$("#calcula").click(function(){ Evento Document Ready
var N1 = $("#n1").val(); //Retorna o valor de um textbox Exemplo de aplicao
Seletores
var N2 = $("#n2").val(); //Retorna o valor de um select
Elemento
var res = parseInt(N1) + parseInt(N2); id
$("#res").val(res); //Atribui um valor Classe
}); Alguns eventos DOM
}); click()
<!-- Na tag body: --> dblclick()
mouseenter()
<form>
mouseleave()
<label for="n1">N1:</label> <input type="text" id="n1"><br> mousedown()
<label for="n2">N2:</label> mouseup()
<select id="n2"> hover()
<option value="5">5</option> focus()
<option value="10">10</option> blur()
</select><br> on()
Mtodos val e html
<label for="res">Res:</label> <input type="text" id="res">
Exemplos
</form> Referncias
<button id="calcula">Calcula</button>
Biblioteca jQuery

Mtodo html(): exemplo


Biblioteca jQuery
O que jQuery?
Por que usar jQuery?
<!DOCTYPE html> Como usar?
<html> Sintaxe
Evento Document Ready
<head> Exemplo de aplicao
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> Seletores
<script> Elemento
$(document).ready(function(){ id
$("button").click(function(){ Classe
$("p").html("Oi ;-) "); Alguns eventos DOM
click()
});
dblclick()
}); mouseenter()
</script> mouseleave()
</head> mousedown()
<body> mouseup()
<p>Pargrafo 1.</p> hover()
focus()
<p>Pargrafo 2.</p>
blur()
<button>Muda o contedo dos pargrafos</button> on()
</body> Mtodos val e html
</html> Exemplos
Referncias
Biblioteca jQuery

Referncias
[1].jQuery. What is jQuery? Disponvel em: jquery.com. Acessado em: Biblioteca jQuery
03 set. 2017. O que jQuery?
Por que usar jQuery?
[2].W3SCHOOLS. jQuery Tutorial. Disponvel em: Como usar?
http://www.w3schools.com/jquery/default.asp. Acessado em: 03 set. Sintaxe
Evento Document Ready
2017. Exemplo de aplicao
Seletores
[3].W3SCHOOLS. jQuery Selectors. Disponvel em: Elemento
http://www.w3schools.com/jquery/jquery_selectors.asp. Acessado em: 06 id
set. 2017. Classe
Alguns eventos DOM

[4].W3SCHOOLS. jQuery Event Methods. Disponvel em: click()


dblclick()
http://www.w3schools.com/jquery/jquery_events.asp. Acessado em: 08 mouseenter()
set. 2017. mouseleave()
[5]. W3SCHOOLS. jQuery html() method. Disponvel em: mousedown()
http://www.w3schools.com/jquery/html_html.asp. Acessado em: set. mouseup()
hover()
09 2017. focus()
blur()
[5]. W3SCHOOLS. jQuery val() method. Disponvel em: on()
http://www.w3schools.com/jquery/html_val.asp. Acessado em: set. Mtodos val e html
09 2017. Exemplos
Referncias

[6].W3SCHOOLS. jQuery Effects - Hide and Show. Disponvel em:


http://www.w3schools.com/jquery/jquery_hide_show.asp. em:
Acessado 09 set. 2017.