JQUERY EM AÇÃO: GUIA COMPLETO PARA DOMINAR ESTE FRAMEWORK JAVASCRIPT

JQUERY EM AÇÃO
Thiago Miranda dos Santos
Bacharel em Sistemas de Informação
Pós Graduado em Engenharia de Sistemas

O que é Jquery?
É um Framework Javascript
Criado em 2006, e já bem robusto
Veio para simplificar a interatividade e a
criação de efeitos visuais em Websites

Quem usa Jquery

E muitos
Mais...

Características do Jquery

É Leve (Menos de 100 kb)
É Cross-Browser
É Simples e Rápido
É extensivel com Plugins
Tem uma comunidade enorme de
Desenvolvedores

Filosofia: Escreva menos, Faça mais!

Escrever menos, fazer mais
"O foco principal da biblioteca jQuery é a
simplicidade. Por que submeter os
desenvolvedores ao martírio de escrever
longos e complexos códigos para criar
simples efeitos?"

(John Resig - criador do jQuery)

Escrever menos, fazer mais
Esconder todas as Divs de uma página em Javascript

divs = document.getElementByTagName(„div‟);
for (i = 0; i < divs.length; i++) {
divs[i].style.display = „none‟;}

Esconder todas as Divs de uma página utilizando Jquery

$(“div”).hide();

Para desenvolver bem
Código Não Obstrusivo

WTF??????
?
Separar Programação, Marcação e Estilo

Programação BackEnd (PHP, ASP, JSP, Ruby,
Python...)
Marcação (Html)
Estilo (Css)
Programação Front End (Javascript)

Como não fazer
Código Obstrusivo

<p style="padding-left:10;Color:#000"
onClick=“alert(„Teste‟);“ />Clique aqui</p>

