JQuery

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?
<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?
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?
, document ready); Como usar?
Sintaxe
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>
<html> Como usar?
<head> Sintaxe
<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?
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?
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?
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?
 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()
 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?
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?
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
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?
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?
Como usar?
Sintaxe
<head> Seletores
Elemento
id
Classe
click()
<script> dblclick()
$("h1").dblclick(function(){ mouseleave()
$(this).hide(); mousedown()
mouseup()
}); hover()
}); focus()
</script> blur()
on()
<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?
Como usar?
Sintaxe
<head> Seletores
Elemento
id
Classe
click()
<script> dblclick()
$("h2").mouseenter(function(){ mouseleave()
alert("Obrigado por ter colocado o mouse sobre mim."); mousedown()
mouseup()
}); hover()
}); focus()
</script> blur()
on()
<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?
Como usar?
Sintaxe
<head> Seletores
Elemento
id
Classe
click()
<script> dblclick()
$("h1").mouseleave(function(){ mouseleave()
alert("Obrigado! Tchau!"); mousedown()
mouseup()
}); hover()
}); focus()
</script> blur()
on()
<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?
Como usar?
Sintaxe
<head> Seletores
Elemento
id
Classe
click()
<script> dblclick()
$("p").mousedown(function(){ mouseleave()
alert("Valeu: boto do mouse pressionado!"); mousedown()
mouseup()
}); hover()
}); focus()
</script> blur()
on()
<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?
liberado; Como usar?
Sintaxe
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()
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?
Como usar?
Sintaxe
<head> Seletores
Elemento
id
Classe
click()
<script> dblclick()
$("h3").hover(function(){ mouseleave()
alert("Voc passou o mouse sobre mim!"); mousedown()
mouseup()
}); hover()
}); focus()
</script> blur()
on()
<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?
Como usar?
Sintaxe
<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?
<!DOCTYPE html> Como usar?
<html> Sintaxe
<head> Evento Document Ready
Exemplo de aplicao
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?
Como usar?
 Sintaxe
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


<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?
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?
 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()
 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?
<!DOCTYPE html> Como usar?
<html> Sintaxe
<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?
[2].W3SCHOOLS. jQuery Tutorial. Disponvel em: Como usar?
http://www.w3schools.com/jquery/default.asp. Acessado em: 03 set. Sintaxe
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.

JQuery

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

JQuery

Enviado por

Direitos autorais:

Formatos disponíveis

Biblioteca jQuery

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

Simplifica a manipulao do Document Object Model mousedown()

Por que usar jQuery?

Google; Exemplo de aplicao

Wikipedia; Alguns eventos DOM

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

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

Como usar jQuery?

Google Alguns eventos DOM

elementos HTML e para realizar aes sobre esses

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

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

O evento Document Ready

documento tenha o contedo totalmente carregado (isto

foi criado e; mousedown()

jQuery: exemplo de aplicao

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

possui alguns seletores prprios personalizados. Alguns eventos DOM

$("p") Exemplo de aplicao

pgina HTML; Exemplo de aplicao

$("#meu_paragrafo") Alguns eventos DOM

Seletor #id: exemplo

$(".meus_paragrafos") Exemplo de aplicao

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

Alguns eventos DOM

clique em um elemento HTML;

posicionado sobre um elemento HTML;

de cima de um elemento HTML;

pressionado sobre um elemento HTML;

pressionado sobre um elemento HTML e, em seguida,

Mtodos val() e html()

Retorna ou atribui o valor de um elemento

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

html() Alguns eventos DOM

Mtodo val(): exemplo

Mtodo html(): exemplo

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

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

Você também pode gostar