Curso Superior de Tecnologia em Design Gráfico

Curso Superior de Tecnologia em Design Gráfico

DWEB - Design para
Web

10 jQuery

“Todo aquele que ultrapassa a doutrina de Cristo e nela não permanece não tem Deus; o que permanece
na doutrina, esse tem tanto o Pai como o Filho.” 2 João 1:9

1 Capítulo 10 - jQuery Tuesday, 15 de May de 12

DWEB – Design para Web / Carlos José

Contato

Carlos José

carlosjose.unibratec@gmail.com
www.carlosjose.net
twitter.com/carlosjoser2n



Objetivo da Aula

n Apresentar a
versatilidade da
biblioteca jQuery.



Agenda

n O que é jQuery?
n Para que serve?
n Utilização jQuery
n Padrões web e jQuery
n Como instalar jQuery?
n Seletores
n Exercícios



jQuery

n  O que é jQuery?
î É uma biblioteca JavaScript criada por John
Resig e disponibilizada de forma livre mediante
licença GPL (GNU General Public Licence) para
uso pessoal e comercial.

n  Para que serve?
î É destinada a adicionar interatividade e
dinamismo aos documentos web melhorando a
usabilidade e acessibilidade enriquecendo a
experiência do usuário.



jQuery

n  Utilize jQuery para:
î Adicionar efeitos visuais e animações;
î Acessar e manipular o DOM (Document Object
Model);
î Buscar informações no servidor sem a
necessidade de recarregar à página;
î Prover interatividade;
î Alterar conteúdo;
î Modificar a apresentação e estilização;
î Simplificar tarefas específicas do JavaScript;



jQuery

n  Padrões web e jQuery
î Esta biblioteca esta em total conformidade com
os padrões web;
î Compatível com qualquer sistema operacional;
î Compatível com todos os navegadores inclusive
o Internet Explorer;
î Suporte total as CSS3



jQuery

n  Características da biblioteca jQuery
î Utilizaseletores CSS para localizar elementos
componentes da estrutura de marcação HTML;
î Possui arquitetura compatível com instalação de
plug-ins e extensões em geral;
î É indiferente às inconsistências de renderização
dos navegadores;
î É extensível, pois admite a criação e inserção de
novas funcionalidades na biblioteca existente.



jQuery

n  Como instalar jQuery?
î A biblioteca jQuery é um arquivo texto
JavaScript com extensão .js
î A biblioteca esta disponível para download em:
n  http://jquery.com/



jQuery

n  Seletores jQuery
î Paraentender bem seletores, é necessário estar
familiarizado com a árvore do documento e o
relacionamento entre os elementos que a
compõem.
html

header body

title ul

li li li



jQuery

n  Seletores CSS 1 - 3
î  *: qualquer elemento.
n  $('p.comment-meta *'); // get all elements inside
p.comment-meta
î  E: pega qualquer elemento com o nome E.
n  $('div'); // get all div tags
î  E:nth-child(n):
em um elemento E, pega o
elemento n de seu pai.
n  $('li:nth-child(2)'); // get <li>Item 2</li>
î  E:first-child:
em um elemento E, pega o primeiro
filho de seu pai.
n  $('li:first-child'); // get <li>Item 1</li>
î  E:empty: um elemento E que não possui filhos.
n  $('div:empty'); // get <div id="empty-div"></div>



jQuery
î  E:enabled: um elemento E que está ativo.
n  $('input:enabled'); // get <input type="button" value="Click me!" /
>
î  E:disabled: um elemento E que está inativo.
n  $('input:disabled'); // get <input type="button"
disabled="disabled" value="Disabled button" />
î  E:checked:um elemento E (radio ou checkbox) que está
selecionado.
n  $('input:checked'); // get <input type="checkbox"
checked="checked" />
î  E:selected: um elemento E (option) que está selecionado.
n  $('option:selected'); // get <option value="3">Option 3</option>
î  E F: um elemento E que tenha um ﬁlho F.
n  $('p strong'); // get <strong>Sample:</strong>



jQuery

