Tutorial sobre Jquery

Defini¸cões Efeitos jQuery jQuery e HTML
Programa¸cão para Web
jQuery
Ivo Calado
Instituto Federal de Educa¸cão, Ciência e Tecnologia de Alagoas
22 de Fevereiro de 2016
1 / 54 Ivo Calado IFAL

Roteiro
1 Deﬁni¸c˜oes
2 Efeitos jQuery
3 jQuery e HTML

Caracter´ısticas básicas
O que é jQuery?
É uma biblioteca JavaScript para constru¸cão de páginas Web
Tem como objetivo tornar facilitar a utiliza¸cão de JavaScript
nas páginas
Reduz o esfor¸co para realiza¸cão de a¸cões comuns do
JavaScript
O que é necessário conhecer para utilizar jQuery?
HTML
CSS
JavaScript

O que jQuery possibilita?
O jQuery possue suporte a manipula¸cão dos seguintes recursos:
Manipula¸cão HTML/DOM
Manipula¸cão de CSS
Tratamento de eventos HTML
Efeitos e anima¸cões
AJAX
Além disso, é poss´ıvel encontrar plugins para diversas outras tarefas

Por que utilizar jQuery?
É considerado o framework JavaScript mais popular
Google
Microsoft
IBM
Netflix
É compat´ıvel com praticamente todos os navegadores
modernos
Com exce¸cão do IE 6!

Como adicionar jQuery?
Via Download de jquery.com
<head>
<s c r i p t src="jquery -1.11.3.min.js"></ s c r i p t>
</head>
Utiliza¸c˜ao de CDNs
<s c r i p t src="https://ajax.googleapis.com/ajax/
libs/jquery /1.11.3/ jquery.min.js"></ s c r i p t>
ou
<s c r i p t src="http://ajax.aspnetcdn.com/ajax/
jQuery/jquery -1.11.3.min.js"></ s c r i p t>

Observa¸c˜ao
Qual a importˆancia de se utilizar CDNs?

Observa¸cão
Qual a importância de se utilizar CDNs?
Reaproveitamento do cache
CDNs servem o arquivo através de servidores mais próximos
fisicamente do cliente

Sintaxe
Princ´ıpios básicos da Sintaxe jQuery (ex-01)
A sintaxe básica do jQuery é $(seletor).acao() ou
jquery(seletor).acao()
$ ou jquery, especificam o acesso ao jQuery
seletor especifica o elemento(s) que serão afetados
action() especifica a a¸cão a ser tomada
$ ( t h i s ) . hide () − o c u l t a o elemento a t u a l
$ ( "p" ) . hide () − o c u l t a todos os elementos p
$ ( ".test" ) . hide () − o c u l t a todos os elementos com a
c l a s s e ’ test ’
$ ( "#test" ) . hide () − o c u l t a o elemento com o i d ’ test ’

Sintaxe
Hello World (ex-01)
<body>
<h2>This i s a heading</h2>
<p>This i s a paragraph .</p>
<button>C l i c k me</button>
<p>This i s another paragraph .</p>
<s c r i p t>
$ ( "button" ) . c l i c k ( f u n c t i o n () {
$ ( "p" ) . hide () ;
}) ;
</ s c r i p t>
</body>

Sintaxe
Seletores
jQuery fornece uma ampla gama de possibilidades de busca de
seletores. Exemplo:
$(“p”): seleciona todos elementos “p”
$(“.c1”): seleciona todos os elementos com a classe “c1”
$(“#id1”): seleciona o elemento com o id “id1”
$(“p,h1”): seleciona todos elementos “p” e “h1”
Uma lista completa pode ser visualizada em:
http://www.w3schools.com/jquery/trysel.asp

Sintaxe
O evento “Ready Event” (ex-02)
O que acontece se o c´odigo que faz sele¸c˜ao a elementos aparece
antes dos elementos propriamente ditos?

Sintaxe
O evento “Ready Event” (ex-02)
O que acontece se o código que faz sele¸cão a elementos aparece
antes dos elementos propriamente ditos?
Os eventos não serão disparados pois os elementos não são
encontrados
Causas:
Problemas no carregamento da páginas
Defini¸cão do código antes do elemento
Solu¸cão: utilizar o evento ready event!
$ ( document ) . ready ( f u n c t i o n () {
$ ( "p" ) . hide () ;
}) ;
}) ;