Como Fazer
No HTML
<p class=“teste” >Clique aqui</p>
No CSS
.teste{ padding-letf:10px; color:#000; }
No Javascript (Com Jquery)

$(„.teste‟).onclick(function( ){
alert(„teste‟);
});

Vamos Começar
Sites Importantes

jquery.com - Download
api.jquery.com - Documentação
forum.jquery.com - Comunidade
plugins.jquery.com - Extensão

Vamos Começar
Download

Production – Código Compactado, tamanho do arquivo menor,
são retirados os comentários, os espaçamentos e as quebras
de linha. Ideal para ser utilizado na sua produção.
Development – Código Legível, identado, tamanho do arquivo
maior. Ideal para quem vai desenvolver Plugins ou conhecer a
fundo a biblioteca.

Vamos Começar
Instalação

<html>
<head>
<title>A instalação</title>
<script type='text/javascript' src='jquery-
1.6.4.min.js'></script>
</head>
...

Construtor
Tudo começa por aqui

$( )
Função de seleção, substitui

Jquery( )

Como Funciona

1- Encontre algo no HTML
2- Faça alguma coisa com ele.

Encontre Faça alguma coisa com ele

$( “.teste”) .css(“color:”,”blue”);

Vamos Começar
Hello World

$(document).ready(function(){
alert(“Hello World”);
});

Não se esqueça do $(document).ready
Vamos utilizá-lo muito!!!!

Método Ready

$(document).ready

• Equivalente ao window.onload do Javascript
• Aguarda o carregamento da árvore do
documento para executar os scripts
• Serve de Container para os Scripts
• Diferente do onload ele não espera tudo
estar carregado e sim só a árvore do
documento.

Seletores

• Seletores Simples
• Seletores Compostos
• Seletores de Filtros
• Seletores de Conteúdo
• Seletores de Atributos
• Seletores de Formulários

Para a Prática
Método CSS

$(„seletor‟).css(„atributo‟,‟valor‟);
background color

$(„seletor‟).css(„background‟,‟red‟);
$(„seletor‟).css(„color‟,‟green‟);
$(„seletor‟).css(„color‟,‟#FF00EE‟);

Seletores Simples
•Você acessa diretamente os elementos com
o Ids, Classes e tipos especificados.
$(„#teste‟)
acessa

<div id=“teste”></div>

Seletores Simples
$(„.teste‟)
acessa

<div class=“teste”></div>

Seletores Simples
$(„div‟)
Acessa todas as divs do documento

<div></div>
<div></div>

Seletores Compostos
•É a combinação de dois ou mais seletores
simples
$(„div p‟)
Acessa o parágrafo apenas dentro da div

<div><p>Teste</p></div>
<p></p>

Seletores Compostos
$(„pai > filho‟)

$(„div > p‟)
Acessa os parágrafo que tenham um
elemento div como pai
<div>
<p>Teste</p>
<p>Teste</p>
</div>

Seletores Compostos
$(anterior + posterior)

$(„div + p‟)
Acessa o parágrafo posterior a div

<div>
<p>Teste</p>
</div>
<p>Teste</p> - Acessa apenas este

Seletores Compostos
$(anterior ~ irmãos)

$(„h2 ~ p‟)
Acessa os parágrafos irmãos posteriores a
h2
<h2>Teste</h2>
<p>Teste</p> - Acessa este
<p>Teste</p> - Acessa este
<div><p>teste</p></div> - Não Acessa este

Seletores Filtros
$(seletor:first) $(seletor:last)

$(„li:first‟)
Acessa o primeiro item de uma lista
<ul>
<li>Teste</li> - Acessa este
<li>Teste</li>
<li>Teste</li>
</ul>

Seletores Filtros
$(seletor:first) $(seletor:last)

$(„li:last‟)
Acessa o último item de uma lista
<ul>
<li>Teste</li>
<li>Teste</li>
</ul>

Seletores Filtros
$(seletor:not(seletor2))

$(„li:not(li:first)‟)
Apenas não acessa o primeiro
item de uma lista
<ul>
<li>Teste</li> - Não acessa este
</ul>

Seletores Filtros
$(seletor:eq(índice))

$(„li:eq(1)‟)
Acessa o índice 1 de uma lista, começando de 0

<ul>
<li>Teste</li>
<li>Teste</li>
</ul>

Seletores Filtros
$(seletor:even)

$(„li:even‟)
Acessa os índices pares

<ul>
<li>Teste</li>
</ul>

Seletores Filtros
$(seletor:odd)

$(„li:odd‟)
Acessa os índices ímpares

<ul>
<li>Teste</li>
<li>Teste</li>
</ul>

Seletores Filtros
$(seletor:gt(índice))

$(„li:gt(1)‟)
Acessa os índices maiores que o indicado

<ul>
<li>Teste</li>
<li>Teste</li>
</ul>

Seletores Filtros
$(seletor:lt(índice))

$(„li:lt(1)‟)
Acessa os índices menores que o indicado

<ul>
<li>Teste</li>
<li>Teste</li>
</ul>

Seletores de Conteúdo
$(seletor:contains(‘texto’))

$(„p:contains(„dentro‟)‟)
Acessa um parágrafo que contém a palavra dentro

<p>Teste dentro</p> - Acessa este
<p>Teste</p>
<p>Teste</p>

$(seletor:has(seletor2))

$(„div:has(p)‟)
Acessa uma div que contenha um parágrafo

<div><p>Teste dentro</p></div> - Acessa este
<div>Teste</div>
<div></div>

Outros
$(„div:parent‟)
Acessa uma div que contenham elementos.

$(„div:hidden‟)
Acessa uma div que esteja em modo de visibilidade oculto.
$(„div:visible‟)
Acessa uma div que esteja visível.

Seletores de Atributos
$(seletor[atributo]) ou
$(seletor[atributo=valor])
$(„div[id=teste]‟)
Acessa uma div que tenha o id igual a teste

<div><p>Teste dentro</p></div>
<div id=“teste”>Teste</div> - Acessa este
<div></div>

$(seletor[atributo!=valor])

$(„div[id!=teste]‟)
Acessa uma div que tenha o id diferente a teste

<div><p>Teste dentro</p></div> - Acessa este
<div id=“teste”>Teste</div>
<div></div> - Acessa este

$(seletor[atributo^=valor])

$(„div[id^=teste]‟)
Acessa uma div que tenha o id iniciado por teste

<div><p>Teste dentro</p></div>
<div id=“teste”>Teste</div> - Acessa este
<div id=“teste2”></div> - Acessa este

Outros
$(„div[id $= este]‟)
Acessa uma div que o valor do id termina com este.

$(„div[id *= teste]‟)
Acessa uma div que tenha teste dentro do valor do atributo
$(„div[id = teste][class = bola]‟)
Acessa uma div que satisfaz os atributos selecionados, pode
se adicionar quantos atributos forem necessários.

Seletores de Formulários
$(:seletor)

$(„:text‟)
Acessa os inputs do tipo texto em um formulário

<label><input type=“text”></label> - Acessa este
<label><input type=“password”></label>

Seletores de Formulários
$(„:text‟)
$(„:password‟)
$(„:radio‟)
$(„:checkbox‟)
$(„:enabled‟)
$(„:disabled‟)
$(„:checked‟)
$(„:select‟)

Prática
-Colorir o Background de verde da 1º e do
3º Itens de uma lista no documento com
apenas uma linha.
- Selecionar uma div que vem após a div
com id teste2 e pintá-la de azul.
- Selecionar os campos select no
formulário e pintá-los de vermelho.
- Selecionar todas as divs que contenham
o nome teste e pintá-las de preto.

Eventos
• Evento = Gatilho
• Uma ação realizada pelo usuário que
faz com que o Script seja rodado.
• Sem Eventos não teria motivo da
existência do javascript, muito menos do
Jquery.

Eventos
.click( )
Executa uma ação no momento em que o seletor é clicado

$(„#botao1‟).click(function( )
{
Ações
});

Eventos
.dblclick( )
Executa uma ação no momento em que o seletor é clicado
duas vezes seguidas (duplo clique)

$(„#botao1‟).dblclick(function( )
{
Ações
});

Eventos
.blur( )
Quando o seletor não está mais com o foco sobre ele, muito
utilizado em formulários.

$(„:text‟).blur(function( )
{
Ações
});

Eventos
.change( )
Quando o valor do seletor for alterado ele realiza uma ação.

$(„:checkbox‟).change(function( )
{
Ações
});

Eventos
.focus( )
Quando o seletor entrar em foco uma ação é executada.
Muito utilizada também em formulários

$(„:text‟).focus(function( )
{
Ações
});

Eventos
.keydown( )
Quando uma tecla é digitada no seletor uma ação é
executada.

$(„:text‟).keydown(function( )
{
Ações
});

Eventos
.keyup( ) e .keypress( )
Keyup é quando uma tecla pressionada é solta no seletor
Keyup é quando uma tecla é pressionada e solta no seletor

$(„:text‟).keyup(function( )
{
Ações
});

Eventos
.mousedown( )
Quando o ponteiro do mouse é clicado sobre o seletor

$(„h1‟).mousedown(function( )
{
Ações
});

Eventos
.mouseup( )
Quando o clique no mouse é solto sobre o seletor

$(„h1‟).mouseup(function( )
{
Ações
});

Eventos
.mouseover( )
Quando o ponteiro do mouse passa sobre o seletor

$(„h1‟).mouseover(function( )
{
Ações
});

Eventos
Muitos Outros
.load
.submit
.unload
.select
.scroll
.resize
.error

Prática
- Faça com que o botão 1 ao ser clicada
pinte todas as Divs de Azul
- Faça com que o botão 2 ao ser Clicado
Duplamente pinte apenas a 1ª Div de azul
- Faça com que o campo texto ao sair de
foco pinte os pinte a última div de verde
- Ao mudar o valor do select pinte os itens
pares da lista presente no arquivo

Métodos
Estilização

.css( )
Utiliza as regras do css para estilizar
os seletores.
Ex.: Background, Color, width,
height, border, display ...

Prática
- Teste novamente o método de estilização
utilizando os outros atributos do css, como
cor da letra, largura, altura, visibilidade.
- Faça este teste utilizando os eventos nos
botões 1, 2 e 3.

Métodos
Manipulação

.attr( )
Manipula os atributos dos elementos
selecionados
$(„:text‟).attr(„value‟,‟10‟);
Os atributos podem ser tanto acessados quanto manipulados, e vários
atributos podem ser trabalhados

Métodos
Manipulação

.html( )
Manipula conteúdo html dentro de
um seletor.
$(„.teste1‟).html(„teste<br>teste2‟);

Métodos
Manipulação

.text( )
Manipula conteúdo textual dentro de
um seletor.
$(„.teste1‟).text(„teste‟);

Métodos
Manipulação

.val( )
Manipula o atributo value de um
seletor.
$(„:text‟).val(„teste‟);

Prática
- Ao clicar em um botão recupere o texto
do parágrafo abaixo da div com id teste 2 e
adicione em forma de html na div de classe
teste 1.
- Faça com que ao ser digitado um valor
num campo texto o mesmo seja
adicionado na div com id vazia.

Twitter: @mirandathiago84
Email: mirandathiago@gmail.com
Site: www.thiagomiranda.net

JQUERY EM AÇÃO: GUIA COMPLETO PARA DOMINAR ESTE FRAMEWORK JAVASCRIPT

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (7)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie JQUERY EM AÇÃO: GUIA COMPLETO PARA DOMINAR ESTE FRAMEWORK JAVASCRIPT

Ähnlich wie JQUERY EM AÇÃO: GUIA COMPLETO PARA DOMINAR ESTE FRAMEWORK JAVASCRIPT (20)

JQUERY EM AÇÃO: GUIA COMPLETO PARA DOMINAR ESTE FRAMEWORK JAVASCRIPT