î  E > F: um elemento F dentro de E.
n  $('p > em'); // get <em>Inside a paragraph</em> but not
<span><em>Inside a span</em></span>
î  E
+ F: elemento F imediatamente precedido por um
elemento E.
n  $('h1 + p'); // get <p>This is just a dummy text.</p>
î  E ~ F: elementos F precedido por um elemento E.
n  $('h1 ~ ul'); // get <ul id="list" class="list-class">
î  E,F,G: elementos E, F e G.
n  $('h1,ul'); // get <h1> and <ul>
î  E[attr]: elementos E que possuam o atributo attr.
n  $(':checkbox[checked]'); // get <input type="checkbox"
id="checkbox" />



jQuery

î  E[attr^=value]:elementos E que possuam um
atributo attr cujo valor inicie-se por value.
n  $('[id^=empty]'); // get <div id="empty-div"></div>
î  E[attr$=value]:
elementos E que possuam um
atributo attr cujo valor termine com value.
n  $('[id$=div]'); // get <div id="empty-div"></div>
î  E[attr*=value]:
elementos E que possuam um
atributo attr cujo valor contenha value.
n  $('dd[class*=o]'); // get <dd class="color"> and <dd
class="word">
î  E[attr=value]:
elementos cujo atributo attr tenham
valor igual a value.
n  $('dd[class=word]'); // get <dd class="word">



jQuery

n  Seletores adicionados pelo jQuery
î  :even:todos os elementos de índice par. Os índices se
iniciam em zero.
n  $('option:even'); // get <option value="1"> and <option
value="3">
î  :odd: todos os elementos de índice ímpar.
n  $('option:odd'); // get <option value="2">

î  :eq(N) e :nth(N): seleciona o elemento de índice N.
n  $('option:eq(0)'); // get <option value="1">
n  $('option:nth(1)'; // get <option value="2">

î  :gt(N): seleciona os elementos cujo índice sejam maior
que N.
n  $('li:gt(1)'); // get <li>Item 3</li>
î  :lt(N):
seleciona os elementos cujo índice seja menores
que N.
n  $('li:lt(1)'); // get <li>Item 1</li>



jQuery
n  Seletores adicionados pelo jQuery
î  :first: equivalente a :eq(0).
n  $('li:first'); // get <li>Item 1</li>
î  :last: seleciona o último elemento.
n  $('li:last'); // get <li>Item 3</li>
î  :parent: seleciona os elementos que têm filhos (incluindo textos).
n  $('h1:parent'); // get <h1>jQuery Selectors</h1>
î  :contains('text'): seleciona os elementos que têm o texto
especificado.
n  $('li:contains("Item 1")'); // get <li>Item 1</li>
î  :visible: seleciona todos os elementos visíveis (não inclui elementos
de formulário hidden).
n  $('h2:visible'); // get <h2>This is a visible H2</h2>
î  :hidden: seleciona campos de formulário hidden e elementos não-
visíveis.
n  $('h2:hidden'); // get <h2 style="display: none;">This is a hidden H2</h2>



jQuery

n  Formulários
î  O
jQuery fornece alguns atalhos para se trabalhar com
campos de formulário, evitando que você tenha que usar
um seletor de atributo input[type=radio], por exemplo.
n  Veja como é simples:
î  :input: seleciona qualquer tipo de campo de formulário (input, button,
textarea, select).
î  :text: seleciona campos com type="text".
î  :password: seleciona campos com type="password".
î  :radio: seleciona campos com type="radio".
î  :checkbox: seleciona campos com type="checkbox".
î  :ﬁle: seleciona campos com type="ﬁle".
î  :submit: seleciona campos com type="submit".
î  :image: seleciona campos com type="image".
î  :reset: seleciona campos com type="reset".
î  :button: seleciona campos com type="button" ou <button></button>.



jQuery: exe01jq.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br">
<head>
<meta charset="utf-8" />
<title>Exe01jq</title>
<style type="text/css" media="all">
h1{color:#FC0}
</style>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$(".cor").css("color","#ff0000");
});
});
</script>
</head>
<body>
<h1 class="cor">Muda cor</h1>
<button type="button" id="btn1">Vermelha</button>
</body>
</html>



