5.3 Jquery

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?

5.3 Jquery

Enviado por

Direitos autorais:

Formatos disponíveis

5.3 Jquery

Enviado por

Dados do documento

Descrição original:

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

5.3 Jquery

Enviado por

Direitos autorais:

Formatos disponíveis

UNIVERSIDADE EDUARDO MONDLANE

Programação Web e SGC

Docentes: Eng Ruben Manhiça

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

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

Aconselho a colocar a biblioteca na raiz da pasta.

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

– Para mais informações, veja:

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

• Para evitar conflitos com jQuery, o método

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

Você também pode gostar