Jquery - Introdução v0.1

jQuery - Introdu¸˜o
ca

Gustavo Dutra

http://gustavodutra.com

November 14, 2009

Gustavo Dutra (http://gustavodutra.com) jQuery - Introdu¸˜o
ca November 14, 2009 1 / 22

Sum´rio
a
1 Objetivo
2 DOM
3 Javascript N˜o-Obstrusivo
a
4 Informa¸˜es
co
5 ´
Areas
6 Come¸ando do Come¸o
c c
7 Seletores
8 Atributos
9 Percorrendo
10 Manipula¸˜o
ca
11 Eventos
12 Efeitos
13 D´vidas
u
ca November 14, 2009 2 / 22

Objetivo

Apresentar o framework jQuery com motivos para uso e as facilidades que
ele tr´s.
a

ca November 14, 2009 3 / 22

DOM

O que ´?
e
DOM, Data Object Model, ´ uma s´rie de objetos e m´todos espec´
e e e ıﬁcos
para HTML.

Figure: DOM

ca November 14, 2009 4 / 22

Javascript N˜o-Obstrusivo
a

<i n p u t type=” t e x t ” name=” i n i t d a t e ”
onchange=” v a l i d a t e D a t e ( t h i s ) ; ” />

<i n p u t type=” t e x t ” name=” e n d d a t e ”

ca November 14, 2009 5 / 22

a



E se n˜o estiver com javascript habilitado?
a

ca November 14, 2009 5 / 22

a



a
E se o nome da fun¸˜o javascript mudar?
ca

ca November 14, 2009 5 / 22

a



a
E se o nome da fun¸˜o javascript mudar?
ca
E se for necess´rio adicionar um novo parˆmetro?
a a

ca November 14, 2009 5 / 22

a

c l a s s=” d a t e ” />

c l a s s=” d a t e ” />

ca November 14, 2009 6 / 22

a

c l a s s=” d a t e ” />

c l a s s=” d a t e ” />

E se o HTML apenas avisar ”este campo cont´m uma data” ?
e

ca November 14, 2009 6 / 22

a

window . o n l o a d = f u n c t i o n ( ) {
i n p u t s = document . getElementsByTagName ( ’ i n p u t ’ ) ;
f o r ( v a r i =0, l=i n p u t s . l e n g t h ; i <l ; i ++){
i f ( i n p u t s [ i ] . className
&& i n p u t s [ i ] . c l a s s N a m e==’ d a t e ’
i n p u t . onchange = f u n c t i o n ( ) {
validateDate ( this );
}
}
}
};
f u n c t i o n validateDate ( element ) { }

ca November 14, 2009 7 / 22

a

Qualquer input com a classe ”date” ser´ validado
a
Fćil manuten¸õ com c´digos mais limpos
a ca o
Separa¸õ das camadas (apresenta¸õ, conte´do e intera¸õ)
ca ca u ca
Com javascript desabilitado, nõ h´ valida¸õ, mas tamb´m nõ h´
a a ca e a a
erros
HTML Respons´vel somente pelo conte´do
a u
CSS Respons´vel pela apresenta¸õ
a ca
Javascript Respons´vel pela intera¸õ com o usu´rio
a ca a

ca November 14, 2009 8 / 22

a

Melhores pr´ticas para resolver os t´
a ıpicos problemas cross-browsers
como progressive enhancement/graceful degradation
Nõ suponha que o JavaScript estar´ habilitado, otimize seu c´digo
a a o
para nõ ficar dependente dele;
a
Nõ suponha que os browsers interpretarõ corretamente
a a
determinados m´todos e propriedades, teste individualmente em cada
e
browser antes de publicar;
Nõ suponha que o c´digo HTML estar´ correto, verifique-o e nõ
a o a a
fa¸a nada at´ que ele esteja devidamente estruturado;
c e
Mantenha a funcionalidade independente do dispositivo do qual seu
site ´ acessado;
e
Suponha que outros scripts tentarõ interferir com o seu e mantenha
a
o seu script o mais seguro poss´
ıvel.

ca November 14, 2009 9 / 22

jQuery

jQuery
Write Less, Do More

ca November 14, 2009 10 / 22

Informa¸oes
c˜

Jquery ´ um framework criado por john Resig que facilita a intera¸õ
e ca
entre javascript e html
Tem foco na simplicidade. Por que desenvolver longos e complexos
c´digos para simples efeitos?
o
Primeira versõ, 1.0a, foi lan¸ada em junho de 2006
a c
Primeira versõ est´vel, 1.0, lan¸ada em agosto de 2006
a a c
´
Ultima versõ ´ a 1.3.2, lan¸ada em fevereiro de 2009
a e c
Versõ 1.4 programada para at´ o fim de 2009
a e
Todo framework tem 19KB minificado e com gzip
Compat´ com IE6+, FF2.0+, Safari 3.0+, Opera 9.0+, Chrome
ıvel

ca November 14, 2009 11 / 22

´
Areas

Core Plugins, interoperabilidade, necess´rio para funcionar
a
Selectors Seletores de elementos do DOM
Atributos Manipula¸õ de atributos do DOM
ca
Traversing Percorrer os elementos DOM
Manipulation Manipula¸õ dos elementos DOM
ca
CSS Manipula¸õ de propriedades CSS dos elementos do DOM
ca
Events Eventos do DOM
Effects Efeitos
Ajax Requisi¸˜es s´
co ıncronas e ass´
ıncronas
Utilities Fun¸˜es para utiliza¸õ geral, que facilitam o
co ca
desenvolvimento
UI Integra¸õ para User Interface (pacote de ´
ca ıcones, bot˜es,
o
estilos, elementos, ...)

ca November 14, 2009 12 / 22

Come¸ando do Come¸o
c c

window.onload vs $(document).ready()
window.onload ´ executando quando alguns elementos ainda n˜o
e a
foram criados
window.onload somente pode ser usado uma vez
$(document).ready() ´ executando quando toda p´gina foi carregada
e a
$(document).ready() vai agregando fun¸˜es
co

Logo...
$(document).ready(function() {
// c´digo
o
});
ou
$(function() { // c´digo
o
});

ca November 14, 2009 13 / 22

c c

Tudo come¸a com um seletor...
c

ca November 14, 2009 14 / 22

c c

c
Que se torna um Array de elementos que casam com este seletor

ca November 14, 2009 14 / 22

c c

c
Que se torna um Array de elementos que casam com este seletor
Cada m´todo ´ executado para todos os elementos selecionados
e e

ca November 14, 2009 14 / 22

Seletores

ca November 14, 2009 15 / 22

Seletores
$(’div’)

ca November 14, 2009 15 / 22

Seletores
$(’div’)
$(’#id’)

ca November 14, 2009 15 / 22

Seletores
$(’div’)
$(’#id’)
$(’.class’)

ca November 14, 2009 15 / 22

Seletores
$(’div’)
$(’#id’)
$(’.class’)
$(’div#wrapper > div’)

ca November 14, 2009 15 / 22

Seletores
$(’div’)
$(’#id’)
$(’.class’)
$(’ul li’)

ca November 14, 2009 15 / 22

Seletores
$(’div’)
$(’#id’)
$(’.class’)
$(’ul li’)
$(’li.active ˜ li’)

ca November 14, 2009 15 / 22

Seletores
$(’div’)
$(’#id’)
$(’.class’)
$(’ul li’)
$(’ul li:ﬁrst,ul li:last’)

ca November 14, 2009 15 / 22

Seletores
$(’div’)
$(’#id’)
$(’.class’)
$(’ul li’)
$(’ul li:not(li.active)’)

ca November 14, 2009 15 / 22

Seletores
$(’div’)
$(’#id’)
$(’.class’)
$(’ul li’)
$(’li:contains(Home)’)

ca November 14, 2009 15 / 22

Seletores
$(’div’)
$(’#id’)
$(’.class’)
$(’ul li’)
$(’input:checked’)

ca November 14, 2009 15 / 22

Seletores
$(’div’)
$(’#id’)
$(’.class’)
$(’ul li’)
$(’input[name=search]’, $(’div#menu’) )

ca November 14, 2009 15 / 22

Seletores
$(’div’)
$(’#id’)
$(’.class’)
$(’ul li’)
$(’input[name=search]’, $(’div#menu’) )
= igual a
!= diferente de
ˆ= inicia com
$= termina com
*= cont´m e
ca November 14, 2009 15 / 22

Atributos

$(...).addClass(’class’) Adiciona a classe class

ca November 14, 2009 16 / 22

Atributos

$(...).removeClass(’class’) Remove a classe class

ca November 14, 2009 16 / 22

Atributos

$(...).toggleClass(’class’) Se tiver a classe class remove, caso contr´rio
a
adiciona

ca November 14, 2009 16 / 22

Atributos

a
adiciona
$(...).attr(’id’) Retorna o valor do atributo id

ca November 14, 2009 16 / 22

Atributos

a
adiciona
$(...).attr(’id’,’novo-id’) Muda o valor do atributo id

ca November 14, 2009 16 / 22

Atributos

a
adiciona
$(...).removeAttr(’id’) Remove o atributo id do elemento

ca November 14, 2009 16 / 22

Atributos

a
adiciona
$(...).html() Retorna o .innerHTML

ca November 14, 2009 16 / 22

Atributos

a
adiciona
$(...).html(’hi’) Muda o .innerHTML para “hi”

ca November 14, 2009 16 / 22

Atributos

a
adiciona
$(...).val() Retorna o valor do atributo value

ca November 14, 2009 16 / 22

Atributos

a
adiciona
$(...).val(’hi’) Muda o valor do atributo value

ca November 14, 2009 16 / 22

Atributos

a
adiciona
$(...).text() Retorna o texto de um elemento (TextNode)

ca November 14, 2009 16 / 22

Atributos

a
adiciona
$(...).text() Retorna o texto de um elemento (TextNode)
$(...).text(’hi’) Muda o texto de um elemento (TextNode)

ca November 14, 2009 16 / 22

Percorrendo

ca November 14, 2009 17 / 22

Percorrendo

$(...).next() Seleciona o pr´ximo irm˜o do elemento selecionado
o a

ca November 14, 2009 17 / 22

Percorrendo

o a
$(...).prev() Seleciona o irm˜o anterior ao elemento selecionado
a

ca November 14, 2009 17 / 22

Percorrendo

o a
a
$(...).parent() Seleciona o elemento pai

ca November 14, 2009 17 / 22

Percorrendo

o a
a
$(...).children() Seleciona o(s) elemento(s) ﬁlho(s)

ca November 14, 2009 17 / 22

Percorrendo

o a
a
$(...).add(...) Adiciona mais elementos ao array de sele¸˜o
ca

ca November 14, 2009 17 / 22

Percorrendo

o a
a
ca
$(...).ﬁlter(...) Mant´m somente os que casarem com o seletor
e

ca November 14, 2009 17 / 22

Percorrendo

o a
a
ca
e
$(...).not(...) Remove os que casarem com o seletor

ca November 14, 2009 17 / 22

Percorrendo

o a
a
ca
e
$(...).not(...) Remove os que casarem com o seletor
$(...).eq(...) Vai para um offset espec´
ıfico do array de sele¸õ
ca

ca November 14, 2009 17 / 22

Manipula¸˜o
ca

ca November 14, 2009 18 / 22

Manipula¸˜o
ca
$(...).append(’content’) Coloca content no ﬁnal de cada elemento
selecionado

ca November 14, 2009 18 / 22

Manipula¸˜o
ca
selecionado
$(...).prepend(’content’) Coloca content no in´ de cada elemento
ıcio
selecionado

ca November 14, 2009 18 / 22

Manipula¸˜o
ca
selecionado
ıcio
selecionado
$(...).appendTo(element) Coloca o elemento selecionado no ﬁnal de
element

ca November 14, 2009 18 / 22

Manipula¸˜o
ca
selecionado
ıcio
selecionado
element
$(...).prependTo(element) Coloca o elemento selecionado no in´ de
ıcio
element

ca November 14, 2009 18 / 22

Manipula¸˜o
ca
selecionado
ıcio
selecionado
element
$(...).prependTo(element) Coloca o elemento selecionado no in´ deıcio
element
$(...).after(’content’) Insere content depois do elemento selecionado

ca November 14, 2009 18 / 22

Manipula¸˜o
ca
selecionado
ıcio
selecionado
element
element
$(...).before(’content’) Insere content antes do elemento selecionado

ca November 14, 2009 18 / 22

Manipula¸˜o
ca
selecionado
ıcio
selecionado
element
element
$(...).insertAfter(element) Insere o elemento selecionado depois de
element

ca November 14, 2009 18 / 22

Manipula¸˜o
ca
selecionado
ıcio
selecionado
element
element
element
$(...).insertBefore(element) Insere o elemento selcionado antes de element

ca November 14, 2009 18 / 22

Manipula¸˜o
ca
selecionado
ıcio
selecionado
element
element
element
$(...).clone() Retorna uma c´pia do elemento selecionado
o

ca November 14, 2009 18 / 22

Manipula¸˜o
ca
selecionado
ıcio
selecionado
element
element
element
o
$(...).wrap(’<tag><tag>’) Coloca a tag em volta do elemento
selecionado
ca November 14, 2009 18 / 22

Manipula¸˜o
ca
selecionado
ıcio
selecionado
element
element
element
o
$(...).wrap(’<tag><tag>’) Coloca a tag em volta do elemento
selecionado
$(...).empty() Remove todos os ﬁlhos do elemento selecionado
ca November 14, 2009 18 / 22

Eventos

ca November 14, 2009 19 / 22

Eventos

$(...).click() - $(...).click(function() { })

ca November 14, 2009 19 / 22

Eventos

$(...).dblclick() - $(...).dblclick(function() { })

ca November 14, 2009 19 / 22

Eventos

$(...).blur() - $(...).blur(function() { })

ca November 14, 2009 19 / 22

Eventos

$(...).change() - $(...).change(function() { })

ca November 14, 2009 19 / 22

Eventos

$(...).keypress() - $(...).keypress(function() { })

ca November 14, 2009 19 / 22

Eventos

$(...).keyup() - $(...).keyup(function() { })

ca November 14, 2009 19 / 22

Eventos

$(...).keyup() - $(...).keyup(function() { })
$(...).hover(function() { },function() { })

ca November 14, 2009 19 / 22

Eventos

$(...).bind()
$(...).bind(’blur’, function() { })
$(...).bind(’meuEvento’, function() { })

ca November 14, 2009 20 / 22

Eventos

$(...).bind()

$(...).trigger()
$(...).trigger(’blur’)
$(...).trigger(’meuEvento’)

ca November 14, 2009 20 / 22

Eventos

$(...).bind()

$(...).trigger()
$(...).trigger(’blur’)
$(...).trigger(’meuEvento’)

$(...).triggerHandler()
$(...).triggerHandler(’blur’)
$(...).triggerHandler(’change’)

ca November 14, 2009 20 / 22

Efeitos

ca November 14, 2009 21 / 22

Efeitos

$(...).show()

ca November 14, 2009 21 / 22

Efeitos

$(...).show()
$(...).hide()

ca November 14, 2009 21 / 22

Efeitos

$(...).show()
$(...).hide()
$(...).toogle()

ca November 14, 2009 21 / 22

Efeitos

$(...).show()
$(...).hide()
$(...).toogle()
$(...).fadeIn()

ca November 14, 2009 21 / 22

Efeitos

$(...).show()
$(...).hide()
$(...).toogle()
$(...).fadeIn()
$(...).fadeOut()

ca November 14, 2009 21 / 22

Efeitos

$(...).show()
$(...).hide()
$(...).toogle()
$(...).fadeIn()
$(...).fadeOut()
$(...).slideDown()

ca November 14, 2009 21 / 22

Efeitos

$(...).show()
$(...).hide()
$(...).toogle()
$(...).fadeIn()
$(...).fadeOut()
$(...).slideDown()
$(...).slideUp()

ca November 14, 2009 21 / 22

D´vidas
u

D´vidas?
u
Agradecimento especial Luan Garcia

ca November 14, 2009 22 / 22

Jquery - Introdução v0.1

Recomendados

Recomendados

Más contenido relacionado

Último

Último (8)

Destacado

Destacado (20)

Jquery - Introdução v0.1