Shefarol Soluções Web

jQuery para iniciante - Voltar

O que é jQuery?

jQuery é uma biblioteca de funções JavaScript que interage com o HTML, desenvolvida para simplificar os scripts interpretados no navegador do cliente.

Não é uma linguagem de programação separada, funciona em conjunto com o JavaScript. Com jQuery, você vai conseguir fazer muito mais com menos

Vantagens do jQuery

Os benefícios de usar o jQuery são substanciais. O slogan “Escreva menos, faça mais” tem tudo a ver com a jQuery. Quando você aprender a como usar jQuery (que é muito fácil), você será capaz de executar todos os tipos de ações com facilidade.

Primeiros passos

jQuery é uma biblioteca de código aberto, mantida por desenvolvedores de todo o mundo. Você pode baixá-la do site oficial JQuery.com ou utilizá-la via CDN aqui.

Ou se preferir...é só copiar aqui e colar no final do seu código!

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Exemplos:

  1. Em nosso primeiro exemplo vamos fazer uma simples animação em uma bolinha, ao clicar em um botão, a bolinha vai deslocar para a direita, vamos usar o método "animate" e ao clicar em outro botão, a bolinha volta para a esquerda

    2. Veja o primeiro exemplo aqui

  2. No segundo exemplo usaremos um alert para mostrar mensagens na tela, ao clicar nos dois primeiros títulos, e no terceiro título bastará passar o mouse sobre ele.
    Neste exemplo, será criao um arquivo externo com as funções e seus respectivos eventos "click" e "hover".

    3. Veja o segundo exemplo aqui

  3. Neste terceiro exemplo a ideia é carregar um select com os nomes de vários navegadores que ao serem selecionados aparecerão em um alert, a seleção pode ser única ou múltipla.

    4. Veja o terceiro exemplo aqui

  4. No quarto exemplo vamos carregar arquivos externos, temos dois botões e cada um é responsável por carregar um arquivo, assim que um deles for clicado, o botãolimpar aparece possibilitando esvaziar nosso "container".
    Vamos usar o método "load" para carregar os arquivos.
    Neste ponto vale ressaltar que para o correto funcionamento, os arquivos precisam estar em um servidor web.

    5. Veja o quarto exemplo aqui

  5. Quinto exemplo, mais uma vez vamos carregar arquivos externos, porém agora um arquivo do tipo .json, o conteúdo lido será formatado em uma lista.

    6. Veja o quinto exemplo aqui

  6. No sexto exemplo o famoso método "slideToggle", criamos caixas com títulos e botões e ao clicar em cada botão será revelado seu conteúdo que estava oculto, clicando novamente o conteúdo será oculto novamente.

    7. Veja o sexto exemplo aqui

 

Seguem os códigos usados nos exemplo acima:

Lembre-se que os códigos devem ficar no final do arquivo, antes do fechamento da tag body.
Obs.: Insira antes dos códigos a chamada do jQuery, no nosso exemplo foi utilizado via CDN.

Chamada jQuery via CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

 

Primeiro exemplo
$(document).ready(function(){
	$(".vai").click(function(){
		$(".bola").animate({
		    left:'1000px'
		});
	});

	$(".volta").click(function(){
		$(".bola").animate({
		    left:'0px'
		});
	});
});

 

Segundo exemplo - Este foi criado em um arquivo externo chamado meuscript.js
$(document).ready(function(){
	$("h1").click(function(){
		alert ("Esta é a mensagem 1");
	});

	$("h2").click(function(){
		alert ("Esta é a mensagem 2");
	});

	$("h3").hover(function(){
		alert ("Esta é a mensagem 3");
	});
});

 

Terceiro exemplo
$("select").change(function(){
	var escolhido = "";
	$("select option:selected").each(function(){
		escolhido += $(this).text() + " ";
	});
	alert("Você escolheu o " + escolhido);
})
.change();

 

Quarto exemplo
$(document).ready(function(){
	// Esconde o botão limpar
	$('#botao3').hide();

	//Abre o conteúdo 1
	$("#botao1").click(function(event){
		$('#caixa').load('conteudo1.html');
		// Mostra o botão limpar
		$('#botao3').show();
	});

	// Abre o conteúdo 2
	$("#botao2").click(function(event){
		$('#caixa').load('conteudo2.html');
		// Mostra o botão limpar
		$('#botao3').show();
	});

	// Quando clicar no botão limpar
	$('#botao3').click(function(event){
		// Esconde o botão limpar
		$('#botao3').hide();
		$('#caixa').text('Conteúdo');
	});
});

 

Quinto exemplo - arquivo principal
$(document).ready(function(){
	$("#botao").click(function(event){
	    $.getJSON('js/linguagens.json', function(v){
	        $('#caixa').html('
Linguagens Web
    ');
	        $('#caixa').append('
  • Linguagem 1: ' + v.linguagem1 + '
    • ');            
	        $('#caixa').append('
  • Linguagem 2: ' + v.linguagem2 + '
    • ');
	        $('#caixa').append('
  • Linguagem 3: ' + v.linguagem3 + '
    • ');
	        $('#caixa').append('
  • Linguagem 4: ' + v.linguagem4 + '
    • ');
	        $('#caixa').append('
  • Linguagem 5: ' + v.linguagem5 + '
    • ');
	        $('#caixa').append('
');
	    });
	});
});

 

Quinto exemplo - arquivo externo
{
	"linguagem1": "HTML - HyperText Markup Language",
	"linguagem2": "CSS - Cascading Style Sheets",
	"linguagem3": "Javascript",
	"linguagem4": "PHP - Hypertext Preprocessor",
	"linguagem5": "Python"
}

 

Sexto exemplo
$(document).ready(function(){
    // Oculta a div conteudo
    $(".conteudo#html").hide();
    // Define o que acontece quando .abre é clicado
    $(".abre#html").click(function(){
        // Aplica a ação de slide ao conteúdo, na velocidade "slow"
        $(".conteudo#html").slideToggle("slow");
    });


    // Oculta a div conteudo
    $(".conteudo#css").hide();
    // Define o que acontece quando .abre é clicado
    $(".abre#css").click(function(){
        // Aplica a ação de slide ao conteúdo, na velocidade "slow"
        $(".conteudo#css").slideToggle("slow");
    });


    // Oculta a div conteudo
    $(".conteudo#jq").hide();
    // Define o que acontece quando .abre é clicado
    $(".abre#jq").click(function(){
        // Aplica a ação de slide ao conteúdo, na velocidade "slow"
        $(".conteudo#jq").slideToggle("slow");
    });
});