Upload
gustavo-dutra
View
2.552
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Uma introdução ao framework javascript jquery.
Citation preview
jQuery - Introducao
Gustavo Dutra
http://gustavodutra.com
November 14, 2009
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 1 / 22
Sumario
1 Objetivo
2 DOM
3 Javascript Nao-Obstrusivo
4 Informacoes
5 Areas
6 Comecando do Comeco
7 Seletores
8 Atributos
9 Percorrendo
10 Manipulacao
11 Eventos
12 Efeitos
13 Duvidas
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 2 / 22
Objetivo
Apresentar o framework jQuery com motivos para uso e as facilidades queele tras.
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 3 / 22
DOM
O que e?
DOM, Data Object Model, e uma serie de objetos e metodos especıficospara HTML.
Figure: DOM
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 4 / 22
Javascript Nao-Obstrusivo
<input 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 ) ; ” />
<input type=” t e x t ” name=” enddate ”onchange=” v a l i d a t e D a t e ( t h i s ) ; ” />
E se nao estiver com javascript habilitado?
E se o nome da funcao javascript mudar?
E se for necessario adicionar um novo parametro?
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 5 / 22
Javascript Nao-Obstrusivo
<input 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 ) ; ” />
<input type=” t e x t ” name=” enddate ”onchange=” v a l i d a t e D a t e ( t h i s ) ; ” />
E se nao estiver com javascript habilitado?
E se o nome da funcao javascript mudar?
E se for necessario adicionar um novo parametro?
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 5 / 22
Javascript Nao-Obstrusivo
<input 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 ) ; ” />
<input type=” t e x t ” name=” enddate ”onchange=” v a l i d a t e D a t e ( t h i s ) ; ” />
E se nao estiver com javascript habilitado?
E se o nome da funcao javascript mudar?
E se for necessario adicionar um novo parametro?
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 5 / 22
Javascript Nao-Obstrusivo
<input 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 ) ; ” />
<input type=” t e x t ” name=” enddate ”onchange=” v a l i d a t e D a t e ( t h i s ) ; ” />
E se nao estiver com javascript habilitado?
E se o nome da funcao javascript mudar?
E se for necessario adicionar um novo parametro?
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 5 / 22
Javascript Nao-Obstrusivo
<input type=” t e x t ” name=” i n i t d a t e ”c l a s s=” dat e ” />
<input type=” t e x t ” name=” enddate ”c l a s s=” dat e ” />
E se o HTML apenas avisar ”este campo contem uma data” ?
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 6 / 22
Javascript Nao-Obstrusivo
<input type=” t e x t ” name=” i n i t d a t e ”c l a s s=” dat e ” />
<input type=” t e x t ” name=” enddate ”c l a s s=” dat e ” />
E se o HTML apenas avisar ”este campo contem uma data” ?
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 6 / 22
Javascript Nao-Obstrusivo
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 ] . c lassName&& i n p u t s [ i ] . c lassName==’ da te ’ ){
i n p u t . onchange = f u n c t i o n ( ){v a l i d a t e D a t e ( t h i s ) ;
}}
}} ;f u n c t i o n v a l i d a t e D a t e ( e l e me nt ) { }
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 7 / 22
Javascript Nao-Obstrusivo
Qualquer input com a classe ”date” sera validado
Facil manutencao com codigos mais limpos
Separacao das camadas (apresentacao, conteudo e interacao)
Com javascript desabilitado, nao ha validacao, mas tambem nao haerros
HTML Responsavel somente pelo conteudo
CSS Responsavel pela apresentacao
Javascript Responsavel pela interacao com o usuario
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 8 / 22
Javascript Nao-Obstrusivo
Melhores praticas para resolver os tıpicos problemas cross-browserscomo progressive enhancement/graceful degradation
Nao suponha que o JavaScript estara habilitado, otimize seu codigopara nao ficar dependente dele;
Nao suponha que os browsers interpretarao corretamentedeterminados metodos e propriedades, teste individualmente em cadabrowser antes de publicar;
Nao suponha que o codigo HTML estara correto, verifique-o e naofaca nada ate que ele esteja devidamente estruturado;
Mantenha a funcionalidade independente do dispositivo do qual seusite e acessado;
Suponha que outros scripts tentarao interferir com o seu e mantenhao seu script o mais seguro possıvel.
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 9 / 22
jQuery
jQueryWrite Less, Do More
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 10 / 22
Informacoes
Jquery e um framework criado por john Resig que facilita a interacaoentre javascript e html
Tem foco na simplicidade. Por que desenvolver longos e complexoscodigos para simples efeitos?
Primeira versao, 1.0a, foi lancada em junho de 2006
Primeira versao estavel, 1.0, lancada em agosto de 2006
Ultima versao e a 1.3.2, lancada em fevereiro de 2009
Versao 1.4 programada para ate o fim de 2009
Todo framework tem 19KB minificado e com gzip
Compatıvel com IE6+, FF2.0+, Safari 3.0+, Opera 9.0+, Chrome
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 11 / 22
Areas
Core Plugins, interoperabilidade, necessario para funcionar
Selectors Seletores de elementos do DOM
Atributos Manipulacao de atributos do DOM
Traversing Percorrer os elementos DOM
Manipulation Manipulacao dos elementos DOM
CSS Manipulacao de propriedades CSS dos elementos do DOM
Events Eventos do DOM
Effects Efeitos
Ajax Requisicoes sıncronas e assıncronas
Utilities Funcoes para utilizacao geral, que facilitam odesenvolvimento
UI Integracao para User Interface (pacote de ıcones, botoes,estilos, elementos, ...)
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 12 / 22
Comecando do Comeco
window.onload vs $(document).ready()
window.onload e executando quando alguns elementos ainda naoforam criados
window.onload somente pode ser usado uma vez
$(document).ready() e executando quando toda pagina foi carregada
$(document).ready() vai agregando funcoes
Logo...
$(document).ready(function() {// codigo});ou$(function() { // codigo});
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 13 / 22
Comecando do Comeco
Tudo comeca com um seletor...
Que se torna um Array de elementos que casam com este seletor
Cada metodo e executado para todos os elementos selecionados
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 14 / 22
Comecando do Comeco
Tudo comeca com um seletor...
Que se torna um Array de elementos que casam com este seletor
Cada metodo e executado para todos os elementos selecionados
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 14 / 22
Comecando do Comeco
Tudo comeca com um seletor...
Que se torna um Array de elementos que casam com este seletor
Cada metodo e executado para todos os elementos selecionados
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 14 / 22
Seletores
$(’div’)
$(’#id’)
$(’.class’)
$(’div#wrapper > div’)
$(’ul li’)
$(’li.active ˜ li’)
$(’ul li:first,ul li:last’)
$(’ul li:not(li.active)’)
$(’li:contains(Home)’)
$(’input:checked’)
$(’input[name=search]’, $(’div#menu’) )
= igual a!= diferente deˆ= inicia com$= termina com*= contem
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 15 / 22
Seletores
$(’div’)
$(’#id’)
$(’.class’)
$(’div#wrapper > div’)
$(’ul li’)
$(’li.active ˜ li’)
$(’ul li:first,ul li:last’)
$(’ul li:not(li.active)’)
$(’li:contains(Home)’)
$(’input:checked’)
$(’input[name=search]’, $(’div#menu’) )
= igual a!= diferente deˆ= inicia com$= termina com*= contem
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 15 / 22
Seletores
$(’div’)
$(’#id’)
$(’.class’)
$(’div#wrapper > div’)
$(’ul li’)
$(’li.active ˜ li’)
$(’ul li:first,ul li:last’)
$(’ul li:not(li.active)’)
$(’li:contains(Home)’)
$(’input:checked’)
$(’input[name=search]’, $(’div#menu’) )
= igual a!= diferente deˆ= inicia com$= termina com*= contem
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 15 / 22
Seletores
$(’div’)
$(’#id’)
$(’.class’)
$(’div#wrapper > div’)
$(’ul li’)
$(’li.active ˜ li’)
$(’ul li:first,ul li:last’)
$(’ul li:not(li.active)’)
$(’li:contains(Home)’)
$(’input:checked’)
$(’input[name=search]’, $(’div#menu’) )
= igual a!= diferente deˆ= inicia com$= termina com*= contem
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 15 / 22
Seletores
$(’div’)
$(’#id’)
$(’.class’)
$(’div#wrapper > div’)
$(’ul li’)
$(’li.active ˜ li’)
$(’ul li:first,ul li:last’)
$(’ul li:not(li.active)’)
$(’li:contains(Home)’)
$(’input:checked’)
$(’input[name=search]’, $(’div#menu’) )
= igual a!= diferente deˆ= inicia com$= termina com*= contem
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 15 / 22
Seletores
$(’div’)
$(’#id’)
$(’.class’)
$(’div#wrapper > div’)
$(’ul li’)
$(’li.active ˜ li’)
$(’ul li:first,ul li:last’)
$(’ul li:not(li.active)’)
$(’li:contains(Home)’)
$(’input:checked’)
$(’input[name=search]’, $(’div#menu’) )
= igual a!= diferente deˆ= inicia com$= termina com*= contem
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 15 / 22
Seletores
$(’div’)
$(’#id’)
$(’.class’)
$(’div#wrapper > div’)
$(’ul li’)
$(’li.active ˜ li’)
$(’ul li:first,ul li:last’)
$(’ul li:not(li.active)’)
$(’li:contains(Home)’)
$(’input:checked’)
$(’input[name=search]’, $(’div#menu’) )
= igual a!= diferente deˆ= inicia com$= termina com*= contem
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 15 / 22
Seletores
$(’div’)
$(’#id’)
$(’.class’)
$(’div#wrapper > div’)
$(’ul li’)
$(’li.active ˜ li’)
$(’ul li:first,ul li:last’)
$(’ul li:not(li.active)’)
$(’li:contains(Home)’)
$(’input:checked’)
$(’input[name=search]’, $(’div#menu’) )
= igual a!= diferente deˆ= inicia com$= termina com*= contem
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 15 / 22
Seletores
$(’div’)
$(’#id’)
$(’.class’)
$(’div#wrapper > div’)
$(’ul li’)
$(’li.active ˜ li’)
$(’ul li:first,ul li:last’)
$(’ul li:not(li.active)’)
$(’li:contains(Home)’)
$(’input:checked’)
$(’input[name=search]’, $(’div#menu’) )
= igual a!= diferente deˆ= inicia com$= termina com*= contem
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 15 / 22
Seletores
$(’div’)
$(’#id’)
$(’.class’)
$(’div#wrapper > div’)
$(’ul li’)
$(’li.active ˜ li’)
$(’ul li:first,ul li:last’)
$(’ul li:not(li.active)’)
$(’li:contains(Home)’)
$(’input:checked’)
$(’input[name=search]’, $(’div#menu’) )
= igual a!= diferente deˆ= inicia com$= termina com*= contem
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 15 / 22
Seletores
$(’div’)
$(’#id’)
$(’.class’)
$(’div#wrapper > div’)
$(’ul li’)
$(’li.active ˜ li’)
$(’ul li:first,ul li:last’)
$(’ul li:not(li.active)’)
$(’li:contains(Home)’)
$(’input:checked’)
$(’input[name=search]’, $(’div#menu’) )
= igual a!= diferente deˆ= inicia com$= termina com*= contem
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 15 / 22
Seletores
$(’div’)
$(’#id’)
$(’.class’)
$(’div#wrapper > div’)
$(’ul li’)
$(’li.active ˜ li’)
$(’ul li:first,ul li:last’)
$(’ul li:not(li.active)’)
$(’li:contains(Home)’)
$(’input:checked’)
$(’input[name=search]’, $(’div#menu’) )
= igual a!= diferente deˆ= inicia com$= termina com*= contem
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 15 / 22
Seletores
$(’div’)
$(’#id’)
$(’.class’)
$(’div#wrapper > div’)
$(’ul li’)
$(’li.active ˜ li’)
$(’ul li:first,ul li:last’)
$(’ul li:not(li.active)’)
$(’li:contains(Home)’)
$(’input:checked’)
$(’input[name=search]’, $(’div#menu’) )
= igual a!= diferente deˆ= inicia com$= termina com*= contem
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 15 / 22
Atributos
$(...).addClass(’class’) Adiciona a classe class
$(...).removeClass(’class’) Remove a classe class
$(...).toggleClass(’class’) Se tiver a classe class remove, caso contrarioadiciona
$(...).attr(’id’) Retorna o valor do atributo id
$(...).attr(’id’,’novo-id’) Muda o valor do atributo id
$(...).removeAttr(’id’) Remove o atributo id do elemento
$(...).html() Retorna o .innerHTML
$(...).html(’hi’) Muda o .innerHTML para “hi”
$(...).val() Retorna o valor do atributo value
$(...).val(’hi’) Muda o valor do atributo value
$(...).text() Retorna o texto de um elemento (TextNode)
$(...).text(’hi’) Muda o texto de um elemento (TextNode)
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 16 / 22
Atributos
$(...).addClass(’class’) Adiciona a classe class
$(...).removeClass(’class’) Remove a classe class
$(...).toggleClass(’class’) Se tiver a classe class remove, caso contrarioadiciona
$(...).attr(’id’) Retorna o valor do atributo id
$(...).attr(’id’,’novo-id’) Muda o valor do atributo id
$(...).removeAttr(’id’) Remove o atributo id do elemento
$(...).html() Retorna o .innerHTML
$(...).html(’hi’) Muda o .innerHTML para “hi”
$(...).val() Retorna o valor do atributo value
$(...).val(’hi’) Muda o valor do atributo value
$(...).text() Retorna o texto de um elemento (TextNode)
$(...).text(’hi’) Muda o texto de um elemento (TextNode)
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 16 / 22
Atributos
$(...).addClass(’class’) Adiciona a classe class
$(...).removeClass(’class’) Remove a classe class
$(...).toggleClass(’class’) Se tiver a classe class remove, caso contrarioadiciona
$(...).attr(’id’) Retorna o valor do atributo id
$(...).attr(’id’,’novo-id’) Muda o valor do atributo id
$(...).removeAttr(’id’) Remove o atributo id do elemento
$(...).html() Retorna o .innerHTML
$(...).html(’hi’) Muda o .innerHTML para “hi”
$(...).val() Retorna o valor do atributo value
$(...).val(’hi’) Muda o valor do atributo value
$(...).text() Retorna o texto de um elemento (TextNode)
$(...).text(’hi’) Muda o texto de um elemento (TextNode)
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 16 / 22
Atributos
$(...).addClass(’class’) Adiciona a classe class
$(...).removeClass(’class’) Remove a classe class
$(...).toggleClass(’class’) Se tiver a classe class remove, caso contrarioadiciona
$(...).attr(’id’) Retorna o valor do atributo id
$(...).attr(’id’,’novo-id’) Muda o valor do atributo id
$(...).removeAttr(’id’) Remove o atributo id do elemento
$(...).html() Retorna o .innerHTML
$(...).html(’hi’) Muda o .innerHTML para “hi”
$(...).val() Retorna o valor do atributo value
$(...).val(’hi’) Muda o valor do atributo value
$(...).text() Retorna o texto de um elemento (TextNode)
$(...).text(’hi’) Muda o texto de um elemento (TextNode)
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 16 / 22
Atributos
$(...).addClass(’class’) Adiciona a classe class
$(...).removeClass(’class’) Remove a classe class
$(...).toggleClass(’class’) Se tiver a classe class remove, caso contrarioadiciona
$(...).attr(’id’) Retorna o valor do atributo id
$(...).attr(’id’,’novo-id’) Muda o valor do atributo id
$(...).removeAttr(’id’) Remove o atributo id do elemento
$(...).html() Retorna o .innerHTML
$(...).html(’hi’) Muda o .innerHTML para “hi”
$(...).val() Retorna o valor do atributo value
$(...).val(’hi’) Muda o valor do atributo value
$(...).text() Retorna o texto de um elemento (TextNode)
$(...).text(’hi’) Muda o texto de um elemento (TextNode)
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 16 / 22
Atributos
$(...).addClass(’class’) Adiciona a classe class
$(...).removeClass(’class’) Remove a classe class
$(...).toggleClass(’class’) Se tiver a classe class remove, caso contrarioadiciona
$(...).attr(’id’) Retorna o valor do atributo id
$(...).attr(’id’,’novo-id’) Muda o valor do atributo id
$(...).removeAttr(’id’) Remove o atributo id do elemento
$(...).html() Retorna o .innerHTML
$(...).html(’hi’) Muda o .innerHTML para “hi”
$(...).val() Retorna o valor do atributo value
$(...).val(’hi’) Muda o valor do atributo value
$(...).text() Retorna o texto de um elemento (TextNode)
$(...).text(’hi’) Muda o texto de um elemento (TextNode)
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 16 / 22
Atributos
$(...).addClass(’class’) Adiciona a classe class
$(...).removeClass(’class’) Remove a classe class
$(...).toggleClass(’class’) Se tiver a classe class remove, caso contrarioadiciona
$(...).attr(’id’) Retorna o valor do atributo id
$(...).attr(’id’,’novo-id’) Muda o valor do atributo id
$(...).removeAttr(’id’) Remove o atributo id do elemento
$(...).html() Retorna o .innerHTML
$(...).html(’hi’) Muda o .innerHTML para “hi”
$(...).val() Retorna o valor do atributo value
$(...).val(’hi’) Muda o valor do atributo value
$(...).text() Retorna o texto de um elemento (TextNode)
$(...).text(’hi’) Muda o texto de um elemento (TextNode)
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 16 / 22
Atributos
$(...).addClass(’class’) Adiciona a classe class
$(...).removeClass(’class’) Remove a classe class
$(...).toggleClass(’class’) Se tiver a classe class remove, caso contrarioadiciona
$(...).attr(’id’) Retorna o valor do atributo id
$(...).attr(’id’,’novo-id’) Muda o valor do atributo id
$(...).removeAttr(’id’) Remove o atributo id do elemento
$(...).html() Retorna o .innerHTML
$(...).html(’hi’) Muda o .innerHTML para “hi”
$(...).val() Retorna o valor do atributo value
$(...).val(’hi’) Muda o valor do atributo value
$(...).text() Retorna o texto de um elemento (TextNode)
$(...).text(’hi’) Muda o texto de um elemento (TextNode)
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 16 / 22
Atributos
$(...).addClass(’class’) Adiciona a classe class
$(...).removeClass(’class’) Remove a classe class
$(...).toggleClass(’class’) Se tiver a classe class remove, caso contrarioadiciona
$(...).attr(’id’) Retorna o valor do atributo id
$(...).attr(’id’,’novo-id’) Muda o valor do atributo id
$(...).removeAttr(’id’) Remove o atributo id do elemento
$(...).html() Retorna o .innerHTML
$(...).html(’hi’) Muda o .innerHTML para “hi”
$(...).val() Retorna o valor do atributo value
$(...).val(’hi’) Muda o valor do atributo value
$(...).text() Retorna o texto de um elemento (TextNode)
$(...).text(’hi’) Muda o texto de um elemento (TextNode)
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 16 / 22
Atributos
$(...).addClass(’class’) Adiciona a classe class
$(...).removeClass(’class’) Remove a classe class
$(...).toggleClass(’class’) Se tiver a classe class remove, caso contrarioadiciona
$(...).attr(’id’) Retorna o valor do atributo id
$(...).attr(’id’,’novo-id’) Muda o valor do atributo id
$(...).removeAttr(’id’) Remove o atributo id do elemento
$(...).html() Retorna o .innerHTML
$(...).html(’hi’) Muda o .innerHTML para “hi”
$(...).val() Retorna o valor do atributo value
$(...).val(’hi’) Muda o valor do atributo value
$(...).text() Retorna o texto de um elemento (TextNode)
$(...).text(’hi’) Muda o texto de um elemento (TextNode)
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 16 / 22
Atributos
$(...).addClass(’class’) Adiciona a classe class
$(...).removeClass(’class’) Remove a classe class
$(...).toggleClass(’class’) Se tiver a classe class remove, caso contrarioadiciona
$(...).attr(’id’) Retorna o valor do atributo id
$(...).attr(’id’,’novo-id’) Muda o valor do atributo id
$(...).removeAttr(’id’) Remove o atributo id do elemento
$(...).html() Retorna o .innerHTML
$(...).html(’hi’) Muda o .innerHTML para “hi”
$(...).val() Retorna o valor do atributo value
$(...).val(’hi’) Muda o valor do atributo value
$(...).text() Retorna o texto de um elemento (TextNode)
$(...).text(’hi’) Muda o texto de um elemento (TextNode)
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 16 / 22
Atributos
$(...).addClass(’class’) Adiciona a classe class
$(...).removeClass(’class’) Remove a classe class
$(...).toggleClass(’class’) Se tiver a classe class remove, caso contrarioadiciona
$(...).attr(’id’) Retorna o valor do atributo id
$(...).attr(’id’,’novo-id’) Muda o valor do atributo id
$(...).removeAttr(’id’) Remove o atributo id do elemento
$(...).html() Retorna o .innerHTML
$(...).html(’hi’) Muda o .innerHTML para “hi”
$(...).val() Retorna o valor do atributo value
$(...).val(’hi’) Muda o valor do atributo value
$(...).text() Retorna o texto de um elemento (TextNode)
$(...).text(’hi’) Muda o texto de um elemento (TextNode)
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 16 / 22
Percorrendo
$(...).next() Seleciona o proximo irmao do elemento selecionado
$(...).prev() Seleciona o irmao anterior ao elemento selecionado
$(...).parent() Seleciona o elemento pai
$(...).children() Seleciona o(s) elemento(s) filho(s)
$(...).add(...) Adiciona mais elementos ao array de selecao
$(...).filter(...) Mantem somente os que casarem com o seletor
$(...).not(...) Remove os que casarem com o seletor
$(...).eq(...) Vai para um offset especıfico do array de selecao
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 17 / 22
Percorrendo
$(...).next() Seleciona o proximo irmao do elemento selecionado
$(...).prev() Seleciona o irmao anterior ao elemento selecionado
$(...).parent() Seleciona o elemento pai
$(...).children() Seleciona o(s) elemento(s) filho(s)
$(...).add(...) Adiciona mais elementos ao array de selecao
$(...).filter(...) Mantem somente os que casarem com o seletor
$(...).not(...) Remove os que casarem com o seletor
$(...).eq(...) Vai para um offset especıfico do array de selecao
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 17 / 22
Percorrendo
$(...).next() Seleciona o proximo irmao do elemento selecionado
$(...).prev() Seleciona o irmao anterior ao elemento selecionado
$(...).parent() Seleciona o elemento pai
$(...).children() Seleciona o(s) elemento(s) filho(s)
$(...).add(...) Adiciona mais elementos ao array de selecao
$(...).filter(...) Mantem somente os que casarem com o seletor
$(...).not(...) Remove os que casarem com o seletor
$(...).eq(...) Vai para um offset especıfico do array de selecao
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 17 / 22
Percorrendo
$(...).next() Seleciona o proximo irmao do elemento selecionado
$(...).prev() Seleciona o irmao anterior ao elemento selecionado
$(...).parent() Seleciona o elemento pai
$(...).children() Seleciona o(s) elemento(s) filho(s)
$(...).add(...) Adiciona mais elementos ao array de selecao
$(...).filter(...) Mantem somente os que casarem com o seletor
$(...).not(...) Remove os que casarem com o seletor
$(...).eq(...) Vai para um offset especıfico do array de selecao
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 17 / 22
Percorrendo
$(...).next() Seleciona o proximo irmao do elemento selecionado
$(...).prev() Seleciona o irmao anterior ao elemento selecionado
$(...).parent() Seleciona o elemento pai
$(...).children() Seleciona o(s) elemento(s) filho(s)
$(...).add(...) Adiciona mais elementos ao array de selecao
$(...).filter(...) Mantem somente os que casarem com o seletor
$(...).not(...) Remove os que casarem com o seletor
$(...).eq(...) Vai para um offset especıfico do array de selecao
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 17 / 22
Percorrendo
$(...).next() Seleciona o proximo irmao do elemento selecionado
$(...).prev() Seleciona o irmao anterior ao elemento selecionado
$(...).parent() Seleciona o elemento pai
$(...).children() Seleciona o(s) elemento(s) filho(s)
$(...).add(...) Adiciona mais elementos ao array de selecao
$(...).filter(...) Mantem somente os que casarem com o seletor
$(...).not(...) Remove os que casarem com o seletor
$(...).eq(...) Vai para um offset especıfico do array de selecao
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 17 / 22
Percorrendo
$(...).next() Seleciona o proximo irmao do elemento selecionado
$(...).prev() Seleciona o irmao anterior ao elemento selecionado
$(...).parent() Seleciona o elemento pai
$(...).children() Seleciona o(s) elemento(s) filho(s)
$(...).add(...) Adiciona mais elementos ao array de selecao
$(...).filter(...) Mantem somente os que casarem com o seletor
$(...).not(...) Remove os que casarem com o seletor
$(...).eq(...) Vai para um offset especıfico do array de selecao
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 17 / 22
Percorrendo
$(...).next() Seleciona o proximo irmao do elemento selecionado
$(...).prev() Seleciona o irmao anterior ao elemento selecionado
$(...).parent() Seleciona o elemento pai
$(...).children() Seleciona o(s) elemento(s) filho(s)
$(...).add(...) Adiciona mais elementos ao array de selecao
$(...).filter(...) Mantem somente os que casarem com o seletor
$(...).not(...) Remove os que casarem com o seletor
$(...).eq(...) Vai para um offset especıfico do array de selecao
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 17 / 22
Percorrendo
$(...).next() Seleciona o proximo irmao do elemento selecionado
$(...).prev() Seleciona o irmao anterior ao elemento selecionado
$(...).parent() Seleciona o elemento pai
$(...).children() Seleciona o(s) elemento(s) filho(s)
$(...).add(...) Adiciona mais elementos ao array de selecao
$(...).filter(...) Mantem somente os que casarem com o seletor
$(...).not(...) Remove os que casarem com o seletor
$(...).eq(...) Vai para um offset especıfico do array de selecao
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 17 / 22
Manipulacao
$(...).append(’content’) Coloca content no final de cada elementoselecionado
$(...).prepend(’content’) Coloca content no inıcio de cada elementoselecionado
$(...).appendTo(element) Coloca o elemento selecionado no final deelement
$(...).prependTo(element) Coloca o elemento selecionado no inıcio deelement
$(...).after(’content’) Insere content depois do elemento selecionado$(...).before(’content’) Insere content antes do elemento selecionado$(...).insertAfter(element) Insere o elemento selecionado depois de
element$(...).insertBefore(element) Insere o elemento selcionado antes de element$(...).clone() Retorna uma copia do elemento selecionado$(...).wrap(’<tag><tag>’) Coloca a tag em volta do elemento
selecionado$(...).empty() Remove todos os filhos do elemento selecionado$(...).remove() Remove o elemento selecionado
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 18 / 22
Manipulacao
$(...).append(’content’) Coloca content no final de cada elementoselecionado
$(...).prepend(’content’) Coloca content no inıcio de cada elementoselecionado
$(...).appendTo(element) Coloca o elemento selecionado no final deelement
$(...).prependTo(element) Coloca o elemento selecionado no inıcio deelement
$(...).after(’content’) Insere content depois do elemento selecionado$(...).before(’content’) Insere content antes do elemento selecionado$(...).insertAfter(element) Insere o elemento selecionado depois de
element$(...).insertBefore(element) Insere o elemento selcionado antes de element$(...).clone() Retorna uma copia do elemento selecionado$(...).wrap(’<tag><tag>’) Coloca a tag em volta do elemento
selecionado$(...).empty() Remove todos os filhos do elemento selecionado$(...).remove() Remove o elemento selecionado
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 18 / 22
Manipulacao
$(...).append(’content’) Coloca content no final de cada elementoselecionado
$(...).prepend(’content’) Coloca content no inıcio de cada elementoselecionado
$(...).appendTo(element) Coloca o elemento selecionado no final deelement
$(...).prependTo(element) Coloca o elemento selecionado no inıcio deelement
$(...).after(’content’) Insere content depois do elemento selecionado$(...).before(’content’) Insere content antes do elemento selecionado$(...).insertAfter(element) Insere o elemento selecionado depois de
element$(...).insertBefore(element) Insere o elemento selcionado antes de element$(...).clone() Retorna uma copia do elemento selecionado$(...).wrap(’<tag><tag>’) Coloca a tag em volta do elemento
selecionado$(...).empty() Remove todos os filhos do elemento selecionado$(...).remove() Remove o elemento selecionado
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 18 / 22
Manipulacao
$(...).append(’content’) Coloca content no final de cada elementoselecionado
$(...).prepend(’content’) Coloca content no inıcio de cada elementoselecionado
$(...).appendTo(element) Coloca o elemento selecionado no final deelement
$(...).prependTo(element) Coloca o elemento selecionado no inıcio deelement
$(...).after(’content’) Insere content depois do elemento selecionado$(...).before(’content’) Insere content antes do elemento selecionado$(...).insertAfter(element) Insere o elemento selecionado depois de
element$(...).insertBefore(element) Insere o elemento selcionado antes de element$(...).clone() Retorna uma copia do elemento selecionado$(...).wrap(’<tag><tag>’) Coloca a tag em volta do elemento
selecionado$(...).empty() Remove todos os filhos do elemento selecionado$(...).remove() Remove o elemento selecionado
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 18 / 22
Manipulacao
$(...).append(’content’) Coloca content no final de cada elementoselecionado
$(...).prepend(’content’) Coloca content no inıcio de cada elementoselecionado
$(...).appendTo(element) Coloca o elemento selecionado no final deelement
$(...).prependTo(element) Coloca o elemento selecionado no inıcio deelement
$(...).after(’content’) Insere content depois do elemento selecionado$(...).before(’content’) Insere content antes do elemento selecionado$(...).insertAfter(element) Insere o elemento selecionado depois de
element$(...).insertBefore(element) Insere o elemento selcionado antes de element$(...).clone() Retorna uma copia do elemento selecionado$(...).wrap(’<tag><tag>’) Coloca a tag em volta do elemento
selecionado$(...).empty() Remove todos os filhos do elemento selecionado$(...).remove() Remove o elemento selecionado
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 18 / 22
Manipulacao
$(...).append(’content’) Coloca content no final de cada elementoselecionado
$(...).prepend(’content’) Coloca content no inıcio de cada elementoselecionado
$(...).appendTo(element) Coloca o elemento selecionado no final deelement
$(...).prependTo(element) Coloca o elemento selecionado no inıcio deelement
$(...).after(’content’) Insere content depois do elemento selecionado
$(...).before(’content’) Insere content antes do elemento selecionado$(...).insertAfter(element) Insere o elemento selecionado depois de
element$(...).insertBefore(element) Insere o elemento selcionado antes de element$(...).clone() Retorna uma copia do elemento selecionado$(...).wrap(’<tag><tag>’) Coloca a tag em volta do elemento
selecionado$(...).empty() Remove todos os filhos do elemento selecionado$(...).remove() Remove o elemento selecionado
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 18 / 22
Manipulacao
$(...).append(’content’) Coloca content no final de cada elementoselecionado
$(...).prepend(’content’) Coloca content no inıcio de cada elementoselecionado
$(...).appendTo(element) Coloca o elemento selecionado no final deelement
$(...).prependTo(element) Coloca o elemento selecionado no inıcio deelement
$(...).after(’content’) Insere content depois do elemento selecionado$(...).before(’content’) Insere content antes do elemento selecionado
$(...).insertAfter(element) Insere o elemento selecionado depois deelement
$(...).insertBefore(element) Insere o elemento selcionado antes de element$(...).clone() Retorna uma copia do elemento selecionado$(...).wrap(’<tag><tag>’) Coloca a tag em volta do elemento
selecionado$(...).empty() Remove todos os filhos do elemento selecionado$(...).remove() Remove o elemento selecionado
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 18 / 22
Manipulacao
$(...).append(’content’) Coloca content no final de cada elementoselecionado
$(...).prepend(’content’) Coloca content no inıcio de cada elementoselecionado
$(...).appendTo(element) Coloca o elemento selecionado no final deelement
$(...).prependTo(element) Coloca o elemento selecionado no inıcio deelement
$(...).after(’content’) Insere content depois do elemento selecionado$(...).before(’content’) Insere content antes do elemento selecionado$(...).insertAfter(element) Insere o elemento selecionado depois de
element
$(...).insertBefore(element) Insere o elemento selcionado antes de element$(...).clone() Retorna uma copia do elemento selecionado$(...).wrap(’<tag><tag>’) Coloca a tag em volta do elemento
selecionado$(...).empty() Remove todos os filhos do elemento selecionado$(...).remove() Remove o elemento selecionado
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 18 / 22
Manipulacao
$(...).append(’content’) Coloca content no final de cada elementoselecionado
$(...).prepend(’content’) Coloca content no inıcio de cada elementoselecionado
$(...).appendTo(element) Coloca o elemento selecionado no final deelement
$(...).prependTo(element) Coloca o elemento selecionado no inıcio deelement
$(...).after(’content’) Insere content depois do elemento selecionado$(...).before(’content’) Insere content antes do elemento selecionado$(...).insertAfter(element) Insere o elemento selecionado depois de
element$(...).insertBefore(element) Insere o elemento selcionado antes de element
$(...).clone() Retorna uma copia do elemento selecionado$(...).wrap(’<tag><tag>’) Coloca a tag em volta do elemento
selecionado$(...).empty() Remove todos os filhos do elemento selecionado$(...).remove() Remove o elemento selecionado
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 18 / 22
Manipulacao
$(...).append(’content’) Coloca content no final de cada elementoselecionado
$(...).prepend(’content’) Coloca content no inıcio de cada elementoselecionado
$(...).appendTo(element) Coloca o elemento selecionado no final deelement
$(...).prependTo(element) Coloca o elemento selecionado no inıcio deelement
$(...).after(’content’) Insere content depois do elemento selecionado$(...).before(’content’) Insere content antes do elemento selecionado$(...).insertAfter(element) Insere o elemento selecionado depois de
element$(...).insertBefore(element) Insere o elemento selcionado antes de element$(...).clone() Retorna uma copia do elemento selecionado
$(...).wrap(’<tag><tag>’) Coloca a tag em volta do elementoselecionado
$(...).empty() Remove todos os filhos do elemento selecionado$(...).remove() Remove o elemento selecionado
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 18 / 22
Manipulacao
$(...).append(’content’) Coloca content no final de cada elementoselecionado
$(...).prepend(’content’) Coloca content no inıcio de cada elementoselecionado
$(...).appendTo(element) Coloca o elemento selecionado no final deelement
$(...).prependTo(element) Coloca o elemento selecionado no inıcio deelement
$(...).after(’content’) Insere content depois do elemento selecionado$(...).before(’content’) Insere content antes do elemento selecionado$(...).insertAfter(element) Insere o elemento selecionado depois de
element$(...).insertBefore(element) Insere o elemento selcionado antes de element$(...).clone() Retorna uma copia do elemento selecionado$(...).wrap(’<tag><tag>’) Coloca a tag em volta do elemento
selecionado
$(...).empty() Remove todos os filhos do elemento selecionado$(...).remove() Remove o elemento selecionado
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 18 / 22
Manipulacao
$(...).append(’content’) Coloca content no final de cada elementoselecionado
$(...).prepend(’content’) Coloca content no inıcio de cada elementoselecionado
$(...).appendTo(element) Coloca o elemento selecionado no final deelement
$(...).prependTo(element) Coloca o elemento selecionado no inıcio deelement
$(...).after(’content’) Insere content depois do elemento selecionado$(...).before(’content’) Insere content antes do elemento selecionado$(...).insertAfter(element) Insere o elemento selecionado depois de
element$(...).insertBefore(element) Insere o elemento selcionado antes de element$(...).clone() Retorna uma copia do elemento selecionado$(...).wrap(’<tag><tag>’) Coloca a tag em volta do elemento
selecionado$(...).empty() Remove todos os filhos do elemento selecionado
$(...).remove() Remove o elemento selecionado
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 18 / 22
Manipulacao
$(...).append(’content’) Coloca content no final de cada elementoselecionado
$(...).prepend(’content’) Coloca content no inıcio de cada elementoselecionado
$(...).appendTo(element) Coloca o elemento selecionado no final deelement
$(...).prependTo(element) Coloca o elemento selecionado no inıcio deelement
$(...).after(’content’) Insere content depois do elemento selecionado$(...).before(’content’) Insere content antes do elemento selecionado$(...).insertAfter(element) Insere o elemento selecionado depois de
element$(...).insertBefore(element) Insere o elemento selcionado antes de element$(...).clone() Retorna uma copia do elemento selecionado$(...).wrap(’<tag><tag>’) Coloca a tag em volta do elemento
selecionado$(...).empty() Remove todos os filhos do elemento selecionado$(...).remove() Remove o elemento selecionado
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 18 / 22
Eventos
$(...).click() - $(...).click(function() { })
$(...).dblclick() - $(...).dblclick(function() { })
$(...).blur() - $(...).blur(function() { })
$(...).change() - $(...).change(function() { })
$(...).keypress() - $(...).keypress(function() { })
$(...).keyup() - $(...).keyup(function() { })
$(...).hover(function() { },function() { })
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 19 / 22
Eventos
$(...).click() - $(...).click(function() { })
$(...).dblclick() - $(...).dblclick(function() { })
$(...).blur() - $(...).blur(function() { })
$(...).change() - $(...).change(function() { })
$(...).keypress() - $(...).keypress(function() { })
$(...).keyup() - $(...).keyup(function() { })
$(...).hover(function() { },function() { })
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 19 / 22
Eventos
$(...).click() - $(...).click(function() { })
$(...).dblclick() - $(...).dblclick(function() { })
$(...).blur() - $(...).blur(function() { })
$(...).change() - $(...).change(function() { })
$(...).keypress() - $(...).keypress(function() { })
$(...).keyup() - $(...).keyup(function() { })
$(...).hover(function() { },function() { })
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 19 / 22
Eventos
$(...).click() - $(...).click(function() { })
$(...).dblclick() - $(...).dblclick(function() { })
$(...).blur() - $(...).blur(function() { })
$(...).change() - $(...).change(function() { })
$(...).keypress() - $(...).keypress(function() { })
$(...).keyup() - $(...).keyup(function() { })
$(...).hover(function() { },function() { })
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 19 / 22
Eventos
$(...).click() - $(...).click(function() { })
$(...).dblclick() - $(...).dblclick(function() { })
$(...).blur() - $(...).blur(function() { })
$(...).change() - $(...).change(function() { })
$(...).keypress() - $(...).keypress(function() { })
$(...).keyup() - $(...).keyup(function() { })
$(...).hover(function() { },function() { })
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 19 / 22
Eventos
$(...).click() - $(...).click(function() { })
$(...).dblclick() - $(...).dblclick(function() { })
$(...).blur() - $(...).blur(function() { })
$(...).change() - $(...).change(function() { })
$(...).keypress() - $(...).keypress(function() { })
$(...).keyup() - $(...).keyup(function() { })
$(...).hover(function() { },function() { })
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 19 / 22
Eventos
$(...).click() - $(...).click(function() { })
$(...).dblclick() - $(...).dblclick(function() { })
$(...).blur() - $(...).blur(function() { })
$(...).change() - $(...).change(function() { })
$(...).keypress() - $(...).keypress(function() { })
$(...).keyup() - $(...).keyup(function() { })
$(...).hover(function() { },function() { })
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 19 / 22
Eventos
$(...).click() - $(...).click(function() { })
$(...).dblclick() - $(...).dblclick(function() { })
$(...).blur() - $(...).blur(function() { })
$(...).change() - $(...).change(function() { })
$(...).keypress() - $(...).keypress(function() { })
$(...).keyup() - $(...).keyup(function() { })
$(...).hover(function() { },function() { })
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 19 / 22
Eventos
$(...).bind()
$(...).bind(’blur’, function() { })
$(...).bind(’meuEvento’, function() { })
$(...).trigger()
$(...).trigger(’blur’)
$(...).trigger(’meuEvento’)
$(...).triggerHandler()
$(...).triggerHandler(’blur’)
$(...).triggerHandler(’change’)
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 20 / 22
Eventos
$(...).bind()
$(...).bind(’blur’, function() { })
$(...).bind(’meuEvento’, function() { })
$(...).trigger()
$(...).trigger(’blur’)
$(...).trigger(’meuEvento’)
$(...).triggerHandler()
$(...).triggerHandler(’blur’)
$(...).triggerHandler(’change’)
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 20 / 22
Eventos
$(...).bind()
$(...).bind(’blur’, function() { })
$(...).bind(’meuEvento’, function() { })
$(...).trigger()
$(...).trigger(’blur’)
$(...).trigger(’meuEvento’)
$(...).triggerHandler()
$(...).triggerHandler(’blur’)
$(...).triggerHandler(’change’)
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 20 / 22
Efeitos
$(...).show()
$(...).hide()
$(...).toogle()
$(...).fadeIn()
$(...).fadeOut()
$(...).slideDown()
$(...).slideUp()
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 21 / 22
Efeitos
$(...).show()
$(...).hide()
$(...).toogle()
$(...).fadeIn()
$(...).fadeOut()
$(...).slideDown()
$(...).slideUp()
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 21 / 22
Efeitos
$(...).show()
$(...).hide()
$(...).toogle()
$(...).fadeIn()
$(...).fadeOut()
$(...).slideDown()
$(...).slideUp()
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 21 / 22
Efeitos
$(...).show()
$(...).hide()
$(...).toogle()
$(...).fadeIn()
$(...).fadeOut()
$(...).slideDown()
$(...).slideUp()
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 21 / 22
Efeitos
$(...).show()
$(...).hide()
$(...).toogle()
$(...).fadeIn()
$(...).fadeOut()
$(...).slideDown()
$(...).slideUp()
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 21 / 22
Efeitos
$(...).show()
$(...).hide()
$(...).toogle()
$(...).fadeIn()
$(...).fadeOut()
$(...).slideDown()
$(...).slideUp()
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 21 / 22
Efeitos
$(...).show()
$(...).hide()
$(...).toogle()
$(...).fadeIn()
$(...).fadeOut()
$(...).slideDown()
$(...).slideUp()
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 21 / 22
Efeitos
$(...).show()
$(...).hide()
$(...).toogle()
$(...).fadeIn()
$(...).fadeOut()
$(...).slideDown()
$(...).slideUp()
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 21 / 22
Duvidas
Duvidas?Agradecimento especial Luan Garcia
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 22 / 22