Scribd Logo
Upload

Welcome to Scribd!

  • Aula8 JQuery

    Uploaded by

    emerson_ufu
    81 views32 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    81 views32 pages

    Aula8 JQuery

    Uploaded by

    emerson_ufu

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 32

    UNIVERSIDADE FEDERAL DE SANTA MARIA - UFSM COLGIO AGRCOLA DE FREDERICO WESTPHALEN WEB DESIGN II

    WEB DESIGN II AULA 08 jQuery

    DISCIPLINA: WEB DESIGN II PROF.: ROMULO VANZIN

    Data: 06/11/2013

    jQuery

    jQuery uma biblioteca JavaScript cross-browser desenvolvida para simplificar os scripts client side que interagem com o HTML. Ela foi lanada em janeiro de 2006 no BarCamp de Nova York por John Resig. jQuery a mais popular das bibliotecas JavaScript. jQuery uma biblioteca de cdigo aberto. A sintaxe do jQuery foi desenvolvida para tornar mais simples a navegao do documento HTML, a seleo de elementos DOM, criar animaes, manipular eventos e desenvolver aplicaes AJAX. A biblioteca tambm oferece a possibilidade de criao de plugins sobre ela. Fazendo uso de tais facilidades, os desenvolvedores podem criar camadas de abstrao para interaes de mais baixo nvel, simplificando o desenvolvimento de aplicaes web dinmicas de grande complexidade.

    jQuery Funcionalidades

    Principais funcionalidades do jQuery:


    Resoluo

    da

    incompatibilidade

    entre

    os

    navegadores. Reduo de cdigo. Reutilizao do cdigo atravs de plugins. Utilizao de uma vasta quantidade de plugins criados por outros desenvolvedores. Trabalha com AJAX e DOM. Implementao segura de recursos do CSS1, CSS2 e CSS3.

    jQuery

    Incluso da biblioteca na pgina. A biblioteca jQuery est armazenada em um nico arquivo script.

    <head> <script type="text/javascript" src="jquery.js"> </script> </head>

    A tag <script> deve ficar dentro da tag <head>.

    jQuery

    A sintaxe do jQuery feita para selecionar elementos HTML e realizar aes sobre os mesmos. A sintaxe bsica : $(selector).action()
    O

    sinal de dlar define que jQuery. O seletor usado para "buscar" elementos HTML. A funo (action) jQuery a que ser executada no(s) elemento(s) HTML.

    jQuery Sintaxe

    $(this).hide()

    Demonstra o mtodo jQuery hide() usado para esconder o elemento HTML atual.

    $("#test").hide()

    Demonstra o mtodo jQuery hide() usado para esconder o elemento de id="test".

    $("p").hide()

    Demonstra o mtodo jQuery hide() usado para esconder todos os elementos dentro das tags <p>.

    $(".test").hide()

    Demonstra o mtodo jQuery hide() usado para esconder todos os elemento da classe "test".

    jQuery Sintaxe

    jQuery usa CSS para selecionar elementos HTML. $("p") seleciona todos os elementos com tag <p>. $("p.intro") seleciona todos os elementos com tag <p> da classe "intro". $("p#demo") seleciona todos os elementos com tag <p> e id="demo".

    jQuery Sintaxe

    $("[href]") seleciona todos os elementos com atributo href. $("[href='#']") seleciona todos os elementos com atributo href e valor igual a "#". $("[href!='#']") seleciona todos os elementos com atributo href e valor diferente de "#". $("[href$='.jpg']") seleciona todos os elementos com atributo href cujo valor termina com ".jpg".

    Funo Document Ready

    Em todos os exemplos a seguir, as funes jQuery estaro dentro de uma funo document.ready():

    $(document).ready(function(){ // funes jQuery... });

    Isto serve para prevenir que alguma funo seja executada antes da leitura completa do arquivo HTML. Algumas aes iro falhar caso a pgina ainda no tenha sido lida. Por exemplo, se uma funo tenta esconder um elemento que ainda no existe.

    Seletor CSS

    O seletor CSS do jQuery pode ser utilizado para modificar propriedades CSS de elementos HTML. O exemplo abaixo muda a cor de fundo o de todos os elementos p para azul:
    $("p").css("background-color","blue");

    Seletor CSS
    Exemplo $(document).ready(function(){ $("p").click(function(){ $("p").css("color","red"); }); });

    Seletor CSS

    Exemplo $("#azul").click(function(){ $("#azul").css("color","blue"); }); $("#vermelho").click(function(){ $("#vermelho").css("color","red"); });

    Seletor CSS

    Os mtodos de manipulao de eventos a funo principal do jQuery. Event handlers so mtodos que so chamados (disparados) quando "alguma coisa acontece" em HTML.

    Eventos - Hide e Show


    $(selector).hide(speed,callback) $(selector).show(speed,callback)

    Os parmetros para especificar um tempo so: "slow", "fast", "normal" ou valor em milissegundos. O parmetro callback o nome da funo a ser executada aps completar a execuo da tarefa.

    Eventos - Hide e Show

    Exemplo

    $("button").click(function(){ $("p").hide(1000); });

    Eventos - slideDown, slideUp


    $(selector).slideDown(speed,callback) $(selector).slideUp(speed,callback) $(selector).slideToggle(speed,callback) Os parmetros para especificar um tempo so: "slow", "fast", "normal" ou valor em milissegundos O parmetro callback o nome da funo a ser executada aps completar a execuo da tarefa.

    Eventos - slideDown, slideUp

    Exemplo

    $("#ocultar").click(function(){ $("#texto").slideToggle(); });

    Eventos - fadeIn, fadeOut, fadeTo

    Muda gradualmente a opacidade dos elementos.

    $(selector).fadeIn(speed,callback) $(selector).fadeOut(speed,callback) $(selector).fadeTo(speed,opacity,callback)

    Os parmetros para especificar um tempo so: "slow", "fast", "normal" ou valor em milissegundos. O parmetro callback o nome da funo a ser executada aps completar a execuo da tarefa.

    Eventos - fadeIn, fadeOut, fadeTo

    Exemplo

    $("#exibir").click(function(){ $("#texto").fadeIn(); }); $("#ocultar").click(function(){ $("#texto").fadeOut(); }); $("#ocultar").click(function(){ $("#texto").fadeTo("slow", 0.33); });

    Funes callback

    a funo a ser executada aps completar a execuo de uma tarefa.

    $("p").hide(1000,function(){ alert("O pargrafo foi escondido!"); });

    Animaes Customizadas

    $(selector).animate({params},[duration], [easing],[callback]) O parmetro importante aqui params, que define propriedades CSS que sero animadas. A maioria das propriedades podem ser animadas simultaneamente:

    animate({width:"70%",opacity:0.4,marginLeft: "0.6in",fontSize:"3em"});

    Animaes Customizadas

    Exemplo

    $("button").click(function(){ $("#animar").animate({left:"100px"},"slow"); $("#animar").animate({fontSize:"3em"},"slow"); }); Html <button>Iniciar</button> <div id="animar" style="background:#4169E1;height:100px;width:200px;p osition:relative"> &nbsp; jQuery &nbsp; </div>

    Manipulao de contedo HTML


    jQuery contm funes para manipular elementos HTML e seus atributos. Mudando o contedo: $(selector).html(content)

    O mtodo html() muda o contedo de elementos HTML. Exemplo: $("p").html("TES-04");

    Manipulao de contedo HTML


    Adicionando contedo $(selector).append(content)

    Adiciona contedo ao final de elementos HTML.

    $(selector).prepend(content)

    Adiciona contedo no incio de elementos HTML.

    $(selector).before(content)

    Adiciona contedo antes do(s) elemento(s) HTML.

    $(selector).after(content)

    Adiciona contedo depois do(s) elemento(s) HTML.

    Manipulao de contedo HTML


    Exemplos $("button").click(function( ){ $("#animar").animate({left:"100px", width:"500px"},"slow"); $("#animar").animate({fontSize:"3em"},"slow");

    $("#animar").html("Efeitos"); $("#animar").append(" com Animate"); $("#animar").before("<p>Inicio</p> "); $("#animar").after("<p>Fim</p>") });

    Manipulao de Estilo

    O mtodo css() usado para manipulao de estilos.


    css(name)

    - Retorna o valor de uma propriedade css(name,value) - Seta o valor de uma propriedade css({properties}) - Seta mltiplos valores e propriedades

    Manipulao de Estilo
    Exemplo $("p").css({"color":"red","font-size":"200%"});

    Os mtodos height() e width() so usados para mudar o tamanho de elementos.

    Exemplo: $("#animar").width("300px");

    Exerccios

    1) Crie um comando que exiba uma mensagem, avisando ao usurio que ele clicou em um link. 2) Em uma pgina HTML o usurio dever ser informado de que o link clicado est funcionando, escreva um comando que faa isso.

    Exerccios

    3) Crie um comando que, quando o usurio clicar no link, o navegador adicione uma borda azul, com 4 pixels de espessura e que seja tracejada para um elemento do corpo html.

    Exerccios

    4) Crie um documento com dois pargrafos e dois botes, um ir esconder os pargrafos e o outro ir exibi-los. 5) Modifique o documento para que apenas um pargrafo seja escondido e exibido.

    Exerccios

    6) O elemento com id "toc" uma tabela que indica o ndice da pgina jquery01.htm. Faa com que quando a pgina esteja pronta, o elemento seja oculto. 7) Altere a cor de fundo da pgina html para #CCC utilizando jQuery.

    DVIDAS
    http://www.cafw.ufsm.br/~romulo romulovanzin@yahoo.com.br

    You might also like