Sintaxe
Exerc´ıcios
Baixar arquivo de https://goo.gl/gq5CBS. Para cada quest˜ao,
utilizar exemplo correspondente.
1 Ocultar todos os elementos “p”
2 Ocultar o seletor com o id “test”
3 Ocultar todos os elementos com a classe “test”
4 Ocultar todos os elementos do documento
5 Ocultar todos os elementos com o atributo href
6 Ocultar as linhas ´ımpares da tabela

Sintaxe
Atividade para casa
Estudar as demais formas de se selecionar elementos a partir de
http:
//www.w3schools.com/jquery/jquery_ref_selectors.asp

Eventos jQuery
O que são eventos? I
São a¸cões disparadas pela página Web em resposta as a¸cões do
usuário não página. Exemplos:
Eventos do mouse:
click
dblclick
mouseenter
mouseleave
Eventos do teclado:
keypress
keydown

Eventos jQuery
O que s˜ao eventos? II
keyup
Eventos de formul´ario:
submit
change
focus
blur
Eventos do documento:
load
resize
scroll
unload

Eventos jQuery
Evento click
Atribui tratador de evento a a¸cão de clique de usuário
Pode ser atribu´ıdo a qualquer elemento (botão ou não)
$ ( "p" ) . c l i c k ( f u n c t i o n () {
$ ( t h i s ) . hide () ;
}) ;

Eventos jQuery
Evento dblclick
Efeito semelhante ao evento click por´em requer o clique duplo
do usu´ario
$ ( "p" ) . d b l c l i c k ( f u n c t i o n () {
$ ( t h i s ) . hide () ;
}) ;
}) ;

Eventos jQuery
Eventos mouseenter e mouseleave
O evento mouseenter é disparado quando o usuário passa o
mouse sobre o elemento
$ ( "#p1" ) . mouseenter ( f u n c t i o n () {
a l e r t ( "You entered p1!" ) ;
}) ;
O evento mouseleave é disparado quando o usuário move o
mouse para fora do elemento
$ ( "#p1" ) . mouseleave ( f u n c t i o n () {
a l e r t ( "Bye! You now leave p1!" ) ;
}) ;
Testar eventos mousedown e mouseup

Eventos jQuery
Evento hover
Combina os eventos mouseenter e mouseleave
Utiliza duas fun¸cões, onde a primeira é disparada quando o
mouse é colocada sobre o elemento (mouseenter) e a segunda
fun¸cão é chamada quando o mouse é retirado do elemento
$ ( "#p1" ) . hover ( f u n c t i o n () {
a l e r t ( "Entrou em p1!" ) ;
} ,
f u n c t i o n () {
a l e r t ( "Saiu de p1!" ) ;
}) ;

Eventos jQuery
Como ´e poss´ıvel atribuir uma classe css a um dado
elemento?
<s t y l e>. c1 { c o l o r : red ; font −s i z e : 30px ; }</ s t y l e>
<s c r i p t>
$ ( "#p1" ) . hover ( f u n c t i o n () {
$ ( "p" ) . addClass ( "c1" )
} ,
f u n c t i o n () {
$ ( "p" ) . removeClass ( "c1" )
}) ;
}) ;
</ s c r i p t></head><body>
<span id="p1">This i s a paragraph .</span><br>
<p>t e s t e !</p>
</body>

Eventos jQuery
Evento focus e blur
Evento focus
$ ( "input" ) . focus ( f u n c t i o n () {
$ ( t h i s ) . c s s ( "background -color" , "#cccccc" ) ;
}) ;
Evento blur
$ ( "input" ) . b l u r ( f u n c t i o n () {
$ ( t h i s ) . c s s ({ "background -color" , "#ffffff" , "color"
: "blue" }) ;
}) ;

