Jquery - Introdução v0.1

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

description

Uma introdução ao framework javascript jquery.

Transcript of Jquery - Introdução v0.1

Page 1: Jquery - Introdução v0.1

jQuery - Introducao

Gustavo Dutra

http://gustavodutra.com

November 14, 2009

Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 1 / 22

Page 2: Jquery - Introdução v0.1

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

Page 3: Jquery - Introdução v0.1

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

Page 4: Jquery - Introdução v0.1

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

Page 5: Jquery - Introdução v0.1

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

Page 6: Jquery - Introdução v0.1

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

Page 7: Jquery - Introdução v0.1

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

Page 8: Jquery - Introdução v0.1

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

Page 9: Jquery - Introdução v0.1

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

Page 10: Jquery - Introdução v0.1

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

Page 11: Jquery - Introdução v0.1

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

Page 12: Jquery - Introdução v0.1

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

Page 13: Jquery - Introdução v0.1

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

Page 14: Jquery - Introdução v0.1

jQuery

jQueryWrite Less, Do More

Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 10 / 22

Page 15: Jquery - Introdução v0.1

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

Page 16: Jquery - Introdução v0.1

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

Page 17: Jquery - Introdução v0.1

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

Page 18: Jquery - Introdução v0.1

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

Page 19: Jquery - Introdução v0.1

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

Page 20: Jquery - Introdução v0.1

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

Page 21: Jquery - Introdução v0.1

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

Page 22: Jquery - Introdução v0.1

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

Page 23: Jquery - Introdução v0.1

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

Page 24: Jquery - Introdução v0.1

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

Page 25: Jquery - Introdução v0.1

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

Page 26: Jquery - Introdução v0.1

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

Page 27: Jquery - Introdução v0.1

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

Page 28: Jquery - Introdução v0.1

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

Page 29: Jquery - Introdução v0.1

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

Page 30: Jquery - Introdução v0.1

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

Page 31: Jquery - Introdução v0.1

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

Page 32: Jquery - Introdução v0.1

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

Page 33: Jquery - Introdução v0.1

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

Page 34: Jquery - Introdução v0.1

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

Page 35: Jquery - Introdução v0.1

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

Page 36: Jquery - Introdução v0.1

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

Page 37: Jquery - Introdução v0.1

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

Page 38: Jquery - Introdução v0.1

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

Page 39: Jquery - Introdução v0.1

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

Page 40: Jquery - Introdução v0.1

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

Page 41: Jquery - Introdução v0.1

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

Page 42: Jquery - Introdução v0.1

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

Page 43: Jquery - Introdução v0.1

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

Page 44: Jquery - Introdução v0.1

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

Page 45: Jquery - Introdução v0.1

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

Page 46: Jquery - Introdução v0.1

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

Page 47: Jquery - Introdução v0.1

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

Page 48: Jquery - Introdução v0.1

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

Page 49: Jquery - Introdução v0.1

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

Page 50: Jquery - Introdução v0.1

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

Page 51: Jquery - Introdução v0.1

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

Page 52: Jquery - Introdução v0.1

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

Page 53: Jquery - Introdução v0.1

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

Page 54: Jquery - Introdução v0.1

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

Page 55: Jquery - Introdução v0.1

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

Page 56: Jquery - Introdução v0.1

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

Page 57: Jquery - Introdução v0.1

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

Page 58: Jquery - Introdução v0.1

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

Page 59: Jquery - Introdução v0.1

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

Page 60: Jquery - Introdução v0.1

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

Page 61: Jquery - Introdução v0.1

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

Page 62: Jquery - Introdução v0.1

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

Page 63: Jquery - Introdução v0.1

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

Page 64: Jquery - Introdução v0.1

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

Page 65: Jquery - Introdução v0.1

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

Page 66: Jquery - Introdução v0.1

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

Page 67: Jquery - Introdução v0.1

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

Page 68: Jquery - Introdução v0.1

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

Page 69: Jquery - Introdução v0.1

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

Page 70: Jquery - Introdução v0.1

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

Page 71: Jquery - Introdução v0.1

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

Page 72: Jquery - Introdução v0.1

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

Page 73: Jquery - Introdução v0.1

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

Page 74: Jquery - Introdução v0.1

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

Page 75: Jquery - Introdução v0.1

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

Page 76: Jquery - Introdução v0.1

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

Page 77: Jquery - Introdução v0.1

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

Page 78: Jquery - Introdução v0.1

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

Page 79: Jquery - Introdução v0.1

Efeitos

$(...).show()

$(...).hide()

$(...).toogle()

$(...).fadeIn()

$(...).fadeOut()

$(...).slideDown()

$(...).slideUp()

Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 21 / 22

Page 80: Jquery - Introdução v0.1

Efeitos

$(...).show()

$(...).hide()

$(...).toogle()

$(...).fadeIn()

$(...).fadeOut()

$(...).slideDown()

$(...).slideUp()

Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 21 / 22

Page 81: Jquery - Introdução v0.1

Efeitos

$(...).show()

$(...).hide()

$(...).toogle()

$(...).fadeIn()

$(...).fadeOut()

$(...).slideDown()

$(...).slideUp()

Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 21 / 22

Page 82: Jquery - Introdução v0.1

Efeitos

$(...).show()

$(...).hide()

$(...).toogle()

$(...).fadeIn()

$(...).fadeOut()

$(...).slideDown()

$(...).slideUp()

Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 21 / 22

Page 83: Jquery - Introdução v0.1

Efeitos

$(...).show()

$(...).hide()

$(...).toogle()

$(...).fadeIn()

$(...).fadeOut()

$(...).slideDown()

$(...).slideUp()

Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 21 / 22

Page 84: Jquery - Introdução v0.1

Efeitos

$(...).show()

$(...).hide()

$(...).toogle()

$(...).fadeIn()

$(...).fadeOut()

$(...).slideDown()

$(...).slideUp()

Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 21 / 22

Page 85: Jquery - Introdução v0.1

Efeitos

$(...).show()

$(...).hide()

$(...).toogle()

$(...).fadeIn()

$(...).fadeOut()

$(...).slideDown()

$(...).slideUp()

Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 21 / 22

Page 86: Jquery - Introdução v0.1

Efeitos

$(...).show()

$(...).hide()

$(...).toogle()

$(...).fadeIn()

$(...).fadeOut()

$(...).slideDown()

$(...).slideUp()

Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 21 / 22

Page 87: Jquery - Introdução v0.1

Duvidas

Duvidas?Agradecimento especial Luan Garcia

Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 22 / 22