MiniCurso Jquery - IV SimSis

JQUERY EM AÇÃO

Thiago Miranda dos SantosBacharel em Sistemas de Informação

Pós Graduado em Engenharia de Sistemas

O que é Jquery?

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

divs = document.getElementByTagName(„div‟);

for (i = 0; i < divs.length; i++) {

divs[i].style.display = „none‟;}

Esconder todas as Divs de uma página em Javascript

Esconder todas as Divs de uma página utilizando Jquery

$(“div”).hide();

Para desenvolver bem

WTF??????

?

Código Não Obstrusivo

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

<p style="padding-left:10;Color:#000"

onClick=“alert(„Teste‟);“ />Clique aqui</p>

Código Obstrusivo

Como Fazer

<p class=“teste” >Clique aqui</p>

No HTML

No CSS

.teste{ padding-letf:10px; color:#000; }

No Javascript (Com Jquery)

$(„.teste‟).onclick(function( ){

alert(„teste‟);

});

Vamos ComeçarSites Importantes

jquery.com - Download

api.jquery.com - Documentação

forum.jquery.com - Comunidade

plugins.jquery.com - Extensão

Vamos ComeçarDownload

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çarInstalação

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

ConstrutorTudo 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.

$( “.teste”)Encontre

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

Faça alguma coisa com ele

Vamos ComeçarHello 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.

Á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

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

Método CSS

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‟)

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

acessa

Seletores Simples



$(„.teste‟)

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

acessa

Seletores Simples



$(„div‟)

<div></div>

<div></div>

Acessa todas as divs do documento

Seletores Compostos

•É a combinação de dois ou mais seletores

simples

$(„div p‟)

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

<p></p>

Acessa o parágrafo apenas dentro da div

Seletores Compostos

$(„div > p‟)

Acessa os parágrafo que tenham um

elemento div como pai

$(„pai > filho‟)

<div>

<p>Teste</p>

<p>Teste</p>

</div>

Seletores Compostos

$(„div + p‟)

Acessa o parágrafo posterior a div

$(anterior + posterior)

<div>

<p>Teste</p>

</div>

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

Seletores Compostos

$(„h2 ~ p‟)

Acessa os parágrafos irmãos posteriores a

h2

$(anterior ~ irmãos)

<h2>Teste</h2>

<p>Teste</p> - Acessa este

<p>Teste</p> - Acessa este

<div><p>teste</p></div> - Não Acessa este

Seletores Filtros

$(„li:first‟)

Acessa o primeiro item de uma lista

$(seletor:first) $(seletor:last)

<ul>

<li>Teste</li> - Acessa este

<li>Teste</li>

<li>Teste</li>

</ul>

Seletores Filtros

$(„li:last‟)

Acessa o último item de uma lista

$(seletor:first) $(seletor:last)

<ul>

<li>Teste</li>

<li>Teste</li>


</ul>

Seletores Filtros

$(„li:not(li:first)‟)

Apenas não acessa o primeiro

item de uma lista

$(seletor:not(seletor2))

<ul>

<li>Teste</li> - Não acessa este



</ul>

Seletores Filtros

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

$(seletor:eq(índice))

<ul>

<li>Teste</li>


<li>Teste</li>

</ul>

Seletores Filtros

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

$(seletor:even)

<ul>


<li>Teste</li>


</ul>

Seletores Filtros

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

$(seletor:odd)

<ul>

<li>Teste</li>


<li>Teste</li>

</ul>

Seletores Filtros

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

$(seletor:gt(índice))

<ul>

<li>Teste</li>

<li>Teste</li>


</ul>

Seletores Filtros

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

$(seletor:lt(índice))

<ul>


<li>Teste</li>

<li>Teste</li>

</ul>

Seletores de Conteúdo

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

$(seletor:contains(‘texto’))

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

<p>Teste</p>

<p>Teste</p>


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

$(seletor:has(seletor2))

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

<div>Teste</div>

<div></div>


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

Outros

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

$(„div:visible‟)Acessa uma div que esteja visível.

Seletores de Atributos

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

$(seletor[atributo]) ou

$(seletor[atributo=valor])

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

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

<div></div>


$(„div[id!=teste]‟)

$(seletor[atributo!=valor])

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

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

<div></div> - Acessa este

Acessa uma div que tenha o id diferente a teste


$(„div[id^=teste]‟)

$(seletor[atributo^=valor])

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

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

<div id=“teste2”></div> - Acessa este

Acessa uma div que tenha o id iniciado por teste


$(„div[id *= teste]‟)Acessa uma div que tenha teste dentro do valor do atributo

Outros

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

$(„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

$(„:text‟)

$(:seletor)

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

<label><input type=“password”></label>

Acessa os inputs do tipo texto em um formulário

Seletores de Formulários

$(„:text‟)

$(„:password‟)

$(„:radio‟)

$(„:checkbox‟)$(„:enabled‟)

$(„:disabled‟)

$(„:checked‟)

$(„:select‟)

Prática

5 Minutos

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

10 Minutos

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

Eventos

Muitos Outros

.load

.submit

.unload

.select

.scroll

.resize

.error

Métodos

Estilização

.css( )Utiliza as regras do css para estilizar

os seletores.

Ex.: Background, Color, width,

height, border, display ...

Prática

5 Minutos

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

10 Minutos

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: [email protected]

Site: www.thiagomiranda.net

MiniCurso Jquery - IV SimSis

Documents

Transcript of MiniCurso Jquery - IV SimSis