Introdução ao JQuery – Seletores e ações

jQuery é uma biblioteca JavaScript criado para facilitar a programação de DOM (Document Objects Manipulation).

As técnicas de programação com DOM são caracterizadas pelo comando document.getElementById pelo qual podemos manipular qualquer elemento identificado no documento HTML.

O JQuery surge como uma opção mais simples de se programar DOM através de seletores e ações.

Seletores e ações.

O JQuery trabalha com o conceito de seletores e ações. Um seletor pode ser um elemento HTML, ou um grupo de elementos, ou, um grupo de classes CSS (manipular CSS com jQuery é mais simples do que com DOM)

Exemplo prático

Considere o seguinte código:

<html>
<head>
 <meta charset="utf-8">
 <title>
 Página com jQuery
 </title>
 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head> 
<body style="font-family: 'Roboto', sans-serif;">
 <h1>Olá jQuery</h1>
 <p> Esta é uma página usando o jQuery </p>
 <p> Dá para fazer muitas coisas legais com jQuery</p>
 <p> Então preste muita atenção!</p>
 <button type="button">Clique Aqui para esconder do texto!</button>
</body> 
</html>

Vamos programar o botão para mudar a cor do texto.

Se fossemos programar com DOM, teríamos ao menos 3 fornas diferentes, talvez a forma mais eficiente seria criar uma DIV para agrupar todos os parágrafos e manipular o style da DIV, ficaria assim;

<html>
<head>
 <meta charset="utf-8">
 <title>
 Página sem jQuery
 </title>
 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head> 
<body style="font-family: 'Roboto', sans-serif;">
 <h1>Olá jQuery</h1>
 
 <div id="textos">
 <p> Esta é uma página que não usa jQuery </p>
 <p> Dá para fazer muitas coisas legais apenas com DOM</p>
 <p> Então preste muita atenção!</p>
 </div>
 <button type="button" onclick="esconderSemJQuery()">Clique Aqui para esconder o texto!</button>
 
 <script>
 function esconderSemJQuery()
 {
 document.getElementById('textos').style.visibility = 'hidden';
 }
 </script>
 
</body> 
</html>

Então perceba que tivemos que tomar o cuidado de criar uma DIV, criar um identificador para a DIV e criar uma função JS. Com jQuery não haveria necessidade de criar a DIV e nem de manipular o style dela.

O mesmo problema poderia ser resolvido da seguinte forma.

<html>
<head>
 <meta charset="utf-8">
 <title>
 Página com jQuery
 </title>
 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head> 
<body style="font-family: 'Roboto', sans-serif;">
 <h1>Olá jQuery</h1>


<p> Esta é uma página usando o jQuery </p>
 <p> Dá para fazer muitas coisas legais com jQuery</p>
 <p> Então preste muita atenção!</p>

<button type="button" onclick="esconderComJQuery()">Clique Aqui para esconder o texto!</button>
 
 <script>
 function esconderComJQuery()
 {
 $("p").hide();
 }
 </script>
 
</body> 
</html>

Entenda o código.

Primeiro, perceba que não precisamos agrupar os parágrafos em DIV e nem precisamos de um ID. Um único comando jQuery resolveu todo o problema.

$(“p”).hide();

  1. O $ determina que estamos usando jQuery e queremos usar um seletor.
  2. O “p” representa o elemento selecionado no seletor. Neste caso o nosso seletor são todos os elementos de parágrafo da página.
  3. O .hide() é uma ação jQuery, usada para esconder o elemento.

Fácil né?

Quais outras ações legais que o jQuery tem?

O fade é uma ação bem legal. Agora, ao invés de esconder os parágrafos, quero que eles sejam carregados lentamente durante a carga da página. Vamos agora criar uma outra página HTML com o seguinte código.

<html>
<head>
 <meta charset="utf-8">
 <title>
 Página com jQuery
 </title>
 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head> 
<body style="font-family: 'Roboto', sans-serif;">
 <h1>Olá jQuery</h1>
 
 <button type="button" onclick="esconderComJQuery()">Clique Aqui para mostrar uma DIV oculta!</button>
 
 <div id="ConteudoOculto" style="display:none">
 <p> Esta é uma página usando o jQuery </p>
 <p> Dá para fazer muitas coisas legais com jQuery</p>
 <p> Então preste muita atenção!</p>
 </div>
 
 <script>
 function esconderComJQuery()
 {
 $("#ConteudoOculto").fadeIn(3000); //3 segundos
 }
 </script>
 
</body> 
</html>

Perceba que agora não manipulamos um elemento, e sim um identificador. O jQuery consegue manipular identificadores usando o simbolo de sharp #

O resultado será este (Clique na imagem para executar o GIF):

Clique na imagem para executar o GIF

Manipulando inputs

Agora vamos fazer um exemplo com inputs de formulários.

<html>
 <head>
 <meta charset="utf-8">
 <title>
 Página com jQuery
 </title>
 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 </head>
 <body style="font-family: 'Roboto', sans-serif;">
 <h1>Olá jQuery</h1>

<label id="valor">5</label>
 <input id="escolheNumero" type="range" min="0" max="10" onchange="MostraNumero()">

<script>
 //Função com JQuery
 function MostraNumero(){
 var valorSelecionado = $('#escolheNumero').val();
 $('#valor').html(valorSelecionado);
 }
 </script>

</body>
 </html>

No exemplo acima, temos o seguinte resultado (Clique na imagem para executar o GIF);

Clique na imagem para executar o GIF

Entenda o código.

  1. O código $(‘#escolheNumero’).val(); é o mesmo que document.getElementById(‘escolheNumero’).value;
  2. O código $(‘#valor’).html(valorSelecionado); é o mesmo que documento.getElementById(‘valor’).innerHTML = valorSelecionado
  3. O mesmo código sem jQuery ficaria assim;
      function MostraNumero(){
     var valorSelecionado = document.getElementById('escolheNumero').value;
     documento.getElementById('valor').innerHTML = valorSelecionado;
     }

Notá-se então que com jQuery o código ficou muito mais simples.