Codificação Front-End
Jquery
Inicialmente, para usar o Jquery em sua máquina, é necessário
fazer o download. Para isso, acesse o site [Link]
e clique em download.
Fonte: [Link]
SENAI 1
Codificação Front-End
Uma nova tela abrirá; escolha a opção do primeiro link,
Download the compressed, production jQuery 3.6.0.
Fonte: [Link]
Copie o código da página e cole-o em um arquivo vazio do
bloco de notas.
Observação: Tenha cuidado com a opção “traduzir esta
página” (para o português), pois pode alterar algumas
funcionalidades do código.
Fonte: [Link]
SENAI 2
Codificação Front-End
Salve o arquivo com o nome [Link]. Caso você
tenha baixado outra versão, lembre-se de alterar o número da
versão, mas a extensão .[Link] precisa ser mantida.
Salvar arquivo
Chame o arquivo pela tag <script> em seu código HTML.
<script type="text/javascript" src="js/[Link]"></script>
<script type="text/javascript" src="js/[Link]"></script>
Tag script
Sintaxe básica
O código Jquery tem início pelo símbolo “$” (cifrão). Dessa
forma, todo início de código será iniciado da seguinte maneira:
$(“ ”), ou seja, cifrão + parêntese + aspas + parêntese.
Sendo:
• $ início da função Jquery;
• parênteses, dentro dos quais serão passados os parâmetros
que serão alterados;
• por fim, as ações que irão ocorrer.
SENAI 3
Codificação Front-End
Nesse exemplo, temos o código escrito em HTML, no qual
adicionamos uma class para a tag de paragrafo <p>.
<div class="section-banner-home">
<section class="texto-exemplo">
<img src="img/[Link]" alt="banner-home">
<h1>Venha conhecer nosso diferencial</h1>
<p class="texto">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis et adipisci
dignissimos delectus quia consectetur saepe. Veritatis esse soluta impedit fuga eaque
beatae nobis ea? Reiciendis exercitationem nisi necessitatibus eligendi.</p>
<a class="btn-banner" href="#" target="_blank">Saiba mais</a>
</section>
</div>
HTML
Imagine que você tem diversas class com o mesmo nome em
seu código. Você terá a opção de selecionar todas (atalho no
VSCode: ctrl + d) ou poderá alterar no seu código script,
passando a seguinte linha:
$("p").removeClass("texto").addClass("texto-paragrafo");
Jquery
Agora, siga o seguinte ao passo a passo:
1º. Iniciamos o código pelo $ e passamos como primeiro
parâmetro “p”, item que queremos alterar.
2º. Em seguida, informamos que queremos remover uma class
e passamos seu nome (“texto”).
3º. Informamos, então, que queremos adicionar a class “texto-
paragrafo”.
Dessa forma, serão removidas todas as class que tiverem o
nome de “texto”, sendo adicionado “texto-paragrafo” em seu
lugar.
SENAI 4
Codificação Front-End
Uma outra vantagem do uso do Jquery é o tamanho da função, quando
comparado ao JavaScript, conforme mostra o exemplo a seguir:
//Javascript
function fadeIn(el){
[Link] = 0;
var last = +new Date();
var tick = function(){
[Link] = +[Link] + (new Date() - last)/400;
last = +new Date();
if(+[Link] < 1){
([Link] && requestAnimationFrame(tick)) || setTimeout(tick,16);
}
};
tick();
}
fadeIn(el);
//Jquery
$(el).fadeIn();
JavaScript – Fonte: Elaborado pela autora.
Ambos os códigos têm a mesma funcionalidade: alterar a
opacidade de um elemento. No entanto, utilizando a biblioteca
Jquery, o código fica simplificado.
Importante
No endereço [Link] é possível encontrar
vários recursos para a implementação de seu código.
SENAI 5
Codificação Front-End
Exemplo de função em formulário
HTML
<div class="container">
<div class="row">
<div class="col-md-8">
<form class="form" id="formExample">
<div class="form-group">
<label class="col-md-4 control-label">Idade</label>
<div class="col-md-6">
<input type="number" class="form-control" id="idade" value="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Profissão</label>
<div class="col-md-6">
<input type="text" class="form-control" id="profissao">
<div class="col-md-8">
<button class="btn btn-primary" disabled>Login</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
HTML
Observe que na tag <button>, há o atributo “disabled”. Iremos
alterar seu estado com Jquery.
JS (JQUERY)
$('#formExample, idade, #profissao').change(function(){
var idade = $('#idade').val();
var profissao = $('#profissao').val();
if(idade > 18 && profissao != null){
$('.btn').removeAttr('disabled');
}else{
$('.btn').attr('disabled');
}
});
Jquery
SENAI 6
Codificação Front-End
Na primeira linha, estamos chamando os ids e passando o
método .change, que tem a função de manipular a alteração
de um elemento. Nesse caso, queremos alterar o estado do
botão que está desabilitado.
Para isso, criamos uma condição com if, que verificará se a
idade é maior que 18 e se a profissão é diferente de nulo. Caso
sejam, o atributo de “disabled” será removido; se não,
permanecerá.
Observe as etapas de validações:
Navegador
Como não há dados, o botão está desabilitado.
Navegador
O primeiro campo foi preenchido, porém o segundo ainda não;
logo, o botão permanece desabilitado.
SENAI 7
Codificação Front-End
Navegador
Após o preenchimento dos dois inputs, o botão foi habilitado.
Agora, sigamos para um exemplo utilizando o operador OR.
O código no HTML será o mesmo, o que iremos alterar será a
lógica.
$('#formExample, idade, #profissao').change(function(){
var idade = $('#idade').val();
var profissao = $('#profissao').val();
if(idade > 18 || profissao != ""){
$('.btn').removeAttr('disabled');
}else{
$('.btn').attr('disabled');
}
});
Jquery
Note que basta apenas uma condição ser verdadeira.
Navegador
SENAI 8
Codificação Front-End
Exemplo de negação:
$('#formExample, idade, #profissao').change(function(){
var idade = $('#idade').val();
var profissao = $('#profissao').val();
if(!(idade > 18) && (profissao != "")){
$('.btn').removeAttr('disabled');
}else{
$('.btn').attr('disabled');
}
});
Jquery
No navegador:
Navegador
Note que 19 é maior que 18, porém mesmo assim o botão
continua desabilitado. Como a condição de idade foi negada, o
valor lógico é alterado; logo, valores menores que 18 liberam o
acesso. Observe:
Navegador
SENAI 9