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();
- O $ determina que estamos usando jQuery e queremos usar um seletor.
- O “p” representa o elemento selecionado no seletor. Neste caso o nosso seletor são todos os elementos de parágrafo da página.
- 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):
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);
Entenda o código.
- O código $(‘#escolheNumero’).val(); é o mesmo que document.getElementById(‘escolheNumero’).value;
- O código $(‘#valor’).html(valorSelecionado); é o mesmo que documento.getElementById(‘valor’).innerHTML = valorSelecionado
- 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.