Click here to load reader
Upload
phprio
View
727
Download
1
Embed Size (px)
Citation preview
<Nome do palestrante> -<Email do palestrante>
Agilizando o desenvolvimento com JQueryJefferson Souza
<Nome do palestrante> -<Email do palestrante>
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
<Nome do palestrante> -<Email do palestrante>
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.
<Nome do palestrante> -<Email do palestrante>
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
<Nome do palestrante> -<Email do palestrante>
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.
<Nome do palestrante> -<Email do palestrante>
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
<Nome do palestrante> -<Email do palestrante>
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.
<Nome do palestrante> -<Email do palestrante>
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')
<Nome do palestrante> -<Email do palestrante>
Seletores básicos
Vamos abordar aqui os seletores básicos que iremos trabalhar e alguns filtros:
• #id
• elemento
• .classe
<Nome do palestrante> -<Email do palestrante>
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:
<Nome do palestrante> -<Email do palestrante>
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!');
<Nome do palestrante> -<Email do palestrante>
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');
<Nome do palestrante> -<Email do palestrante>
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');
<Nome do palestrante> -<Email do palestrante>
Empty()
empty()
Limpa o conteúdo do elemento especificado.
Ex.: $('#caixa').empty();
<Nome do palestrante> -<Email do palestrante>
Remove()
remove()
Remove o elemento especificado do documento.
Ex.: $('#caixa').remove();
<Nome do palestrante> -<Email do palestrante>
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'});
<Nome do palestrante> -<Email do palestrante>
Dúvidas
Let's Fun =)
<Nome do palestrante> -<Email do palestrante>
Meus Contatos
Contatos
www.meadiciona.com.br/jeffsouza
<Nome do palestrante> -<Email do palestrante>
Obrigado a Todos!