Eventos jQuery
O método on
Com o método on é poss´ıvel atrelar mais de um tratador de
eventos a um elemento por vez
$ ( "p" ) . on ({
mouseenter : f u n c t i o n () {
$ ( t h i s ) . c s s ( "background -color" , "lightgray" ) ;
} ,
mouseleave : f u n c t i o n () {
$ ( t h i s ) . c s s ( "background -color" , "lightblue" ) ;
} ,
c l i c k : f u n c t i o n () {
$ ( t h i s ) . c s s ( "background -color" , "yellow" ) ;
}
}) ;

Eventos jQuery
Exerc´ıcios
Baixar arquivo de https://goo.gl/KewJiz. Para cada questão,
1 Alterar o código para que os elementos “p” sejam ocultados
ao clique
2 Alterar o código para que os elementos “p” sejam ocultados
ao clique duplo
3 Alterar o código para que quando o mouse passar sobre o
elemento “span” ele seja ocultado
4 Alterar o código para que o “input” seja ocultado quando o
usuário digitar algum caracter
5 Utilizar o método “on” para atribuir um tratador ao evento do
clique do mouse a todos os elementos “p”

Eventos jQuery
Atividade para casa
Estudar os demais eventos do jQuery a partir de
http://www.w3schools.com/jquery/jquery_ref_events.asp

Hide, Show, Toggle, Fade e Slide
Eventos hide e show
O efeito hide tem como objetivo ocultar o elemento
$ ( "#hide" ) . c l i c k ( f u n c t i o n () {
$ ( "p" ) . hide () ;
}) ;
O efeito show tem como objetivo tornar vis´ıvel um elemento
previamente ocultado
$ ( "#show" ) . c l i c k ( f u n c t i o n () {
$ ( "p" ) . show () ;
}) ;

Velocidade para eventos hide e show
É poss´ıvel definir a velocidade para o desaparecimento ou
exibi¸cão dos elemento
$ ( "p#1" ) . hide (1000) ;
$ ( "p#2" ) . hide ( "slow" ) ;
$ ( "p#3" ) . hide ( "fast" ) ;
}) ;
Poss´ıveis valores:
“slow”
“fast”
tempo em milissegundos

Efeito toggle
Com o evento toggle ´e poss´ıvel implementar a troca cont´ınua
entre os efeitos hide e show
$ ( "p#id1" ) . t o g g l e (1000) ;
$ ( "p#id2" ) . t o g g l e ( "fast" ) ;
$ ( "p#id3" ) . t o g g l e ( "slow" ) ;
$ ( "p#id4" ) . t o g g l e () ;
}) ;
}) ;

Efeitos fade
jQuery fornece a possibilidade de adi¸cão de efeitos de fade
(desvanecimento) aos elementos
Efeito de fade é o efeito em que o elemento é removido ou
adicionado ao mesmo tempo em que sua transparência é
modificada
São definidos 4 métodos diferentes de fade
fadeIn
fadeOut
fadeToggle
fadeTo

fadeIn
Utilizado para adicionar elementos da p´agina
Sintaxe:
$ ( s e l e c t o r ) . f a d e I n ( speed , c a l l b a c k ) ;
Exemplo:
$ ( "#div1" ) . f a d e I n () ;
$ ( "#div2" ) . f a d e I n ( "slow" ) ; // slow ou f a s t
$ ( "#div3" ) . f a d e I n (3000) ;
}) ;

fadeOut
Utilizado para tornar vis´ıvel elementos da p´agina
Sintaxe:
$ ( s e l e c t o r ) . fadeOut ( speed , c a l l b a c k ) ;
Exemplo:
$ ( "#div1" ) . fadeOut () ;
$ ( "#div2" ) . fadeOut ( "slow" ) ;
$ ( "#div3" ) . fadeOut (3000) ;
}) ;

