Agilizando o desenvolvimento com j query
Upcoming SlideShare
Loading in...5
×
 

Agilizando o desenvolvimento com j query

on

  • 470 views

Palestra ministrada no Ciclo de Palestrar PHPRio

Palestra ministrada no Ciclo de Palestrar PHPRio

Statistics

Views

Total Views
470
Views on SlideShare
470
Embed Views
0

Actions

Likes
0
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Agilizando o desenvolvimento com j query Agilizando o desenvolvimento com j query Presentation Transcript

  • Agilizando o desenvolvimento com JQuery Jefferson Souza [email_address]
  • Quem sou eu?
    • Programador de PHP apaixonado por programação + música
    • Músico nas horas vagas XD
    • Desenvolvedor Web na Íparos Design Studio
    • Membro do Grupo PHPRio
  • 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.
  • Sumário
    • O que é o Jquery
    • Porque usar o JQuery
    • Instalação | Função $
    • Seletores básicos
    • Manipulação Básica de DOM
    • CSS
    • Mão na Massa
    • AJAX
    • JSON
    • Dúvidas
  • Início
    • O que é o Jquery?
    • O JQuery pode ser definido simplesmente como uma biblioteca Javascript open-source desenvolvida por John Resig em 2005.
    • 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.
  • Porque usar JQuery?
    • A lista de motivos para esta pergunta cada dia cresce mais, vou citar apenas alguns deles.
    • * A funções do Core são cross-browser;
    • * Executar funções complexas sem a necessidade de codigos complexos (“Write less, do more”);
    • * 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;
    • * Funções de AJAX super simples;
    • * Documentação clara e objetiva;
    • * Grande equipe de desenvolvimento, corrigindo possiveis bugs, e aprimorando a biblioteca constantemente
  • Instalação
    • 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.
  • função $()
    • 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.
    • Sintaxe bem simples:
    • $('#meuId')
    • $('tag')
  • Seletores básicos
    • Vamos abordar aqui os seletores básicos que iremos trabalhar e alguns filtros:
    • #id
    • elemento
    • .classe
  • Manipulação de DOM
    • 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:
  • Manipulação de DOM
    • html()
    • 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.
    • Ex.:
    • $('#caixa').html('Esta é a minha caixa!');
  • Append()
    • append()
    • Concatena o conteúdo existente com o que está sendo passado, inserindo o novo conteúdo no final do elemento.
    • Ex.:
    • $('#caixa').append('Mais uma descrição para a caixa');
  • Prepend()
    • prepend()
    • Concatena o conteúdo existente com o que está sendo passado, inserindo o novo conteúdo no início do elemento.
    • Ex.:
    • $('#caixa').prepend('Mais uma descrição para a caixa');
  • Empty()
    • empty()
    • Limpa o conteúdo do elemento especificado.
    • Ex.: $('#caixa').empty();
  • Remove()
    • remove()
    • Remove o elemento especificado do documento.
    • Ex.: $('#caixa').remove();
  • CSS
    • O JQuery trabalha bem com manipulação de css, e sua sintaxe é bem simples.
    • Declaração de um atributo:
    • $('#caixa').css('color', '#ccc');
    • Declaração de vários atributos:
    • $('#caixa').css( { 'color' : '#ccc', 'font-size' : '16px' } );
  • Dúvidas Let's Fun =)
  • Meus Contatos
    • Contatos
    • www.meadiciona.com.br/jeffsouza
  • Obrigado a Todos!