MiniCurso Jquery - IV SimSis
-
Upload
thiago-miranda -
Category
Documents
-
view
1.291 -
download
0
description
Transcript of MiniCurso Jquery - IV SimSis
![Page 1: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/1.jpg)
JQUERY EM AÇÃO
Thiago Miranda dos SantosBacharel em Sistemas de Informação
Pós Graduado em Engenharia de Sistemas
![Page 2: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/2.jpg)
O que é Jquery?
![Page 3: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/3.jpg)
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
![Page 4: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/4.jpg)
Quem usa Jquery
E muitos
Mais...
![Page 5: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/5.jpg)
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!
![Page 6: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/6.jpg)
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)
![Page 7: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/7.jpg)
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();
![Page 8: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/8.jpg)
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)
![Page 9: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/9.jpg)
Como não fazer
<p style="padding-left:10;Color:#000"
onClick=“alert(„Teste‟);“ />Clique aqui</p>
Código Obstrusivo
![Page 10: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/10.jpg)
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‟);
});
![Page 11: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/11.jpg)
Vamos ComeçarSites Importantes
jquery.com - Download
api.jquery.com - Documentação
forum.jquery.com - Comunidade
plugins.jquery.com - Extensão
![Page 12: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/12.jpg)
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.
![Page 13: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/13.jpg)
Vamos ComeçarInstalação
<html><head> <title>A instalação</title> <script type='text/javascript' src='jquery-1.6.4.min.js'></script></head> ...
![Page 14: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/14.jpg)
ConstrutorTudo começa por aqui
$( )
Função de seleção, substitui
Jquery( )
![Page 15: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/15.jpg)
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
![Page 16: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/16.jpg)
Vamos ComeçarHello World
$(document).ready(function(){
alert(“Hello World”);
});
Não se esqueça do $(document).ready
Vamos utilizá-lo muito!!!!
![Page 17: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/17.jpg)
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.
![Page 18: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/18.jpg)
Árvore do Documento
![Page 19: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/19.jpg)
Seletores
• Seletores Simples
• Seletores Compostos
• Seletores de Filtros
• Seletores de Conteúdo
• Seletores de Atributos
• Seletores de Formulários
![Page 20: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/20.jpg)
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‟);
![Page 21: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/21.jpg)
Seletores Simples
•Você acessa diretamente os elementos com
o Ids, Classes e tipos especificados.
$(„#teste‟)
<div id=“teste”></div>
acessa
![Page 22: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/22.jpg)
Seletores Simples
•Você acessa diretamente os elementos com
o Ids, Classes e tipos especificados.
$(„.teste‟)
<div class=“teste”></div>
acessa
![Page 23: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/23.jpg)
Seletores Simples
•Você acessa diretamente os elementos com
o Ids, Classes e tipos especificados.
$(„div‟)
<div></div>
<div></div>
Acessa todas as divs do documento
![Page 24: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/24.jpg)
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
![Page 25: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/25.jpg)
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>
![Page 26: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/26.jpg)
Seletores Compostos
$(„div + p‟)
Acessa o parágrafo posterior a div
$(anterior + posterior)
<div>
<p>Teste</p>
</div>
<p>Teste</p> - Acessa apenas este
![Page 27: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/27.jpg)
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
![Page 28: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/28.jpg)
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>
![Page 29: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/29.jpg)
Seletores Filtros
$(„li:last‟)
Acessa o último item de uma lista
$(seletor:first) $(seletor:last)
<ul>
<li>Teste</li>
<li>Teste</li>
<li>Teste</li> - Acessa este
</ul>
![Page 30: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/30.jpg)
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
<li>Teste</li> - Acessa este
<li>Teste</li> - Acessa este
</ul>
![Page 31: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/31.jpg)
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> - Acessa este
<li>Teste</li>
</ul>
![Page 32: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/32.jpg)
Seletores Filtros
$(„li:even‟)Acessa os índices pares
$(seletor:even)
<ul>
<li>Teste</li> - Acessa este
<li>Teste</li>
<li>Teste</li> - Acessa este
</ul>
![Page 33: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/33.jpg)
Seletores Filtros
$(„li:odd‟)Acessa os índices ímpares
$(seletor:odd)
<ul>
<li>Teste</li>
<li>Teste</li> - Acessa este
<li>Teste</li>
</ul>
![Page 34: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/34.jpg)
Seletores Filtros
$(„li:gt(1)‟)Acessa os índices maiores que o indicado
$(seletor:gt(índice))
<ul>
<li>Teste</li>
<li>Teste</li>
<li>Teste</li> - Acessa este
</ul>
![Page 35: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/35.jpg)
Seletores Filtros
$(„li:lt(1)‟)Acessa os índices menores que o indicado
$(seletor:lt(índice))
<ul>
<li>Teste</li> - Acessa este
<li>Teste</li>
<li>Teste</li>
</ul>
![Page 36: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/36.jpg)
Seletores Filtros
$(„li:lt(1)‟)Acessa os índices menores que o indicado
$(seletor:lt(índice))
<ul>
<li>Teste</li> - Acessa este
<li>Teste</li>
<li>Teste</li>
</ul>
![Page 37: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/37.jpg)
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>
![Page 38: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/38.jpg)
Seletores de Conteúdo
$(„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>
![Page 39: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/39.jpg)
Seletores de Conteúdo
$(„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.
![Page 40: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/40.jpg)
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>
![Page 41: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/41.jpg)
Seletores de Atributos
$(„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
![Page 42: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/42.jpg)
Seletores de Atributos
$(„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
![Page 43: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/43.jpg)
Seletores de Atributos
$(„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.
![Page 44: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/44.jpg)
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
![Page 45: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/45.jpg)
Seletores de Formulários
$(„:text‟)
$(„:password‟)
$(„:radio‟)
$(„:checkbox‟)$(„:enabled‟)
$(„:disabled‟)
$(„:checked‟)
$(„:select‟)
![Page 46: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/46.jpg)
Prática
5 Minutos
![Page 47: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/47.jpg)
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.
![Page 48: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/48.jpg)
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.
![Page 49: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/49.jpg)
Eventos
.click( )Executa uma ação no momento em que o seletor é clicado
$(„#botao1‟).click(function( )
{
Ações
});
![Page 50: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/50.jpg)
Eventos
.dblclick( )Executa uma ação no momento em que o seletor é clicado
duas vezes seguidas (duplo clique)
$(„#botao1‟).dblclick(function( )
{
Ações
});
![Page 51: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/51.jpg)
Eventos
.blur( )Quando o seletor não está mais com o foco sobre ele, muito
utilizado em formulários.
$(„:text‟).blur(function( )
{
Ações
});
![Page 52: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/52.jpg)
Eventos
.change( )Quando o valor do seletor for alterado ele realiza uma ação.
$(„:checkbox‟).change(function( )
{
Ações
});
![Page 53: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/53.jpg)
Eventos
.focus( )Quando o seletor entrar em foco uma ação é executada.
Muito utilizada também em formulários
$(„:text‟).focus(function( )
{
Ações
});
![Page 54: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/54.jpg)
Eventos
.keydown( )Quando uma tecla é digitada no seletor uma ação é
executada.
$(„:text‟).keydown(function( )
{
Ações
});
![Page 55: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/55.jpg)
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
});
![Page 56: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/56.jpg)
Eventos
.mousedown( ) Quando o ponteiro do mouse é clicado sobre o seletor
$(„h1‟).mousedown(function( )
{
Ações
});
![Page 57: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/57.jpg)
Eventos
.mouseup( ) Quando o clique no mouse é solto sobre o seletor
$(„h1‟).mouseup(function( )
{
Ações
});
![Page 58: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/58.jpg)
Eventos
.mouseover( ) Quando o ponteiro do mouse passa sobre o seletor
$(„h1‟).mouseover(function( )
{
Ações
});
![Page 59: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/59.jpg)
Eventos
Muitos Outros
.load
.submit
.unload
.select
.scroll
.resize
.error
![Page 60: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/60.jpg)
Prática
10 Minutos
![Page 61: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/61.jpg)
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
![Page 62: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/62.jpg)
Eventos
Muitos Outros
.load
.submit
.unload
.select
.scroll
.resize
.error
![Page 63: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/63.jpg)
Métodos
Estilização
.css( )Utiliza as regras do css para estilizar
os seletores.
Ex.: Background, Color, width,
height, border, display ...
![Page 64: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/64.jpg)
Prática
5 Minutos
![Page 65: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/65.jpg)
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.
![Page 66: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/66.jpg)
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
![Page 67: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/67.jpg)
Métodos
Manipulação
.html( )Manipula conteúdo html dentro de
um seletor.
$(„.teste1‟).html(„teste<br>teste2‟);
![Page 68: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/68.jpg)
Métodos
Manipulação
.text( )Manipula conteúdo textual dentro de
um seletor.
$(„.teste1‟).text(„teste‟);
![Page 69: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/69.jpg)
Métodos
Manipulação
.val( )Manipula o atributo value de um
seletor.
$(„:text‟).val(„teste‟);
![Page 70: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/70.jpg)
Prática
10 Minutos
![Page 71: MiniCurso Jquery - IV SimSis](https://reader033.fdocument.pub/reader033/viewer/2022042817/559c5de21a28abec3d8b456c/html5/thumbnails/71.jpg)
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.