5.3 Jquery

Fazer download em pptx, pdf ou txt
Fazer download em pptx, pdf ou txt
Você está na página 1de 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