jquery - introdução v0.1
DESCRIPTION
Uma introdução ao framework javascript jquery.TRANSCRIPT
![Page 1: Jquery - Introdução v0.1](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/1.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/2.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/3.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/4.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/5.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/6.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/7.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/8.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/9.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/10.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/11.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/12.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/13.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/14.jpg)
jQuery
jQueryWrite Less, Do More
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 10 / 22
![Page 15: Jquery - Introdução v0.1](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/15.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/16.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/17.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/18.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/19.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/20.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/21.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/22.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/23.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/24.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/25.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/26.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/27.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/28.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/29.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/30.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/31.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/32.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/33.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/34.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/35.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/36.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/37.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/38.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/39.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/40.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/41.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/42.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/43.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/44.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/45.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/46.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/47.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/48.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/49.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/50.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/51.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/52.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/53.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/54.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/55.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/56.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/57.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/58.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/59.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/60.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/61.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/62.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/63.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/64.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/65.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/66.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/67.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/68.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/69.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/70.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/71.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/72.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/73.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/74.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/75.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/76.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/77.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/78.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/79.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/80.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/81.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/82.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/83.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/84.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/85.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/86.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052619/55614f86d8b42adb6b8b5118/html5/thumbnails/87.jpg)
Duvidas
Duvidas?Agradecimento especial Luan Garcia
Gustavo Dutra (http://gustavodutra.com) jQuery - Introducao November 14, 2009 22 / 22