Desenvolvimento para a Web

Prof. Ms. Patrícia Noll de Mattos

Aula 8
 Introdução ao JQuery
• jQuery é uma biblioteca Javascript que simplifica o uso da
linguagem, requerendo menos linhas de código para fazer mais.
• Vamos ver um exemplo:
 Introdução ao JQuery
• Com jQuery é possível manipular elementos do
DOM e o CSS, monitorar eventos, fazer efeitos e
animações além de fazer pedidos AJAX.
• Ele roda em todos os navegadores e possui
plugins para fazer com facilidade diversas
funcionalidades, como galerias de fotos, grids,
sliders, popups, validação de formulários,
dentre outros.
 Instalação

• Realizar o download do arquivo Javascript com

todo o código da biblioteca.
http://jquery.com/download/
 Instalação
• Se você estiver usando a versão comprimida (sem espaços e
sem indentação), é uma boa prática incluir '.min' ao nome do
arquivo para identificá-lo.
• É também interessante identificar a versão do jQuery que
estamos utilizando. Desta forma o nome do arquivo ficaria
"jquery-3.5.1.min.js“
• Agora é só fazer o link nas páginas onde usaremos jQuery, assim
como fazemos com qualquer arquivo Javascript:

<script src="jquery-3.5.1.min.js"></script>
 Instalação

• Sabemos que o local mais apropriado para incluir as

tags script é ao final do documento, antes de fechar o
elemento body.
• Porém, no caso do jQuery, é mais recomendável incluí-lo
dentro da seção head já que algumas funcionalidades da
página podem depender do jQuery, portanto queremos
garantir que ele seja carregado antes de qualquer outro
script.
 Sintaxe do JQuery

• Praticamente tudo que fizermos em jQuery começará

com um cifrão '$'. A sintaxe básica dos comandos
jQuery é:

• $("elemento").ação();
 Selecionando elementos
• Para identificar os elementos usamos seletores, como
em CSS.
• Elementos da classe exemplo, serão identificados com
ponto: ".exemplo".
• Elemento com o id exemplo será identificado pela
hashtag: ("#exemplo").
• As tags podem ser selecionadas diretamente: ("h1"),
("p"), etc.

• As ações são métodos jQuery,

 Execução e uma ação
Supondo os elementos a seguir:
<div class="exemplo">1</div>
<div class="exemplo">2</div>
<div class="exemplo">3</div>
<div id="esconder">Esconder</div>

Vamos esconder todos os elementos que tenham a classe

"exemplo" ao clicar no botão que tem id "esconder".

$( "#esconder" ).click(function() {
$(".exemplo").css("display", "none");
});
 Outros métodos

Existe o método hide que aplica automaticamente

"display: none" aos elementos selecionados.

$( "#esconder" ).click(function() {
$(".exemplo").hide();
});
Formas de selecionar elementos
 Manipulação do conteúdo HTML

• O método html é equivalente à propriedade innerHTML

• Ele serve tanto para pegar o conteúdo html de um
elemento, quanto para defini-lo.
var conteudo_html = $("#paragrafo-html").html();
console.log(conteudo_html);

$("#paragrafo-html").html("Mudar conteúdo do parágrafo");

 Manipulação do conteúdo Text

O método text é semelhante ao método html, mas

ele pega apenas o conteúdo em texto do elemento,
ignorando as tags html.

var conteudo_texto = $("#paragrafo-text").text();

console.log(conteudo_texto);
 Manipulação de atributos html
O método attr é usado para manipular os atributos html,
como "src", "href", "target", etc.

// Pegar o valor atual do href:

var url_link = $("#paragrafo-link").attr("href");
console.log(url_link);

// Trocar o valor do href:

$("#paragrafo-link").attr("href", "http://www.unisinos.br");
url_link = $("#paragrafo-link").attr("href"); console.log(url_link);
 Manipulação de atributos html
Vamos agora trocar o src de uma imagem ao clicar
em um botão:

//alterar imagem ao clicar no botão

$("#mudar_imagem").click(function(){
$("#imagem_js").attr("src", "https://nova_imagem.png");

//esconder o botão
$("#mudar_imagem").hide();
});
 Métodos .empty() e .remove()
Para apagar todo o conteúdo de um elemento, podemos definir
um string vazio com o método html:

$("#paragrafo-empty").html("");

Métodos empty e remove:

O primeiro apaga apenas o conteúdo do elemento enquanto o
segundo remove o elemento.
// Remover o conteúdo, mantendo o elemento:
$("#paragrafo-empty").empty();
// Remover o elemento:
$("#paragrafo-empty").remove();
 jQuery - Loop Each
O loop each pode ser usado tanto em arrays quando em
objetos, ou seja, pode substituir tanto o loop for quanto o
loop for/in.

$.each(array ou objeto, função(a,b) {

// código a ser repetido
});

Na função passada no loop each, temos dois argumentos,

representados acima pelas variáveis a e b, que representam
o índice/chave e o valor de cada elemento.
 jQuery - Loop Each
// Aplicação do loop each em um array:

var lista = ["HTML","CSS","Javascript", "jQuery", "PHP"];