fadeToggle
Equivalente ao toggle: chaveamento entre os efeitos de fadeIn
e fadeOut
Sintaxe:
$ ( s e l e c t o r ) . fadeToggle ( speed , c a l l b a c k ) ;
Exemplo:
$ ( "#div1" ) . fadeToggle () ;
$ ( "#div2" ) . fadeToggle ( "slow" ) ;
$ ( "#div3" ) . fadeToggle (3000) ;
}) ;

fadeTo
Semelhante aos demais métodos de fadding, porém ao invés
de tornar os elementos vis´ıveis/invis´ıveis modifica o n´ıvel de
opacidade/transparência dos elementos
Sintaxe:
$ ( s e l e c t o r ) . fadeTo ( speed , opacity , c a l l b a c k ) ;
Exemplo:
$ ( "#div1" ) . fadeTo ( "slow" , 0.15) ;
$ ( "#div2" ) . fadeTo ( "slow" , 0 .4 ) ;
$ ( "#div3" ) . fadeTo ( "slow" , 0 .7 ) ;
}) ;

Exerc´ıcios
Baixar arquivo de https://goo.gl/nSpQh8. Para cada questão,
1 A partir do jQuery, remova o elemento div utilizando
desvanecimento
2 Repita o processo do exerc´ıcio anterior porém utilizando a
velocidade “slow”
3 Adicione o elemento div utilizando desvanecimento (a
velocidade da a¸cão deve ser de 2000 milissegundos)
4 Modifique a opacidade do elemento div para 0.2 (utilize a
velocidade “slow” para realiza¸cão da a¸cão)
5 Adicione o efeito de chaveamento para adi¸cão e remo¸cão do
elemento div com desvanecimento (a velocidade da a¸cão deve
ser de 1000 milissegundos)

Métodos de sliding
jQuery fornece três métodos para realiza¸cão de slide de
elementos (adi¸cão e remo¸cão de elementos via deslizamento)
slideDown: exibe o elemento
slideUp: esconde o elemento
slideToggle: chaveamento entre exibi¸cão e oculta¸cão
Sintaxe:
$ ( s e l e c t o r ) . slideDown ( speed , c a l l b a c k ) ;
Exemplo:
$ ( "#flip" ) . c l i c k ( f u n c t i o n () {
$ ( "#panel" ) . s l i d e Up () ;
}) ;

Anima¸cões
O método animate
A partir da utiliza¸cão do método animate é poss´ıvel criar
anima¸cões personalizadas

Anima¸cões
O método animate
A partir da utiliza¸cão do método animate é poss´ıvel criar
anima¸cões personalizadas
. . .
<s c r i p t>
$ ( "div" ) . animate ({ l e f t : ’250 px ’ } ) ;
}) ;
}) ;
</ s c r i p t>
. . .
<button> I n i c i a r anima¸cão</button>
<div s t y l e="background:blue;height :100px;width:100px;
position:absolute;"></ div>

Anima¸cões
Anima¸cões: sintaxe
Sintaxe:
$ ( s e l e c t o r ) . animate ({ params } , speed , c a l l b a c k ) ;
Os parâmetros definem propriedades CSS a serem animadas
O segundo parâmetro (opcional) define a velocidade com o
efeito será ajustado. Valores poss´ıveis: “slow”, “fast” e o
O terceiro parâmetro (opcional) define uma callback a ser
chamada ao final do processo de anima¸cão

Anima¸cões
Anima¸cões: sintaxe
Sintaxe:
$ ( s e l e c t o r ) . animate ({ params } , speed , c a l l b a c k ) ;
Os parâmetros definem propriedades CSS a serem animadas
O segundo parâmetro (opcional) define a velocidade com o
efeito será ajustado. Valores poss´ıveis: “slow”, “fast” e o
O terceiro parâmetro (opcional) define uma callback a ser
chamada ao final do processo de anima¸cão
Importante!
Por padrão, todos os elementos HTML tem a posi¸cão static e não
podem ser movidos. Para manipular a posi¸cão, deve-se primeiro
definir a propriedade position para relative, fixed ou absolute36 / 54 Ivo Calado IFAL

