Agilizando o desenvolvimento com j query

<Nome do palestrante> -<Email do palestrante>

Agilizando o desenvolvimento com JQueryJefferson Souza

[email protected]


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.

http://www.jquery.com/


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!

Documents

Agilizando o desenvolvimento com j query