Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Tutorial Jquery

    Cargado por

    bobkurt_77
    51 vistas11 páginas

    Derechos de autor

    © Attribution Non-Commercial (BY-NC)

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    51 vistas11 páginas

    Tutorial Jquery

    Cargado por

    bobkurt_77

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 11

    1.

    ANTES DE COMEAR
    Voc dever ter conhecimentos bsicos de HTML, CSS e Javascript.

    2. O QUE JQUERY?

    uma biblioteca de funes Javascript uma biblioteca com o lema Escrever menos e fazer mais Contm os seguintes recursos o Seleces de elementos HTML o Manipulao de elementos HTML o Manipulao CSS o Eventos HTML o Efeitos e animaes Javascript o HTML DOM o AJAX

    3. COMO ADICIONAR A LIVRARIA JQUERY


    A livraria jQuery guardada num ficheiro Javascript, que contm as funes jQuery. Para adicionar a uma pgina web, utilize o seguinte cdigo 1<head> 2<script type="text/javascript" src="jquery.js"></script> 3</head> Existem 2 verses disponveis para download, uma simplificada, e outra descomprimida, para correco de erros ou leitura. Ambas podem ser baixadas em jQuery.com Alternativamente, se no pretender baixar os arquivos, poder utilizar os ficheiros alojados nos servidores da Google ou da Microsoft Google 1<script type="text/javascript" 2src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" 3></script>
    </head> <head>

    Microsoft 1<script type="text/javascript" 2src="http://ajax.microsoft.com/ajax/jquery/jquery31.4.2.min.js"></script>


    </head> <head>

    4. SINTAXE JQUERY

    A sintaxe jQuery orientada para seleccionar elementos HTML e de seguida efectuar aces nos mesmos. A sintaxe bsica $(selectorHTML).aco() Trocando por palavras, o simbolo $ para definir jQuery, (selectorHTML) onde se introduz o elemento e aco() onde iro ser introduzidas as aces a efectuar nos elementos. Exemplos: 1$(this).hide() // Esconde o elemento actual 2 3$("p").hide() // Esconde todos os pargrafos 4$("p.teste").hide() // Esconde todos os pargrafos com a 5classe="teste" 6 7$("#test").hide() // Esconde o elemento com o id="teste"

    5. SELECTORES JQUERY
    Os selectores permitem- lhe seleccionar e manipular elementos HTML. possvel seleccionar por nome, nome de atributo ou contedo.

    1 Selectores de elementos
    jQuery utiliza selectores CSS para seleccionar elementos HTML 1$("p") selecciona os elementos <p> 2 3$("p.intro") seleccionar todos os elementos <p> com class="intro". 4 5$("p#demo") selecciona o primeito elemento <p> com id="demo".

    2 Selectores de Atributos
    jQuery utiliza expresses XPath para seleccionar elementos com dados atributos.
    $("[href]") // Selecciona todos os elementos com um atributo href

    1 2$("[href='#']") // Seleccionar todos os elementos com um valor href 3igual a "#" 4$("[href!='#']") // Selecciona todos os elementos com um valor href 5no igual a "#" 6 7$("[href$='.jpg']") // Selecciona todos os elementos com um atributo
    href que acabe em ".jpg"

    3 Selectores CSS

    Os selectores CSS podem ser utilizados para alterar propriedades CSS de elementos HTML No exemplo a seguir alteramos a cor de fundo de todos os elementos p para amarelo 1$("p").css("background-color","yellow");

    6. EVENTOS JQUERY

    6.1 Eventos
    Os eventos jQuery so pea chave. As funes que lidam com os eventos so chamados quando algo acontece no HTML. Quando isto acontece, o termo accionado por um evento muito conhecido e frequentemente utilizado. 1 2 <html> 3 <head> 4 <script type="text/javascript" src="jquery.js"></script> 5 <script type="text/javascript"> 6 $(document).ready(function(){ $("button").click(function(){ 7 $("p").hide(); 8 }); 9 }); 10</script> 11</head> 12 <body> 13<h2>Isto um titulo</h2> 14<p>Isto um pargrafo.</p> 15<p>Isto mais um pargrafo.</p> 16<button>Clica-me</button> </body> 17 18</html> 19 20 No exemplo acima, uma funo chamada quando o evento de clique no boto accionado: $(boto).click(funo() {cdigo} E esta funo esconde todos os elementos <p>: $(p).hide();

    6.2 Utilizar funes em ficheiro separado


    Se a sua pgina web contm inmeras pginas, e pretende que as suas funes jQuery tenham fcil acesso para manuteno, pode introduzi- las num ficheiro .js separado. Nos

    casos citados acima, temos introduzido as funes jQuery na seco <head>. No entanto, algumas vezes prefervel introduzir as funes num ficheiro, e cham-las atravs do atributo src. Vejamos: 1<head> 2<script type="text/javascript" src="jquery.js"></script> 3<script type="text/javascript" src="a_minha_funao.js"></script> 4</head>

    6.3 Conflitos de nomes jQuery


    jQuery usa o smbolo $ como atalho para jQuery. Outras livrarias de Javascript tambm utilizam este smbolo para as funes. No entanto, para evitar conflitos com jQuery, o mtodo noconflict() permite atribuir um nome alternativo, por exemplo jq, em vez de utilizar o simbolo $.

    7. EFEITOS JQUERY

    7.1 Mostrar e Esconder ( hide(), show() )


    Com jQuery possvel mostrar, esconder elementos HTML com estas funes. 1$("#hide").click(funao(){ 2 $("p").hide(); 3}); 4$("#show").click(funao(){ 5 $("p").show(); }); 6 Ambos podem funcionar em conjunto com parmetros opcionais: speed e callback. 1$(selector).hide(speed,callback) 2 3$(selector).show(speed,callback) O parmetro speed especifica a velocidade de mostrar/esconder, e pode ter os valores slow, normal, fast ou em milisegundos:

    1$("botao").click(funao(){ 2 3$("p").hide(800); 4 5)); O parmetro callback o nome de uma funo a ser executada depois da funo hide/show estar completa.

    7.2 Alternar ( toggle() )


    O mtodo toggle() permite alterar a visibilidade de elementos HTML que usam a funo show/hide. Os elementos escondidos so mostrados, e os elementos visveis so escondidos. 1$(selector).toggle(speed,callback) Tal como referido anteriormente, o parmetro speed aceita valores slow, normal, fast ou em milisegundos. 1$("botao").click(funao(){ 2 3$("p").toggle(850); 4 5));

    7.3. Deslizar ( slideDown(), slideUp(), slideToggle() )


    Os mtodos de deslizamento do jQuery alteram gradualmente a altura dos elementos seleccionados, atravs dos seguintes mtodos 1$(selector).slideDown(speed,callback) 2 3$(selector).slideUp(speed,callback) 4 5$(selector).slideToggle(speed,callback) Mais uma vez, relembro que o parmetro speed aceita valores slow, normal, fast ou em milisegundos. O parmetro callback o nome de uma funo a ser executada depois da funo hide/show estar completa.

    7.3.1 Exemplos Prticos


    slideDown() 1$("flip").click(function(){ 2

    $(".panel").slideDown(); 3 4 5));

    slideUp() 1$("flip").click(function(){ 2 $(".panel").slideUp(); 3 4 5)); slideToggle() 1$("flip").click(function(){ 2 $(".panel").slideToggle(); 3 4 5));

    7.4 Desvanecer ( fadeIn(), fadeOut(), fadeTo() )


    Os mtodos de desvanecer alteram gradualmente a opacidade dos elementos seleccionados jQuery tem os seguintes mtodos de desvanecimento: 1$(selector).fadeIn(speed,callback) 2 3$(selector).fadeOut(speed,callback) 4 5$(selector).fadeTo(speed,opacity,callback) Os parmetros de speed e callback so os mesmos de anteriormente, e o parmetro opacity permite desvanecer para uma opacidade escolhida, como ir ser demonstrado no exemplo mais frente.

    7.4.1 Exemplos prticos


    fadeIn() 1$("boto").click(funao(){ 2 $("div").fadeIn(2000); 3 4 5)); fadeOut()

    1$("boto").click(funao(){ 2 $("div").fadeIn(2000); 3 4 5)); fadeTo() 1$("boto").click(funao(){ 2 $("div").fadeTo("slow",0.30); 3 4 5));

    7.5 Animaes jQuery


    As animaes so introduzidas atravs do seguinte cdigo 1$(selector).animate({parametros},[duracao],[e asing],[callback]) O parmetro chave parametros onde iro ser introduzidas propriedades CSS que vo ser animadas. Podem ser animadas vrias propriedades ao mesmo tempo. 1animate({width:"60%",opacity:0.3,marginTop:"0.3in",fontsize:"2em"}) O segundo parmetro a durao, que define o tempo da animao. Aceita valores slow, fast, normal e em milisegundos. Vejamos um exemplo: 1 <script type="text/javascript"> 2 3 $(document).ready(funcao(){ 4 5 $("botao").click(funcao(){ 6 $("div").animate({left:"29px"},"slow"); 7 8 $("div").animate({fontsize:"4em","slow"); 9 10 )); 11 12)); 13 1 </script>

    7.6 Exemplos de efeitos jQuery


    1 $(selector).hide() 2

    3 $(selector).show() 4 5 $(selector).toggle() 6 $(selector).slideDown() 7 8 $(selector).slideUp() 9 10$(selector).slideToggle() 11 12$(selector).fadeIn() 13 14$(selector).fadeOut() 15 16$(selector).fadeTo() 17$(selector).animate() 18 19

    8. FUNO CALLBACK
    Vamos agora ficar a conhecer o que o callback em jQuery. A funo callback executada depois de a animao estar concluda. As declaraes Javascript so executadas linha-a-linha. No entanto, com as animaes, a prxima linha de cdigo pode ser executada mesmo que a animao no esteja concluda, o que pode levar a erros. Para prevenir estas situaes, cria-se a funo callback. Esta no ser chamada antes de animao estar terminada. Exemplo: 1$("p").hide(1000,function(){ 2 alert("O pargrafo foi escondido"); 3});

    9. MANIPULAO HTML
    jQuery tem ferramentas muito poderosas que permitem alterar e manipular atributos e elementos HTML.

    9.1 Alterar contedo HTML


    Utilizando esta sintaxe $(selector).html(content) altermos o contedo de um dado parmetro. 1$("p").html("Escola de Criatividade");

    9.2 Adicionar contedo HTML

    Utilizando a sintaxe $(selector).append(content), pode-se anexar informao aos elementos seleccionados. Utilizando a sintaxe $(selector).prepend(content), pode-se des-anexar informao dos elementos seleccionados. 1$("p").append("Escola de Criatividade"); 2$("p").prepend("Escola de Criatividade");

    9.3 Inserir contedo depois de elementos HTML


    Utilizando a sintaxe $(selector).after(content) pode ser introduzido contedo depois do elemento escolhido. 1$("p").after(" Escola de Criatividade.");

    9.4 Inserir contedo antes de elementos HTML


    Utilizando a sintaxe $(selector).before(content) pode ser introduzido contedo antes do elemento escolhido. 1$("p").before("Escola de Criatividade.");

    10 MTODOS CSS

    10.1 Mtodo css()


    jQuery tem um mtodo bastante importante para manipulao CSS que css(). Tem trs sintaxes diferentes: css(nome) Devolve o valor de uma propriedade CSS css(nome,valor) Define um valor numa propriedade CSS css({propriedades}) Define mltiplos valores em mltiplas propriedades

    10.2 Devolver propriedade CSS


    Utilize o mtodo css(nome) para devolver uma propriedade CSS escolhida, que ser extrada do primeiro elemento encontrado que tenha a propriedade. 1$(this).css("background-color");

    10.3 Definir propriedade e valor CSS


    Utilize css(nome,valor) para definir as propriedades de uma propriedade CSS para todos os elementos que combinam com o introduzido.

    1$("p").css("background-color","yellow");

    10.4 Definir mltplas propriedades e valores CSS


    Utilize css({propriedades}) para definir uma ou mais proriedades/valores para os elementos seleccionados 1$("p").css({"background-color":"yellow","font-size":"200%"});

    10.5 Mtodos de Altura e Largura ( height () e width() )


    Altera a largura e altura para os elementos seleccionados 1$("#div1").height("200px"); // altura 2 3$("#div1").width("200px"); // largura

    11 JQUERY E FUNES AJAX


    AJAX significa Asynchronous JavaScript and XML. uma tcnica para criar pginas rpida se dinmicas AJAX permite que pginas sejam actualizada de forma assincronizada alterando pequenas quantidade de dados com o servidor a fazer o trabalho. Isto significa que possivel actualizar partes da pgina sem actualizar toda a pgina.

    11.1 Escreva menos, faa mais


    A funo jQuery load() uma funo AJAX simples mas muito poderosa, que pode ser utilizada com a seguinte sintaxe $(selector).load(url,data,callback). Utilize o selector para definir os elementos HTML a alterar e o parmetro url para especificar o endereo web para os dados.

    11.2 AJAX de baixo nvel


    A sintaxe para o baixo nvel das funes AJAX $.ajax(opoes) que oferece mais funcionalidade do que as funes de alto nvel, como load,get entre outros, mas tambm um pouco mais difcil de utilizar. O parmetro opes aceita nomes/valor que definam dados url, passowords, tipos de dados, filtros, funes de erro, entre outros.

    12 DICAS

    Funo Documento Pronto

    Esta funo permite-lhe garantir que o contedo jQuery s acedido depois de a pgina estar completamente aberta. Isto evita que o jQuery tente aceder a elementos da pgina que ainda no tenham sido baixados.

    1$(document).ready(function(){ 2 // Funes jQuery entram aqui 3 4 5}); Aceitam-se mais dicas e truques para adicionar e criar uma extensa e til lista. Participe! At j!

    Autor: Diogo Espinha

    También podría gustarte