Anima¸cões
Manipulando múltiplas propriedades
É poss´ıvel manipular múltiplas propriedades CSS em uma
única chamada
$ ( "div" ) . animate ({
l e f t : ’250 px ’ ,
o p a c i t y : ’ 0 . 5 ’ ,
heig ht : ’150 px ’ ,
width : ’150 px ’
}) ;
}) ;

Anima¸cões
Dúvida?!
É poss´ıvel manipular todas as propriedades CSS via o método
animate?
Sim, porém as propriedades devem ser escritas no formato
camel-cased. Ou seja, a propriedades padding-left deve ser
escrita como paddingLeft
Para que as propriedades ligadas a cores tenham efeito
deve-se importar o plugin jQuery UI
<l i n k r e l="stylesheet" href="http://code.jquery.com/
ui/1.11.4/ themes/smoothness/jquery -ui.css">
<s c r i p t src="http://code.jquery.com/ui/1.11.4/ jquery -
ui.js"></ s c r i p t>
Ver mais op¸cões do plugin em https://jqueryui.com/

Anima¸cões
Utilizando valores relativos
Ao realizar anima¸cões é poss´ıvel definir valores relativos aos
atuais
Para tal, basta ao definir as propriedades utilizar os
operadores += ou -=
l e f t : ’250 px ’ ,
heig ht : ’+=150px ’ ,
width : ’+=150px ’
}) ;
}) ;

Anima¸cões
Utilizando valores predefinidos
jQuery especifica três valores predefinidos para as
propriedades: show, hide e toggle
heig ht : ’ toggle ’
}) ;
}) ;

Anima¸cões
Chamadas consecutivas ao método animate
Se múltiplas chamadas ao método animate são realizadas
elas são enfileiradas
Isto significa que uma chamada será executada após o término
da anterior

Anima¸c˜oes
Exemplo
( "button" ) . c l i c k ( f u n c t i o n () {
var div = $ ( "div" ) ;
div . animate ({ heigh t : ’300 px ’ , o p a c i t y : ’0.4 ’} , "
slow" ) ;
div . animate ({ width : ’300 px ’ , o p a c i t y : ’0.8 ’} , "slow
" ) ;
div . animate ({ heig ht : ’100 px ’ , o p a c i t y : ’0.4 ’} , "
slow" ) ;
div . animate ({ width : ’100 px ’ , o p a c i t y : ’0.8 ’} , "slow
" ) ;
}) ;
. . .
<div s t y l e="background :#98bf21;height :100px;width:100px
;position:absolute;"></ div>

Introdu¸cão
Defini¸cão
jQuery possibilita a manipula¸cão de maneira simples dos
elementos de DOM
O que é mesmo DOM?

Introdu¸cão
Defini¸cão
jQuery possibilita a manipula¸cão de maneira simples dos
elementos de DOM
O que é mesmo DOM?
”The W3C Document Object Model (DOM) is a platform and
language-neutral interface that allows programs and scripts to
dynamically access and update the content, structure, and style of
a document.”

Recuperando conteúdo de elementos
Métodos text(), html() e val()
São fornecidos três métodos para recupera¸cão e modifica¸cão de
conteúdo via jQuery
text() - Ajusta ou recupera o texto do elemento selecionado
html() - Ajusta ou recupera o conteúdo do elemento
selecionado (incluindo marca¸cões HTML)
val() - Ajusta ou recupera o conteúdo de campos de
formulários
$ ( "#btn1" ) . c l i c k ( f u n c t i o n () {
a l e r t ( "Text: " + $ ( "#test" ) . t e x t () ) ;
}) ;
a l e r t ( "HTML: " + $ ( "#test" ) . html () ) ;
}) ;

Uso do val()
<s c r i p t>
a l e r t ( "Value: " + $ ( "#test" ) . v a l () ) ;
}) ;
}) ;
</ s c r i p t>
</head>
<body>
<p>Name : <input type="text" id="test" value="Mickey
Mouse"></p>
<button>Show Value</button>

