EM DIVERSOS PROJETOS DE SOFTWARE COM DIVERSAS LINGUAGENS DE PROGRAMAÇÃO E MESMO ASSIM NUNCA CONSEGUIU ABANDONAR O JAVASCRIPT; • BASICAMENTE UM FANÁTICO POR STARTUPS QUE SE DIVERTE PROGRAMANDO. @_joaofelix
MAIS DE 55% DOS 10.000 SITES MAIS VISITADOS DO MUNDO! • INCLUINDO: @_joaofelix - GOOGLE - AMAZON - WIKIPEDIA - WORDPRESS - STACKOVERFLOW - ISNTAGRAM - PINTEREST - MICROSOFT
[USE SUA HIPÉRBOLE FAVORITA]; • MANIPULA DOM LIKE A BOSS; • É MAGRINHO (CERTA DE 93KB); • AGRADA A TODO MUNDO (ATÉ O IE6); • MUITA GENTE JÁ TESTOU ELE PRA VOCÊ!! @_joaofelix
• DÁ PARA ARMAZENAR INFORMAÇÕES EM DOM; • DÁ PARA FAZER ANIMAÇÕES; • DÁ PRA FAZER AJAX EM POUCAS LINHAS; • DÁ PARA COMPONENTIZAR, ATRAVÉS DE PLUGINS; • A COMUNIDADE JQUERY É ENORME! @_joaofelix
EM 2013: – VERSÃO 1.10.2: SUPORTE A TODOS OS BROWSER; – VERSÃO 2.0.3: APENAS BROWSERS MODERNOS (BYE BYE IE 6,7,8); • CONSTANTE EVOLUÇÃO (ATENÇÃO, HOMENS TRABALHANDO); @_joaofelix
$(function(){ // Seu código vem aqui }); </script> Utilizando jquery, você garantirá que seu código só será executado quando todo o DOM estiver carregado; @_joaofelix
$(this).removeClass(‘focado’); }); Procuramos os elementos de classe conteúdo dentro do elemento ul, removemos a classe “extra”, adicionamos a classe “novo”, incluímos o conteúdo “ – 02/09/2013” em cada um destes elementos, encapsulamos o conteúdo de todos eles em elementos div de classe “capa” e também adicionamos eventos para quando o mouse estivesse sobre os elementos ou fora deles; @_joaofelix
$(this).removeClass(‘focado’); }); Procuramos os elementos de classe conteúdo dentro do elemento ul, removemos a classe “extra”, adicionamos a classe “novo”, incluímos o conteúdo “ – 02/09/2013” em cada um destes elementos, encapsulamos o conteúdo de todos eles em elementos div de classe “capa” e também adicionamos eventos para quando o mouse estivesse sobre os elementos ou fora deles; @_joaofelix
$(this).removeClass(‘focado’); }); Procuramos os elementos de classe conteúdo dentro do elemento ul, removemos a classe “extra”, adicionamos a classe “novo”, incluímos o conteúdo “ – 02/09/2013” em cada um destes elementos, encapsulamos o conteúdo de todos eles em elementos div de classe “capa” e também adicionamos eventos para quando o mouse estivesse sobre os elementos ou fora deles; @_joaofelix
$(this).removeClass(‘focado’); }); Procuramos os elementos de classe conteúdo dentro do elemento ul, removemos a classe “extra”, adicionamos a classe “novo”, incluímos o conteúdo “ – 02/09/2013” em cada um destes elementos, encapsulamos o conteúdo de todos eles em elementos div de classe “capa” e também adicionamos eventos para quando o mouse estivesse sobre os elementos ou fora deles; @_joaofelix
$(this).removeClass(‘focado’); }); Procuramos os elementos de classe conteúdo dentro do elemento ul, removemos a classe “extra”, adicionamos a classe “novo”, incluímos o conteúdo “ – 02/09/2013” em cada um destes elementos, encapsulamos o conteúdo de todos eles em elementos div de classe “capa” e também adicionamos eventos para quando o mouse estivesse sobre os elementos ou fora deles; @_joaofelix
$(this).removeClass(‘focado’); }); Procuramos os elementos de classe conteúdo dentro do elemento ul, removemos a classe “extra”, adicionamos a classe “novo”, incluímos o conteúdo “ – 02/09/2013” em cada um destes elementos, encapsulamos o conteúdo de todos eles em elementos div de classe “capa” e também adicionamos eventos para quando o mouse estivesse sobre os elementos ou fora deles; @_joaofelix
$(this).removeClass(‘focado’); }); Procuramos os elementos de classe conteúdo dentro do elemento ul, removemos a classe “extra”, adicionamos a classe “novo”, incluímos o conteúdo “ – 02/09/2013” em cada um destes elementos, encapsulamos o conteúdo de todos eles em elementos div de classe “capa” e também adicionamos eventos para quando o mouse estivesse sobre os elementos ou fora deles; @_joaofelix
$(this).removeClass(‘focado’); }); Procuramos os elementos de classe conteúdo dentro do elemento ul, removemos a classe “extra”, adicionamos a classe “novo”, incluímos o conteúdo “ – 02/09/2013” em cada um destes elementos, encapsulamos o conteúdo de todos eles em elementos div de classe “capa” e também adicionamos eventos para quando o mouse estivesse sobre os elementos ou fora deles; @_joaofelix
$(this).removeClass(‘focado’); }); Procuramos os elementos de classe conteúdo dentro do elemento ul, removemos a classe “extra”, adicionamos a classe “novo”, incluímos o conteúdo “ – 02/09/2013” em cada um destes elementos, encapsulamos o conteúdo de todos eles em elementos div de classe “capa” e também adicionamos eventos para quando o mouse estivesse sobre os elementos ou fora deles; @_joaofelix
É possível animar cores e outros estilos através de plugins; Definindo a animação; Definindo a duração; Definindo uma ação após a conclusão; @_joaofelix
É possível animar cores e outros estilos através de plugins; Definindo a animação; Definindo a duração; Definindo uma ação após a conclusão; @_joaofelix
É possível animar cores e outros estilos através de plugins; Definindo a animação; Definindo a duração; Definindo uma ação após a conclusão; @_joaofelix
É possível animar cores e outros estilos através de plugins; Definindo a animação; Definindo a duração; Definindo uma ação após a conclusão; @_joaofelix
data ) { $(data).each(function(i, el){ $(‘<li/>’).text(el); }); }).fail(function( ) { alert(‘Ops…’); }); Iniciando uma requisição ajax; Informando parâmetros: tipo de requisição; url da requisição; tipo de conteúdo retornado; Não reutilizar respostas; Função de retorno para o caso de sucesso; Função de retorno para o caso de erro; @_joaofelix
data ) { $(data).each(function(i, el){ $(‘<li/>’).text(el); }); }).fail(function( ) { alert(‘Ops…’); }); Iniciando uma requisição ajax; Informando parâmetros: tipo de requisição; url da requisição; tipo de conteúdo retornado; Não reutilizar respostas; Função de retorno para o caso de sucesso; Função de retorno para o caso de erro; @_joaofelix
data ) { $(data).each(function(i, el){ $(‘<li/>’).text(el); }); }).fail(function( ) { alert(‘Ops…’); }); Iniciando uma requisição ajax; Informando parâmetros: tipo de requisição; url da requisição; tipo de conteúdo retornado; Não reutilizar respostas; Função de retorno para o caso de sucesso; Função de retorno para o caso de erro; @_joaofelix
data ) { $(data).each(function(i, el){ $(‘<li/>’).text(el); }); }).fail(function( ) { alert(‘Ops…’); }); Iniciando uma requisição ajax; Informando parâmetros: tipo de requisição; url da requisição; tipo de conteúdo retornado; Não reutilizar respostas; Função de retorno para o caso de sucesso; Função de retorno para o caso de erro; @_joaofelix
data ) { $(data).each(function(i, el){ $(‘<li/>’).text(el); }); }).fail(function( ) { alert(‘Ops…’); }); Iniciando uma requisição ajax; Informando parâmetros: tipo de requisição; url da requisição; tipo de conteúdo retornado; Não reutilizar respostas; Função de retorno para o caso de sucesso; Função de retorno para o caso de erro; @_joaofelix
data ) { $(data).each(function(i, el){ $(‘<li/>’).text(el); }); }).fail(function( ) { alert(‘Ops…’); }); Iniciando uma requisição ajax; Informando parâmetros: tipo de requisição; url da requisição; tipo de conteúdo retornado; Não reutilizar respostas; Função de retorno para o caso de sucesso; Função de retorno para o caso de erro; @_joaofelix
data ) { $(data).each(function(i, el){ $(‘<li/>’).text(el); }); }).fail(function( ) { alert(‘Ops…’); }); Iniciando uma requisição ajax; Informando parâmetros: tipo de requisição; url da requisição; tipo de conteúdo retornado; Não reutilizar respostas; Função de retorno para o caso de sucesso; Função de retorno para o caso de erro; @_joaofelix
data ) { $(data).each(function(i, el){ $(‘<li/>’).text(el); }); }).fail(function( ) { alert(‘Ops…’); }); Iniciando uma requisição ajax; Informando parâmetros: tipo de requisição; url da requisição; tipo de conteúdo retornado; Não reutilizar respostas; Função de retorno para o caso de sucesso; Função de retorno para o caso de erro; @_joaofelix
data ) { $(data).each(function(i, el){ $(‘<li/>’).text(el); }); }).fail(function( ) { alert(‘Ops…’); }); Iniciando uma requisição ajax; Informando parâmetros: tipo de requisição; url da requisição; tipo de conteúdo retornado; Não reutilizar respostas; Função de retorno para o caso de sucesso; Função de retorno para o caso de erro; @_joaofelix
suguruooki
yimajo
hynek
occhi
nearme_tech
javiergs
yug1224
har1101
tetutetu214
nrslib
ryunakayama
meteatamel
madoxten
cassininazir
mkilby
tammyeverts
aarron
stuffmc
codingconduct
tomoyanonymous
seathinner
bethany
akosma
greggifford
![[email protected] @_JOAOFELIX @_joaofelix](https://files.speakerdeck.com/presentations/b0e9b3a0f6720130b8c95afcc58fa37f/slide_71.jpg){kind=link}