$.each(lista, function( indice, valor ) {

console.log('O elemento de índice [' + indice + '] tem o
valor de ' + valor);
});
 jQuery - Loop Each
// Aplicação do loop each em um objeto:
var pessoa = { 'nome': 'João Pedro', 'DN': '20/01/1990', 'CPF':
'111.111.111-11’ };

$.each(pessoa, function( chave, valor ) {

console.log('O elemento de chave [' + chave + '] tem o valor
de ' + valor);
});
 Percorrendo um array de elementos HTML
Vamos percorrer os elementos da <ul> abaixo que tem o
id="interesses" e apresentá-los no console com o loop
each:

var interesses = $("#interesses li");

$.each(interesses, function( indice, valor )
{ console.log(valor); })
 Para ver o texto de cada elemento

var interesses = $("#interesses li");

$.each(interesses, function( indice, valor ) {
console.log($(valor).text());
});
// Se fizermos console.log(valor.text()); teríamos um erro na
execução do código
 Formulários - input
O método val é utilizado para pegar ou definir valores de campos
de formulário.

<p style="margin-bottom: 5px">Nome:</p>

<input id="campo_nome" type="text" value="João da Silva" style
="margin: 0">

var conteudo_input = $("#campo_nome").val();

console.log(conteudo_input);
 Formulários - input
O método val é utilizado para pegar ou definir valores de campos
de formulário.

<p style="margin-bottom: 5px">Nome:</p>

<input id="campo_nome" type="text" value="João da Silva" style
="margin: 0">

$("#campo_nome").val(“Maria Santos");
conteudo_input = $("#campo_nome").val();
console.log(conteudo_input);
 Formulários - Select Box
Para pegar o valor da opção selecionada em select box, podemos usar o
método val(), que retorna o valor do atributo value da opção selecionada.

<h5>Select Box</h5>
<form>
<select id="options">
<option value="opt1">Praia</option>
<option value="opt2">Montanha</option>
<option value="opt3">Cidade</option>
</select>
</form>

var valor_selecionado = $('#options').val();

console.log(valor_selecionado);

//retorna opt1
 Formulários - Select Box
Para conseguir pegar o texto dentro da opção, não podemos usar o método
text() ou html() pois isto retorna todas as opções que estão no select, e não
apenas a opção selecionada. Mas isto pode ser resolvido com o método
find(), que serve para procurar algo dentro de algum elemento.

Neste caso, vamos procurar dentro da select box pelo elemento que esteja
com o atributo selected, e então vamos usar o método text() para pegar o
texto desta opção.

var texto_selecionado = $('#options').find(":selected").text();

console.log(texto_selecionado);

//retorna Praia
 Formulários - Select Box
Agora podemos atualizar o valor selecionado sempre que a opção for alterada
usando o método change.

$("#options").change(function(){
var novo_selecionado = $('#options').find(":selected").text();
console.log(novo_selecionado);
});

//Ao alterar a seleção, pega o novo valor selecionado

 Formulários - Radio Buttons
A forma de pegar o valor do radio button selecionado é parecida com a do
select box. A diferença é que neste caso, as opções que fazem parte deste
conjunto de radio buttons tem o atributo name="genero", portanto buscamos
o elemento desta maneira para pegar o value da opção selecionada:

<form>
<span><input type="radio" name="genero" value="M" checked> Masculino</span><br>
<span><input type="radio" name="genero" value="F"> Feminino</span><br>
<span><input type="radio" name="genero" value="NONE"> Prefiro não dizer</span>
</form>

var valor_radio_selecionado = $("input[name='genero']:checked").val();

console.log(valor_radio_selecionado);

//Seleciona pelo gênero, mostra o valor

 Formulários - Radio Buttons
Para pegar o texto da opção selecionada, basta procurar o elemento
selecionado e depois selecionar o elemento pai com o método parent() e
pegar o seu texto.

<form>
<span><input type="radio" name="genero" value="M" checked> Masculino</span><br>
<span><input type="radio" name="genero" value="F"> Feminino</span><br>
<span><input type="radio" name="genero" value="NONE"> Prefiro não dizer</span>
</form>

var texto_radio_selecionado =
$("input[name='genero']:checked").parent('span').text();
console.log(texto_radio_selecionado);
//Seleciona pelo gênero, pega o selecionado e mostra o texto do pai.
 Formulários - Radio Buttons
Agora podemos atualizar sempre que a opção for alterada:

<form>
<span><input type="radio" name="genero" value="M" checked> Masculino</span><br>
<span><input type="radio" name="genero" value="F"> Feminino</span><br>
<span><input type="radio" name="genero" value="NONE"> Prefiro não dizer</span>
</form>

$("input[name='genero']").change(function() {
var novo_radio_selecionado =
$("input[name='genero']:checked").parent('span').text();
console.log(novo_radio_selecionado);
});
 Formulários - CheckBoxes
A forma de pegar os valores selecionados de checkboxes é parecida com a dos radio
buttons. Mas vamos lembrar que no caso dos checkboxes, várias opções podem ser
selecionadas ao mesmo tempo, portando temos que trabalhar com um array.

<form>
<span><input type="checkbox" name="interesse" value="DFE"> Desenvolvimento Front-
End</span><br>
<span><input type="checkbox" name="interesse" value="DBE"> Desenvolvimento Back-
End</span><br>
<span><input type="checkbox" name="interesse" value="Design"> Design</span>
</form>

$(“input[name='interesse']").change( function() {
var checkboxes_selecionados = $("input[name='interesse']:checked");
var textos = [];
$.each(checkboxes_selecionados, function( index, value ) {
textos.push($(value).parent("span").text());
});
console.log(textos); });