A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

AJAX - JQUERY Utilizando Recursos Para Otimizar seu Web Site.

Apresentações semelhantes


Apresentação em tema: "AJAX - JQUERY Utilizando Recursos Para Otimizar seu Web Site."— Transcrição da apresentação:

1 AJAX - JQUERY Utilizando Recursos Para Otimizar seu Web Site

2 Download da Library O /1.6.2/jquery.min.js /1.6.2/jquery.min.js O

3 EXEMPLOS $(document).ready(function() {ready Alert(“Opa!”); });

4 EXEMPLO $(document).ready(function() {ready nome=“João”; msg = “Bem Vindo, “; Alert(msg+nome); });

5 HTML E JQUERY Produto:Curso de Web Design Valor:R$ Quantidade:100

6 $(document).ready(function(){ teste = $("#div_valor").html(); alert(teste); });

7 $(document).ready(function(){ $("#div_valor").html(“Curso Web 2011”); });

8 $(document).ready(function(){ teste = $("#div_produto").html(); msg = alert(teste); if(msg=true) { $("#div_produto").html("Curso Web Design "); } });

9 Exercício O Exibir num alerta “Demorou para comprar o Preço aumentou”, alterar o preço do curso e diminuir o número de vagas juntamente com um alerta “Corra enquanto é tempo!”.

10 Escondendo Elementos $(".formato").hide("slow"); $(".formato").show("slow"); $(".formato").SlideUp(1000); $(".formato").SlideDown(1000); $(".formato").fadeIn(); $(".formato").fadeOut(); $(".formato").fadeTo(“slow,0.5”);

11 Trabalhando Com Eventos O Crie um botão e uma outra classe no css $("#BtnCor").click(function(){ $("div").toggleClass("formato2"); return false; });

12 EXERCÍCIOS O Crie um Botão para cada Div, alternando as cores a partir do momento que foi clicado.

13 Atribuindo CSS $('h1').css('fontSize', '100px'); $('h1').css({ 'fontSize' : '100px', 'color' : 'red' });

14 .teste { border-width: 3px; border-style: dashed; border-color: red; } $(document).ready(function () { $(“a”).click(function() { $(“p”).addClass(“teste”); });

15 $(document).ready(function () { $(“a”).click(function() { $(“p”).css(“border”, “3px dashed red”); });


Carregar ppt "AJAX - JQUERY Utilizando Recursos Para Otimizar seu Web Site."

Apresentações semelhantes


Anúncios Google