Agilizando o desenvolvimento com JQuery Jefferson Souza [email_address]
Quem sou eu? <ul><li>Programador de PHP apaixonado por programação + música </li></ul><ul><li>Músico nas horas vagas XD </...
Introdução Vamos conhecer este poderoso framework para Java Script que vem tomando conta do mercado e facilitando a nossa ...
Sumário <ul><li>O que é o Jquery </li></ul><ul><li>Porque usar o JQuery </li></ul><ul><li>Instalação | Função $ </li></ul>...
Início <ul><li>O que é o Jquery? </li></ul><ul><li>O JQuery pode ser definido simplesmente como uma biblioteca Javascript ...
Porque usar JQuery? <ul><li>A lista de motivos para esta pergunta cada dia cresce mais, vou citar apenas alguns deles. </l...
Instalação <ul><li>A biblioteca encontra-se disponível no site oficial do projeto( http://www.jquery.com ), e é bem simple...
função $() <ul><li>Esta é a função padrão para capturar nossos elementos(como o famoso document.getElementById), sendo que...
Seletores básicos <ul><li>Vamos abordar aqui os seletores básicos que iremos trabalhar e alguns filtros: </li></ul><ul><li...
Manipulação de DOM <ul><li>Para inserir conteúdo em nossas páginas, precisamos junto com nossos seletores usar as funções ...
Manipulação de DOM <ul><li>html() </li></ul><ul><li>Insere um conteúdo dentro do elemento, semelhante ao innerHTML no JS, ...
Append() <ul><li>append() </li></ul><ul><li>Concatena o conteúdo existente com o que está sendo passado, inserindo o novo ...
Prepend() <ul><li>prepend() </li></ul><ul><li>Concatena o conteúdo existente com o que está sendo passado, inserindo o nov...
Empty() <ul><li>empty() </li></ul><ul><li>Limpa o conteúdo do elemento especificado. </li></ul><ul><li>Ex.: $('#caixa').em...
Remove() <ul><li>remove() </li></ul><ul><li>Remove o elemento especificado do documento. </li></ul><ul><li>Ex.: $('#caixa'...
CSS <ul><li>O JQuery trabalha bem com manipulação de css, e sua sintaxe é bem simples. </li></ul><ul><li>Declaração de um ...
Dúvidas Let's Fun =)
Meus Contatos <ul><li>Contatos </li></ul><ul><li>www.meadiciona.com.br/jeffsouza </li></ul>
Obrigado a Todos!
Próximos SlideShares
Carregando em…5
×

Agilizando o desenvolvimento com jquery

845 visualizações

Publicada em

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
845
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
6
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Agilizando o desenvolvimento com jquery

  1. 1. Agilizando o desenvolvimento com JQuery Jefferson Souza [email_address]
  2. 2. Quem sou eu? <ul><li>Programador de PHP apaixonado por programação + música </li></ul><ul><li>Músico nas horas vagas XD </li></ul><ul><li>Desenvolvedor Web na Íparos Design Studio </li></ul><ul><li>Membro do Grupo PHPRio </li></ul>
  3. 3. Introdução Vamos conhecer este poderoso framework para Java Script que vem tomando conta do mercado e facilitando a nossa vida na hora do desenvolvimento com Java Script.
  4. 4. Sumário <ul><li>O que é o Jquery </li></ul><ul><li>Porque usar o JQuery </li></ul><ul><li>Instalação | Função $ </li></ul><ul><li>Seletores básicos </li></ul><ul><li>Manipulação Básica de DOM </li></ul><ul><li>CSS </li></ul><ul><li>Mão na Massa </li></ul><ul><li>AJAX </li></ul><ul><li>JSON </li></ul><ul><li>Dúvidas </li></ul>
  5. 5. Início <ul><li>O que é o Jquery? </li></ul><ul><li>O JQuery pode ser definido simplesmente como uma biblioteca Javascript open-source desenvolvida por John Resig em 2005. </li></ul><ul><li>A biblioteca JQuery foi desenvolvida por John Resig, em 2005, lançada oficialmente em 2006, e hoje conta com uma enorme equipe de desenvolvimento espalhada no mundo todo. </li></ul>
  6. 6. Porque usar JQuery? <ul><li>A lista de motivos para esta pergunta cada dia cresce mais, vou citar apenas alguns deles. </li></ul><ul><li>* A funções do Core são cross-browser; </li></ul><ul><li>* Executar funções complexas sem a necessidade de codigos complexos (“Write less, do more”); </li></ul><ul><li>* Infinidade de plugins para qualquer necessidade do site, tais como: galeria de fotos, validações de formulários, data tables, animação, menus, manipulação de CSS entre outras; </li></ul><ul><li>* Funções de AJAX super simples; </li></ul><ul><li>* Documentação clara e objetiva; </li></ul><ul><li>* Grande equipe de desenvolvimento, corrigindo possiveis bugs, e aprimorando a biblioteca constantemente </li></ul>
  7. 7. Instalação <ul><li>A biblioteca encontra-se disponível no site oficial do projeto( http://www.jquery.com ), e é bem simples a sua “instalação”, basta efetuar o download da biblioteca, e incluir na página que será utilizada. </li></ul>
  8. 8. função $() <ul><li>Esta é a função padrão para capturar nossos elementos(como o famoso document.getElementById), sendo que ela é extensiva a ids, classes, tags e pseudo-elementos. </li></ul><ul><li>Sintaxe bem simples: </li></ul><ul><li>$('#meuId') </li></ul><ul><li>$('tag') </li></ul>
  9. 9. Seletores básicos <ul><li>Vamos abordar aqui os seletores básicos que iremos trabalhar e alguns filtros: </li></ul><ul><li>#id </li></ul><ul><li>elemento </li></ul><ul><li>.classe </li></ul>
  10. 10. Manipulação de DOM <ul><li>Para inserir conteúdo em nossas páginas, precisamos junto com nossos seletores usar as funções de manipulação de DOM, vamos conhecer algumas: </li></ul>
  11. 11. Manipulação de DOM <ul><li>html() </li></ul><ul><li>Insere um conteúdo dentro do elemento, semelhante ao innerHTML no JS, sendo que se não for passado nenhum parâmetro, ela pega o conteúdo, ao invés de inserir. </li></ul><ul><li>Ex.: </li></ul><ul><li>$('#caixa').html('Esta é a minha caixa!'); </li></ul>
  12. 12. Append() <ul><li>append() </li></ul><ul><li>Concatena o conteúdo existente com o que está sendo passado, inserindo o novo conteúdo no final do elemento. </li></ul><ul><li>Ex.: </li></ul><ul><li>$('#caixa').append('Mais uma descrição para a caixa'); </li></ul>
  13. 13. Prepend() <ul><li>prepend() </li></ul><ul><li>Concatena o conteúdo existente com o que está sendo passado, inserindo o novo conteúdo no início do elemento. </li></ul><ul><li>Ex.: </li></ul><ul><li>$('#caixa').prepend('Mais uma descrição para a caixa'); </li></ul>
  14. 14. Empty() <ul><li>empty() </li></ul><ul><li>Limpa o conteúdo do elemento especificado. </li></ul><ul><li>Ex.: $('#caixa').empty(); </li></ul>
  15. 15. Remove() <ul><li>remove() </li></ul><ul><li>Remove o elemento especificado do documento. </li></ul><ul><li>Ex.: $('#caixa').remove(); </li></ul>
  16. 16. CSS <ul><li>O JQuery trabalha bem com manipulação de css, e sua sintaxe é bem simples. </li></ul><ul><li>Declaração de um atributo: </li></ul><ul><li>$('#caixa').css('color', '#ccc'); </li></ul><ul><li>Declaração de vários atributos: </li></ul><ul><li>$('#caixa').css( { 'color' : '#ccc', 'font-size' : '16px' } ); </li></ul>
  17. 17. Dúvidas Let's Fun =)
  18. 18. Meus Contatos <ul><li>Contatos </li></ul><ul><li>www.meadiciona.com.br/jeffsouza </li></ul>
  19. 19. Obrigado a Todos!

×