Scribd
Carregar
81 visualizações21 páginas

5.3 Jquery

Este documento fornece uma introdução aos conceitos básicos de Jquery. Resume os principais tópicos abordados como: 1) O que é Jquery e suas principais funcionalidades como redução de código e compatibilidade entre navegadores; 2) Sintaxe básica do Jquery com exemplos de seletores HTML/CSS; 3) Efeitos como esconder/mostrar elementos e animações.

Enviado por

Schellton
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PPTX, PDF, TXT ou leia on-line no Scribd
81 visualizações21 páginas

5.3 Jquery

Este documento fornece uma introdução aos conceitos básicos de Jquery. Resume os principais tópicos abordados como: 1) O que é Jquery e suas principais funcionalidades como redução de código e compatibilidade entre navegadores; 2) Sintaxe básica do Jquery com exemplos de seletores HTML/CSS; 3) Efeitos como esconder/mostrar elementos e animações.

Enviado por

Schellton
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PPTX, PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 21

UNIVERSIDADE EDUARDO MONDLANE

FACULDADE DE ENGENHARIA
DEPARTAMENTO DE ENGENHARIA ELECTROTÉCNICA

Programação Web e SGC


Jquery

Docentes: Eng Ruben Manhiça


Enga Leila Omar

Maputo, 8/10/21
Conteúdo da Aula
1. Introdução ao Jquery
– Conceitos Básicos;

08/10/2021 Apresentado por Ruben Manhiça 2


O que é jQuery
• jQuery biblioteca ara desenvolvimento rápido de scripts em
java, que interagem com o html, com ela podemos atribuir
eventos, definir efeitos, alterar ou criar elementos na página,
dentre diversas outras infinidades de ações.
Funcionalidades
Principais funcionalidades do jQuery:
• Resolução da incompatibilidade entre os navegadores.
• Redução de código.
• Reutilização do código através de plugins.
• Utilização de uma vasta quantidade de plugins criados
por outros desenvolvedores.
• Trabalha com AJAX e DOM.
• Implementação segura de recursos do CSS1, CSS2 e
CSS3.

8/10/21 4
Versões para baixar:
• Leve
 https://code.google.com/p/jqueryjs/downloads/list 

• Documentações do jQuery
http://docs.jquery.com 
No HTML:
<script type="text/javascript" language = "javascript"
src="javascript/jquery.js“> </script>

Lembre-se que o caminho do arquivo e o nome do .js deve ser o


mesmo que você utilizou quando gravou após ter baixado a
biblioteca.

Aconselho a colocar a biblioteca na raiz da pasta.


No HTML:
<script type="text/javascript" language = "javascript"
src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js">
</script>

Caso não queira baixar, você pode incluir o endereço da


documentação da biblioteca no seu script.
DOM
• DOM (Modelo de Objetos de Documentos)
– Especificação da W3C, independente de plataforma e linguagem, onde
podemos alterar e editar a estrutura, conteúdo e estilo de um
documento eletrônico, de forma dinâmica, permitindo que o
documento seja mais tarde processado e os resultados desse
processamento, incorporados de volta no próprio documento.

– Para mais informações, veja:


http://pt.wikipedia.org/wiki/Modelo_de_Objeto_de_Documentos 
Sintaxe básica:
 $(seletorHTML).ação()

Exemplos:
•$(this).hide() // Esconde o elemento atual
•$("p").hide() // Esconde todos os parágrafos
•$("p.teste").hide() // Esconde todos os parágrafos com a
classe="teste"
•$("#test").hide() // Esconde o elemento com o id="teste"
Seletores HTML
 $("p")
seleciona os elementos <p>
 $("p.intro")
selecionar todos os elementos <p> com class="intro"
 $("p#demo")
seleciona o primeiro elemento <p> com id="demo"
Seletores de Atributos
• $("[href]")
// Seleciona todos os elementos com um atributo href
•  
• $("[href='#']")
• // Selecionar todos os elementos com um valor href igual a "#"
•  
• $("[href!='#']")
• // Seleciona todos os elementos com um valor href não igual a
"#"
•  
• $("[href$='.jpg']")
• // Seleciona todos os elementos com um atributo href que
acabe em ".jpg"
Seletores CSS
• Podem ser utilizados para alterar propriedades CSS de
elementos HTML.
• A seguir alteramos a cor de fundo de todos os elementos “p”
para amarelo:

$("p").css("background-color","yellow");
Exemplo
• Um código em Javascript puro, para atribuir o valor "5"
em um elemento qualquer.

document.getElementById( 'Teste' ).value = 5;

Em Jquery

$( '#Teste' ).val( 5 );

8/10/21 13
Exemplo 1:
• <html>
• <head> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-
1.4.2.min.js"></script>
• <script type="text/javascript">
• $(document).ready(function(){
• $("button").click(function(){
• $("p").hide();
• });
• });
• </script> </head>
•
• <body>
• <h2>Isto é um titulo</h2>
• <p>Isto é um parágrafo.</p>
• <p>Isto é mais um parágrafo.</p>
• <button>Clica-me</button>
• </body>
• </html>
Funções em Arquivos Separados
• <head>
• <script type="text/javascript" src="jquery.js"></script>
• <script type="text/javascript" src="minha_funçao.js">
</script>
• </head>
Conflitos de Nome
• O $ é usado como atalho para jQuery. Outras bibliotecas
do Javascript também utilizam este símbolo para as funções.

• Para evitar conflitos com jQuery, o método


noconflict() permite atribuir um nome alternativo, por
exemplo “jq”, em vez de utilizar o simbolo $.
Efeitos
 $(selector).hide()

 $(selector).show()
 $(selector).toggle()

 $(selector).slideDown()
 $(selector).slideUp()

 $(selector).slideToggle()
 $(selector).fadeIn()
 $(selector).fadeOut()
 $(selector).fadeTo()
 $(selector).animate()
Efeitos – Animação – Ex.:
<script type="text/javascript">
 
$(document).ready(funcao(){
 
    $("botao").click(funcao(){
 
        $("div").animate({left:"29px"},"slow");
 
        $("div").animate({fontsize:"4em","slow");
 
    ));
 
));

</script>
Efeitos
• Acesse o link abaixo e teste alguns efeitos:

• https://api.jquery.com/category/effects/
Códigos jQuery e Exemplos
• Acesse o link abaixo e verifique a lista de códigos jQuery.
http://www.visualjquery.com/

• O site a seguir possui vários exemplos de scripts que podem


ser utilizados:
Noupe.com
FIM!!!

Duvidas e Questões?

Você também pode gostar