Recuperando valores de atributos
Para recuperarmos valores de atributos basta utilizar o
m´etodo attr()
<s c r i p t>
a l e r t ( $ ( "#w3s" ) . a t t r ( "href" ) ) ;
}) ;
}) ;
</ s c r i p t>
</head>
<body>
<p><a href="http://www.w3schools.com" id="w3s">
W3Schools . com</a></p>

Modiﬁcando conte´udo de elementos
$ ( "#test1" ) . t e x t ( "Hello world!" ) ;
}) ;
$ ( "#test2" ) . html ( "<b>Hello world!</b>" ) ;
}) ;
$ ( "#test3" ) . v a l ( "Dolly Duck" ) ;
}) ;

Modiﬁcando atributos
<s c r i p t>
$ ( "#w3s" ) . a t t r ( "href" , "http://www.w3schools.
com/jquery" ) ;
}) ;
}) ;
</ s c r i p t>

Fun¸c˜oes de callbacks para os m´etodos text(), html() e val()
<s c r i p t>
$ ( "#test2" ) . html ( f u n c t i o n ( i , origText ) {
r e t u r n "Old html: " + origText + " New html
: Hello <b>world!</b> (index: " + i + "
)" ;
}) ;
}) ;
}) ;
</ s c r i p t>

Fun¸c˜ao de callback para m´etodo attr
<s c r i p t>
$ ( "#w3s" ) . a t t r ( "href" , f u n c t i o n ( i , o r i g V a l u e ) {
r e t u r n o r i g V a l u e + "/jquery" ;
}) ;
}) ;
}) ;
</ s c r i p t>

Adicionando novos elementos ao HTML
São fornecidos 4 métodos para inser¸cão de novos elementos na
página
append(): o novo elemento é inserido como último elemento
filho do elemento selecionado
prepend(): o novo elemento é inserido como primeiro
elemento filho do elemento selecionado
after(): insere o elemento APÓS o elemento selecionado
before(): insere o elemento ANTES do elemento selecionado

Exemplos
$ ( "p" ) . append ( "Some appended text." ) ;
$ ( "p" ) . prepend ( "Some prepended text." ) ;
var txt1 = "<p>Text.</p>" ;
var txt2 = $ ( "<p></p>" ) . t e x t ( "Text." ) ;
var txt3 = document . createElement ( "p" ) ;
txt3 . innerHTML = "Text." ;
$ ( "p" ) . append ( txt1 , txt2 , txt3 ) ;
$ ( "img" ) . a f t e r ( "Some text after" ) ;
$ ( "img" ) . b e f o r e ( "Some text before" ) ;

Um pouco mais de exemplos...
$ ( "#b1" ) . c l i c k ( f u n c t i o n () {
var $a = $ ( "<a>" , { i d : "foo" , h r e f : "http://www
.google.com" , t a r g e t : "blank" , t e x t : "
Clique" }) ;
$ ( "div" ) . append ( $a ) ;
}) ;
$ ( "#b2" ) . c l i c k ( f u n c t i o n () {
a = document . createElement ( "a" )
a . i d="foo"
a . h r e f="http://www.google.com"
a . t a r g e t="blank"
a . innerHTML = "Clique"
$ ( "div" ) . append ( a ) ;
}) ;
}) ;

Removendo elementos do HTML
Defini¸cão
São fornecidos dos métodos para remo¸cão de elementos do HTML
remove(): Remove os elementos selecionados (e seus
elementos filhos)
empty(): Remove os elementos filhos do elementos
selecionado
$ ( "#div1" ) . remove () ;
$ ( "#div1" ) . empty () ;
$ ( "p" ) . remove ( ".test" ) ;
$ ( "p" ) . remove ( ".test , .demo" ) ;

Tutorial sobre Jquery

Mais conteúdo relacionado

Mais procurados (10)

Destaque (20)

Semelhante a Tutorial sobre Jquery (20)

Último (9)

Tutorial sobre Jquery