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

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


Objetivo

Apresentar o framework jQuery com motivos para uso e as facilidades queele tras.


DOM

O que e?

DOM, Data Object Model, e uma serie de objetos e metodos especıficospara HTML.

Figure: DOM


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?
























<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” ?



<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” ?



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 ) { }



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



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.


jQuery

jQueryWrite Less, Do More


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


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, ...)


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});


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


Comecando do Comeco





Comecando do Comeco





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


Seletores

$(’div’)

$(’#id’)

$(’.class’)


$(’ul li’)









Seletores

$(’div’)

$(’#id’)

$(’.class’)


$(’ul li’)









Seletores

$(’div’)

$(’#id’)

$(’.class’)


$(’ul li’)









Seletores

$(’div’)

$(’#id’)

$(’.class’)


$(’ul li’)









Seletores

$(’div’)

$(’#id’)

$(’.class’)


$(’ul li’)









Seletores

$(’div’)

$(’#id’)

$(’.class’)


$(’ul li’)









Seletores

$(’div’)

$(’#id’)

$(’.class’)


$(’ul li’)









Seletores

$(’div’)

$(’#id’)

$(’.class’)


$(’ul li’)









Seletores

$(’div’)

$(’#id’)

$(’.class’)


$(’ul li’)









Seletores

$(’div’)

$(’#id’)

$(’.class’)


$(’ul li’)









Seletores

$(’div’)

$(’#id’)

$(’.class’)


$(’ul li’)









Seletores

$(’div’)

$(’#id’)

$(’.class’)


$(’ul li’)









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)


Atributos














Atributos














Atributos














Atributos














Atributos














Atributos














Atributos














Atributos














Atributos














Atributos














Atributos














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


Percorrendo










Percorrendo










Percorrendo










Percorrendo










Percorrendo










Percorrendo










Percorrendo










Percorrendo










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


Manipulacao









Manipulacao









Manipulacao









Manipulacao









Manipulacao





$(...).after(’content’) Insere content depois do elemento selecionado

$(...).before(’content’) Insere content antes do elemento selecionado$(...).insertAfter(element) Insere o elemento selecionado depois de




Manipulacao





$(...).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



Manipulacao






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



Manipulacao






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



Manipulacao






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


Manipulacao







selecionado

$(...).empty() Remove todos os filhos do elemento selecionado$(...).remove() Remove o elemento selecionado


Manipulacao







selecionado$(...).empty() Remove todos os filhos do elemento selecionado

$(...).remove() Remove o elemento selecionado


Manipulacao









Eventos

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

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

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

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

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

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

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


Eventos









Eventos









Eventos









Eventos









Eventos









Eventos









Eventos









Eventos

$(...).bind()

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

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

$(...).trigger()

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

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

$(...).triggerHandler()

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

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


Eventos

$(...).bind()



$(...).trigger()







Eventos

$(...).bind()



$(...).trigger()







Efeitos

$(...).show()

$(...).hide()

$(...).toogle()

$(...).fadeIn()

$(...).fadeOut()

$(...).slideDown()

$(...).slideUp()


Efeitos

$(...).show()

$(...).hide()

$(...).toogle()

$(...).fadeIn()

$(...).fadeOut()

$(...).slideDown()

$(...).slideUp()


Efeitos

$(...).show()

$(...).hide()

$(...).toogle()

$(...).fadeIn()

$(...).fadeOut()

$(...).slideDown()

$(...).slideUp()


Efeitos

$(...).show()

$(...).hide()

$(...).toogle()

$(...).fadeIn()

$(...).fadeOut()

$(...).slideDown()

$(...).slideUp()


Efeitos

$(...).show()

$(...).hide()

$(...).toogle()

$(...).fadeIn()

$(...).fadeOut()

$(...).slideDown()

$(...).slideUp()


Efeitos

$(...).show()

$(...).hide()

$(...).toogle()

$(...).fadeIn()

$(...).fadeOut()

$(...).slideDown()

$(...).slideUp()


Efeitos

$(...).show()

$(...).hide()

$(...).toogle()

$(...).fadeIn()

$(...).fadeOut()

$(...).slideDown()

$(...).slideUp()


Efeitos

$(...).show()

$(...).hide()

$(...).toogle()

$(...).fadeIn()

$(...).fadeOut()

$(...).slideDown()

$(...).slideUp()


Duvidas

Duvidas?Agradecimento especial Luan Garcia


Technology

Jquery - Introdução v0.1