Jquery - Introdução

Olá caros leitores, blz?

Este artigo é uma introdução básica para aqueles que desejam aprender, utilizar e/ou estudar os conceitos e práticas mais comuns do Jquery.

Você pode estar aprendendo agora ou estudando para uma certificação, então este artigo é para você.

Apesar de, no mundo front-end as "novidades" e tendências serem outras libs como react, ou frameworks como Angular 8 o Jquery ainda está em milhões de site por este mundo afora.

Obs: Parto do pressuposto que vc tenha alguma ideia muito básica do que é o Javascript, caso não o tenha estarei fazendo um breve tutorial aqui em breve ;-)  

Segundo o site https://trends.builtwith.com/javascript/jQuery , está em pouco mais de 66 milhões!!

Vamos ao básico: Jquery é uma biblioteca Javascript que otimiza tarefas e proporciona um alto nível de implementação de rotinas em Javascript de forma muito mais enxuta e otimizada. 

O cara mais importante é o seletor ( $ ), este é a ferramenta inicial para manipular o DOM

"Casca" 

Todo o código será englobado na estrutura:

$(document).ready(

   function(){ 




   }); 

});

Isso nada mais é do que o método que, executa nosso Jquery apenas quando todo o DOM foi carregado "(document).ready" executando uma função function(){  Minhas implementações  }; 

"Casca simplificada"

Vamos deixar mais enxuta essa casca, escrevendo de forma mais elegante a mesma coisa usando inclusive arrow functions ( você pode fazer os exemplos com a primeira Casca se quiser) : 

$().ready( () => {  




   }); 

}); 

Vamos à prática, manipular o DOM com alguns exemplos:

  

Exemplo 1: 

HTML



         <article id="exemplo1">

   <div>

    <h2 id="original1">Mudar este texto</h2>

    <h2 id="mudou1">Mudou para este outro</h2>

    <button id="botao1" type="button">Alterar conteudo</button>

   </div>

  </article>

Estratégia: sempre que a página carregar não mostrar o   <h2 id="mudou1">  e quando o botão for clicado mostrá-lo no lugar do <h2 id="original1">

Com o simples código:

$().ready( 


 () => { 

 $("#mudou1").hide(); 

 $("#botao1").click(function(){

   $("#mudou1").show();

  $("#original1").hide();

  }); 

});

 Conseguimos o seguinte efeito:  

Explicando o código: 

$().ready(   // a página foi carregada




 () => {    // nossa funcao interna que contém nossas implementações Jquery




 $("#mudou1").hide();     // escondo o elemento que tenha i id = "mudou1" sempre que a página carregar




$("#botao1").click(function(){ // obtenho o evento de Click do botão com id = botao1




$("#mudou1").show();  // dentro do evento do botao, mostro o elemento que tenha i id = "mudou1"




$("#original1").hide(); // dentro do evento do botao, escondo o elemento que tenha i id = "original1"

  }); 

}); 

Muito simples não é?

Nos exemplos acima eu manipulei o DOM pelos ids dos elementos mas  podemos fazê-los de inúmeras outras formas ( classe, manipular vários ou apenas 1 elemento do mesmo tipo de uma só vez etc).

Exemplo 2: 

Imagina uma pagina com 2 menus (1 articles): Conceito e exemplo 1.

Vamos manipular o DOM de forma que:

Ao carregar a página seja mostrado somente o artigo Conceito

Ao clicar no link de menu "exemplo 1" seja mostrado somente o artigo Exemplo 1.

MENU: 


<nav>

    <ul>

      <li><a href="#">Conceito</a></li>

      <li><a href="#">Exemplo 1</a></li> 

    </ul>

  </nav>

ARTIGO: CONCEITO


 <article id="conceito"> 

   <div id="banner-message">

   <p>Introdução ao Jquery</p>

  </div> 

  <div id="id1">

   <p> jQuery é uma biblioteca JavaScript.</p>

   <p> Simplifica muito a programação JavaScript.</p> 

  </div> 

 </article>

ARTIGO: EXEMPLO 1






 <article id="exemplo1">

   <div>

    <h2 id="original1">Mudar este texto</h2>

    <h2 id="mudou1">Mudou para este outro</h2>

    <button id="botao1" type="button">Alterar conteudo</button>

   </div>

  </article> 

NOSSO JQUERY 


 $().ready( 

 () => {  

  /* preparar tela, escondendo os elementos e 

    mostrando apenas o article do conceito  */

   $("#exemplo1").hide();  

    

  //CLICOU NO MENU CONCEITO

  $("#linkConceito").click(function(){

   $("#conceito").show();

   $("#exemplo1").hide();

  }); 

  

  //CLICOU NO MENU EXEMPLO 1  

  $("#linkExe1").click(function(){

   $("#conceito").hide();

   $("#exemplo1").show();

   $("#original1").show(); //SEMPRE APARECE ESSE TEXTO PRIMEIRO

   $("#mudou1").hide(); // TEXTO QUE MUDA DENTRO DO EXEMPLO 1

  }); 

  

  //NOSSA IMPLEMENTACAO PARA O EXEMPLO 1 TROCAR SEU TEXTO CONTINUA AQUI

    $("#botao1").click(function(){

   $("#mudou1").show();

   $("#original1").hide();

  }); 

});   

 COMO FICOU:

Esse artigo foi introdutório e em breve trarei mais com muitas técnicas bacanas do Jquery.

Estou à disposição para criticas e pedidos de novos artigos.

Código completo: