Escolar Documentos
Profissional Documentos
Cultura Documentos
para Internet
Aula 10
Celso Olivete Jnior
olivete@fct.unesp.br
www.fct.unesp.br/docentes/dmec/olivete
Aula 10
Cronograma
Contedo Data
!. "ecnolo#ia J$O% e A&a' com J(uer)
Definies de JSON, Ajax e JQuery
Requisies e Events Ajax
Requisies JSON
0!"10 e
1#"10
*
Desenvlvi$ent de A%li&aes %ara 'nternet
Requisies JSON
()tds JQuery
. Desenvolvimento de Aplicaes
A%resenta* ds +rjets
,0"10
+rva ,0"10
RER ,-"10
jQuery
jQuery uma biblioteca para o
desenvolvimento rpido de scripts em
java, que interagem com o html.
possvel atribuir eventos, definir efeitos, possvel atribuir eventos, definir efeitos,
alterar ou criar elementos na pgina, dentre
diversas outras aes.
+
Desenvlvi$ent de A%li&aes %ara 'nternet
./(0
1nte2d
1SS
A%resenta*
JavaS&ri%t
'ntera*
jQuery
Verso para bai!ar a biblioteca e
documentao" jquery.com
,
Desenvlvi$ent de A%li&aes %ara 'nternet
jQuery
#arregando a biblioteca no html
<script type=text/javascript src=jquery-2.1.1.min.js></script>
#aso no queira bai!ar, voc% pode incluir o
endereo da documentao da biblioteca no
seu script.
3s&ri%t ty%e45text"javas&ri%t5 lan6ua6e 45javas&ri%t5
sr&457tt%8""&de9jquery9&$"jquery:,91919$in9js5;
3"s&ri%t;
-
Desenvlvi$ent de A%li&aes %ara 'nternet
jQuery
Verificando se a biblioteca est
carregada
.
Desenvlvi$ent de A%li&aes %ara 'nternet
$(document).ready(function(){
alert("jQuery funcionando");
alert(jQuery);
});
Seletores jQuery
$(h1);
(Nome do elemento)
$(p.autor);
(Elemento + . + Classe) (Elemento + . + Classe)
$(.autor);
(Somente a classe)
$(p#rodape);
(Elemento + # + Id)
$(h1, p#rodape);
(Mais de um elemento)
/
Desenvlvi$ent de A%li&aes %ara 'nternet
jQuery - Selecionando
atributos
$(input);
// Todos inputs da pgina
$(input[type=text]);
// Todos inputs do tipo text
$(p[id=rodape]); ou $(p#rodape);
$(p[class=autor]); ou $(p.autor);
0
Desenvlvi$ent de A%li&aes %ara 'nternet
jQuery manipulando CSS
$(p).css(font-size);
// retorna o valor do font-size do elemento p
$(p).css(font-size, 12px);
// define o font-size do elemento p para 12px
1
Desenvlvi$ent de A%li&aes %ara 'nternet
jQuery - Definindo
mltiplos atributos
&tili'ando mtodos encadeados
$(p).css(font-size, 24px)
.css(font-weight, bold) .css(font-weight, bold)
.css(line-height, 32px);
Ou8
$(p).css({font-size: 24px,
font-weight: bold,
line-height: 32px});
!
Desenvlvi$ent de A%li&aes %ara 'nternet
jQuery manipulando
classes
$(p).hasClass(autor);//retorna true ou false
$(p).addClass(bigger);
$(p).removeClass(bigger); // remove a $(p).removeClass(bigger); // remove a
classe passada via parmetro
$(p).removeClass(); // remove todas as
classes
$(p).toggleClass(bigger); // se o elemento
tiver a classe bigger, o jQuery remove. Se
no tiver, adiciona