<!DOCTYPE html>
<head>
<title>Exe02jq</title>
<style type="text/css" media="all">
div{
width:200px;height:100px;border:1px solid #F00;margin:20px;padding:15px
}
</style>
<script type="text/javascript" src="js/jquery-1.7.1.min.j"></script>
$("button").click(function(){
$("div").css("background","#870cdd");
$("#div2").css("background","#984323");
$(".div3").css("background","#adfced");
});
});
</script>
</head>
<body>
<div>DIV 1</div> <div id="div2">DIV 2</div> <div class="div3">DIV 3</
div>
<button type="button">Colorir DIVS</button></body>
</html>


<!DOCTYPE html>
<head>
<title>exe03jquery</title>
<style>
div{border:1px solid #F00; width:200px; height:80px; margin:10px;
background:#f90; display:none;}
p{background:#036; color:#3ff;}
</style>
$("#bt1").click(function(){$("div").show();});
$("#bt2").click(function(){$("div").hide();});
$("#bt3").click(function(){$("div").show("slow");});
$("#bt4").click(function(){$("div").hide("slow");});
$("#bt5").click(function(){$("div").show(3000);});
$("#bt6").click(function(){$("div").hide(1500);});
$("#bt7").click(function(){$("div").toggle();});
});
</script>
</head>



<body>
<h1>exe03jquery - Efeitos</h1>

<button id="bt1" type="button">show</button>
<button id="bt2" type="button">hide</button>

<button id="bt3" type="button">show('slow')</button>
<button id="bt4" type="button">hide('slow')</button>

<button id="bt5" type="button">show(3000)</button>
<button id="bt6" type="button">hide(1500)</button>

<button id="bt7" type="button">toggle()</button>

<div>Div recebendo os efeitos do jQuery!!!</div>
<p>clique seguidamente no botão toggle()</p>

</body>
</html>



<!DOCTYPE html>
<head>
<style>
div{border:1px solid #F00; width:200px; height:80px; margin:10px; background:#f90;}
</style>
$("#bt1").click(function(){
$("div").animate({
width:"linear",
height:"toggle",
},"slow");
});
});
</script>
</head>
<body>
<h1>exe04jquery – Efeitos com animate()</h1>

<button id="bt1" type="button">animate</button>
<div>Div recebendo os efeitos do jQuery!!!</div>
</body>
</html>



<!DOCTYPE html>
<head>
<style>
div{border:1px solid #F00; width:200px; height:80px; margin:10px;}
</style>
$("#btcor").click(function(){
$("div").css("background","#870ccd");
$("#div2").css("background","#984323");
$(".div3").css("background","#acfced");
});
$(function(){
$("#div2").hover(function(){
$(this).css("background","#ffcc99");
},function(){
$(this).css("background","#984323")
}
);
});
});
</script>
</head>
<body>
<h1>exe05jquery</h1>
<div>div 1</div><div id="div2">div 2</div><div class="div3">div 3</div>
<button id="btcor" type="button">Colorir div's</button>
</body>
</html>



Plugins de terceiros com jQuery

n  Exemplos:
î  http://www.jfontsize.com/demo/
î  http://www.steamdev.com/imgr/
î  http://www.huddletogether.com/projects/lightbox2/
î  http://fancybox.net/
î  http://snook.ca/technical/jquery-bg/
î  http://maxb.net/scripts/jbgallery/
î  http://www.myjqueryplugins.com/jScrollbar
î  http://www.myjqueryplugins.com/BackToTop
î  http://nivo.dev7studios.com/
î  http://slidesjs.com/



Perguntas

?


Considerações Finais

Obrigado!


Curso Superior de Tecnologia em Design Gráfico

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Curso Superior de Tecnologia em Design Gráfico

Ähnlich wie Curso Superior de Tecnologia em Design Gráfico (20)

Mehr von Claudenio Alberto

Mehr von Claudenio Alberto (20)

Curso Superior de Tecnologia em Design Gráfico