Câmpus
Santana do Livramento
Construção de Páginas Web
II - Aula 9
Professor Daniel Trindade Cavalcanti
Disciplina de Construção de Páginas Web II
Resumo da apresentação
Hoje falaremos sobre:
• Um pouco de história do jQuery
• Revendo conceitos básicos
• Introdução ao jQuery com exemplos
Instituto Federal Sul-rio-grandense | câmpus Santana do Livramento 2
Revendo os conceitos básicos
O que é HTML?
O que é CSS?
O que é JavaScript?
O que é DOM?
O que é um objeto DOM?
O que é uma classe no HTML?
O que é um id no HTML?
Instituto Federal Sul-rio-grandense | câmpus Santana do Livramento 3
Revendo os conceitos básicos
HTML - A linguagem de marcação padrão para páginas web.
CSS - Linguagem para estilizar elementos HTML, usado para definir
como eles serão mostrados.
JavaScript - Linguagem de programação para a web.
Instituto Federal Sul-rio-grandense | câmpus Santana do Livramento 4
Revendo os conceitos básicos
DOM - É o Document Object Model, ele define elementos HTML como
objetos e da propriedades, métodos e eventos para esses objetos. No
JavaScript, ele se torna uma API que permite acesso rápido à esses
elementos, podendo adicionar, remover e editar esses elementos, seus
atributos, seu CSS, eventos associados a eles e também reagir a
eventos.
Instituto Federal Sul-rio-grandense | câmpus Santana do Livramento 5
Revendo os conceitos básicos
Aqui podemos ver um exemplo da árvore de elementos que é criada
cada vez que se carrega uma página web.
Instituto Federal Sul-rio-grandense | câmpus Santana do Livramento 6
Revendo os conceitos básicos
Objeto DOM - É um objeto que representa um elemento do HTML,
podendo ser um div, input, h1 ou qualquer outro.
Classe no HTML - É um atributo que usamos para identificar um grupo
de elementos, podendo mais tarde fazer com que o que vale para um
elemento, valha para o grupo todo.
Id no HTML - É um atributo que usamos para identificar um único
elementos, mudanças relacionadas a esse id irão afetar apenas um
único elemento.
Instituto Federal Sul-rio-grandense | câmpus Santana do Livramento 7
Começando…
Agora sim, iremos começar a aula de hoje…
Instituto Federal Sul-rio-grandense | câmpus Santana do Livramento 8
Um pouco de história
● Navegadores que tinham suporte a diferentes tags do HTML
● Padronização do HTML e JavaScript
● Uso de tecnologias como Java, ActiveX e Flash
● Dificuldade de fazer certas coisas com o JavaScript puro
● Surgimento do jQuery em 2006
● Surgimento de diferentes livrarias e framworks
Instituto Federal Sul-rio-grandense | câmpus Santana do Livramento 9
Introdução ao jQuery
O jQuery é uma biblioteca do Javascript
Oferece uma maior facilidade para executar scripts
Como usamos ele?
Podemos fazer o download e importação do arquivo .js
Para isso, usamos: <script src="jquery.min.js"></script>
Ou usar o CDN, que é o link do arquivo online:
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
Instituto Federal Sul-rio-grandense | câmpus Santana do Livramento 10
Primeiros passos no jQuery
• jQuery possui um método para iniciar somente quando os
elementos do DOM já estão prontos para ser manipulados na página,
por isso usamos o .ready
<p>Texto da tag P</p>
<script>
jQuery(document).ready(function(){
alert( jQuery(‘p’).text());
});
</script>
Instituto Federal Sul-rio-grandense | câmpus Santana do Livramento 11
Primeiros passos no jQuery
• No jQuery, podemos usar: jQuery() ou $()
• Abaixo, temos o primeiro exemplo que fizemos, mas agora usando o
cifrão:
<p>Texto da tag P</p>
<script>
$(document).ready(function(){
alert( $(‘p’).text() );
});
</script> Instituto Federal Sul-rio-grandense | câmpus Santana do Livramento 12
Seletores do jQuery
• Para selecionar elementos DOM HTML no jQuery, os seletores são
as formas mais usadas, eles podem ser chamados assim:
$(‘seletor CSS’)
• Agora vemos como era um seletor padrão do Javascript:
$(document.getElementById(‘id’))
Ou também:
$(‘id’)
Instituto Federal Sul-rio-grandense | câmpus Santana do Livramento 13
Seletores básicos no jQuery
Instituto Federal Sul-rio-grandense | câmpus Santana do Livramento 14
Criando elementos DOM
• Para criar elementos com DOM, usamos:
append()
$(seletor).append(‘conteúdo’);
ou appendTo()
$(‘conteúdo’).appendTo(seletor);
Instituto Federal Sul-rio-grandense | câmpus Santana do Livramento 15
Recuperando Valores de
Atributos
• Para recuperar valores de elementos com DOM, usamos:
attr()
Para recuperar um valor:
$(seletor).attr(atributo);
Para alterar um valor:
$(seletor).attr(atributo, novoValor)
Instituto Federal Sul-rio-grandense | câmpus Santana do Livramento 16
Removendo e Substituindo
elementos DOM
• Para substituir elementos com DOM, usamos replaceWith() e para
remover usamos remove():
Substituir um elemento:
$(‘p’).replaceWith(‘Enviar’);
Remover elemento:
$(‘p’).remove();
Instituto Federal Sul-rio-grandense | câmpus Santana do Livramento 17
Inserindo HTML e textos em
elementos DOM
• Para inserir código HTML e textos em elementos com DOM,
usamos html() e para inserir código e text() para colocar textos:
Inserir HTML:
$(‘p’).html(‘<strong>Método html</strong>’);
Inserir texto:
$(‘p’).text(‘Método text’);
Instituto Federal Sul-rio-grandense | câmpus Santana do Livramento 18
Inserindo HTML e textos em
elementos DOM
• Para inserir código HTML e textos em elementos com DOM,
usamos html() e para inserir código e text() para colocar textos:
Inserir HTML:
$(‘p’).html(‘<strong>Método html</strong>’);
Inserir texto:
$(‘p’).text(‘Método text’);
Instituto Federal Sul-rio-grandense | câmpus Santana do Livramento 19
Outros métodos do jQuery
Além do que já foi mostrado em aula, você pode visualizar
outros métodos interessantes da jQuery aqui:
https://www.w3schools.com/jquery/jquery_ref_html.asp
Instituto Federal Sul-rio-grandense | câmpus Santana do Livramento 20
Eventos no jQuery
• De acordo com www.w3schools.com, aqui temos os eventos
comumente usados no jQuery:
Instituto Federal Sul-rio-grandense | câmpus Santana do Livramento 21
Escondendo e mostrando um
elemento usando o evento click
• Para esconder um certo elemento, podemos utilizar o método hide()
e para mostrar usamos o método show().
$(‘p’).click(function(){
$(this).hide();
});
$(‘b1’).click(function(){
$(‘p’).show();
});
Instituto Federal Sul-rio-grandense | câmpus Santana do Livramento 22
Escondendo e mostrando um
elemento usando o evento click
• Para esconder ou mostrar um elemento, também podemos usar o efeito
toggle(), que irá alterar o estado do elemento para escondido ou amostra,
dependendo de como o elemento estiver no momento.
<button id=‘b1’>Trocar</button>
<p>Teste</p>
<script>
$(‘#b1’).click(function(){
$(‘p’).toggle();
});
</script>
Instituto Federal Sul-rio-grandense | câmpus Santana do Livramento 23
Sabendo quando o mouse está em
cima do elemento e quando sai
• Para sabermos se o mouse passou sobre um elemento, usamos o evento
mouseenter().
<p>Teste</p>
<script>
$(‘p’).mouseenter(function(){
alert(‘mouse está sobre o elemento’);
});
</script>
Instituto Federal Sul-rio-grandense | câmpus Santana do Livramento 24
Sabendo quando o mouse está em
cima do elemento e quando sai
• Para sabermos se o mouse saiu de um elemento, usamos o evento
mouseleave().
<p>Teste</p>
<script>
$(‘p’).mouseleave(function(){
alert(‘o mouse saiu do elemento’);
});
</script>
Instituto Federal Sul-rio-grandense | câmpus Santana do Livramento 25
Utilizando múltiplos eventos no
mesmo elemento
• Nesse exemplo, podemos ver como é possível colocar mais de um evento
em um elemento:
$(document).ready(function(){
$(‘p’).on({
mouseenter: function(){
$(this).css(“background-color”,”lightgray”);
},
click: function(){
$(this).css(“background-color”,”yellow”);
}
});
});
Instituto Federal Sul-rio-grandense | câmpus Santana do Livramento 26
Atividade
Vamos fazer uma página simples de comentários usando o jQuery,
para isso teremos um campo onde a pessoa possa escrever os
comentários, um botão enviar para que o comentário possa aparecer
na tela e uma lista de comentários logo abaixo do campo e botão
enviar. Para adicionar os comentários, use o append() ou html() e para
enviar um comentário, use o evento click() no botão de enviar.
Instituto Federal Sul-rio-grandense | câmpus Santana do Livramento 27
Referências
• SILVA, Maurício Samy. JavaScript - Guia do programador. São
Paulo : Novatec Editora, 2010.
• http://docs.jquery.com/Main_Page
• https://www.w3schools.com/jquery/
• https://www.w3schools.com/jquery/jquery_ref_html.asp
Instituto Federal Sul-rio-grandense | câmpus Santana do Livramento 28
