Introdução ao JQuery

CursoPHP Moderno: Criando uma aplicação com área administrativa

De certa forma você já deve ter navegado em alguma página WEB onde possui um slide de imagens, efeitos de exibir ou ocultar elementos entre outros aspectos maravilhosos, saiba que a grande parte deles é feito utilizando o JQuery.

JQuery não é uma linguagem de programação, ele é um Framework Javascript. Todo seu código é escrito utilizando o Javascript, onde é implementado funções, variáveis e muitos outros elementos que formam o JQuery. A versão final deste Framework nos possibilita criar aplicações escrevendo muito pouco.

O JQuery é utilizado em diversas bibliotecas para outras funcionalidades, como: Mascara de formulários, Materialize CSS, Bootstrap, Metro UI entre outro.

O site oficial do JQuery é: https://jquery.com. Se você não for um desenvolvedor que deseja alterar o código do Framework, faça o Download da versão comprimida, pois ela vem otimizada para ser carregada mais rápido em nossos servidores.

Vamos analisar no código abaixo duas formas de se inserir um valor em um campo de texto, note que o Javascript nativo o código é maior e utilizando o JQuery é bem mais simples.

Código 01:

<script>
	//Método nativo do Javascript
	document.getElementById("elemento").value = "Olá mundo!";
	
	//Método utilizando o JQuery
	$("#elemento").val("Olá mundo!");
</script>

Agora algo muito importante que você precisa saber, o JQuery é processado pelo Javascript, ou seja, nosso algoritmo depende de um segundo processamento para executar nossas necessidades, logo ele torna nosso código um pouco mais lento, as vezes isto é imperceptível!

Utilizando o método nativo do Javascript garantimos que o nosso código seja executado imediatamente assim que for chamado, utilizando via JQuery o nosso navegador terá que carregar todo o código JQuery para que ele possa fazer as execuções.

Antes de começarmos recomendo que leia o artigo a seguir, pois ele explica como criar os elementos HTML com Javascript e como o DOM monta sua árvore. https://satellasoft.com/artigo/javascript/criando-elementos-com-javascript.

Vamos começar!

Uma vez com o script em seu computador, é necessário incorpora-lo ao nosso documento HTML, você pode incluir no cabeçalho da página ou no corpo. Neste exemplo foi incorporado antes de fechar o corpo, assim garantimos que o JQuery será carregado depois que todo nosso HTML estiver pronto.

Código 02:

<!doctype html>
<html lang="pt-br">
	<head>
		<title>Introdução ao JQuery</title>
		<meta charset="utf-8" />
	</head>
	<body>
		
		<!--Incorporando o JQuery ao documento HTML-->
		<script src="jquery-3.1.0.min.js"></script>
	</body>
</html>

Antes de tentarmos acessar qualquer elemento HTML com Javascript, temos que verificar ele todos nossos elementos realmente foram carregados, caso contrário um erro ocorrerá informando que o elemento não existe.

Você vai se deparar muito com o código abaixo, ele nada mais é do que uma instrução que verifica se o documento está carregado.

Código 03:

<!doctype html>
<html lang="pt-br">
	<head>
		<title>Introdução ao JQuery</title>
		<meta charset="utf-8" />
	</head>
	<body>
		
		<!--Incorporando o JQuery ao documento HTML-->
		<script src="jquery-3.1.0.min.js"></script>
		
		<script>
			$(document).ready(function(){
				alert("Documento carregado.");
			});
		</script>
		
	</body>
</html>

Imagino que o código acima ficou um pouco confuso, pois bem, vamos entender como ele trabalha. O código abaixo está comentado e explica corretamente como o JQuery trabalha em sua forma simples.

Código 04:

<script>

	$("SeletorHTML").AcaoDesejada(); //Primeiro especificamos o elemento HTML em seguida a sua ação.
	
	$("input").show("slow"); //Todos elementos INPUT terão um feito show (será exibido) um pouco lento.
	
	//Quando o botão for clicado, chama a função especificada;
	$("#btnMostrar").click(function(){
		alert("Clicado!!!");
	});
</script>

Vamos criar um exemplo para que quando um botão for pressionado uma imagem será exibida.

Código 05:

<!doctype html>
<html lang="pt-br">
	<head>
		<title>Introdução ao JQuery</title>
		<meta charset="utf-8" />
	</head>
	<body>
		
		<img src="http://satellasoft.com/img/logo.png" alt="Logo SatellaSoft" title="Logo SatellaSoft" id="imgLogo" />
		
		<br />
		
		<input type="button" id="btnMostrar" value="Exibir" />
		<!--Incorporando o JQuery ao documento HTML-->
		
		<script src="jquery-3.1.0.min.js"></script>
		
		<script>
			$(document).ready(function(){
				$("#imgLogo").hide(); //Oculta a imagem quando o documento for carregado
				
				$("#btnMostrar").click(function(){
					//Valores para o Show: slow, normal e fast
					$("#imgLogo").show("fast");
				});
				
			});
		</script>
		
	</body>
</html>

No próximo exemplo vamos manter o exemplo anterior e adicionar a propriedade border do CSS ao elemento IMG.

Código 06:

<!doctype html>
<html lang="pt-br">
	<head>
		<title>Introdução ao JQuery</title>
		<meta charset="utf-8" />
	</head>
	<body>
		
		<img src="http://satellasoft.com/img/logo.png" alt="Logo SatellaSoft" title="Logo SatellaSoft" id="imgLogo" />
		
		<br />
		
		<input type="button" id="btnMostrar" value="Exibir" />
		<!--Incorporando o JQuery ao documento HTML-->
		
		<script src="jquery-3.1.0.min.js"></script>
		
		<script>
			$(document).ready(function(){
				$("#imgLogo").hide(); //Oculta a imagem quando o documento for carregado
				
				$("#btnMostrar").click(function(){
					//Valores para o Show: slow, normal e fast
					$("#imgLogo").show("fast");
					
					//Atribuindo CSS ao elemento IMG usando Jquery. Utilizamos o .css e especificamos qual será sua propriedade e valor
					$("#imgLogo").css("border", "2px solid blue");
				});
				
			});
		</script>
		
	</body>
</html>

Para o próximo exemplo, vamos obter o nome informado em um campo e inseri-lo no campo seguinte, note que para isto vamos utilizar uma variável opcional.

Código 07:

<!doctype html>
<html lang="pt-br">
	<head>
		<title>Introdução ao JQuery</title>
		<meta charset="utf-8" />
	</head>
	<body>
		
		<input type="text" id="txtNome" placeholder="Insira seu nome" /><br />
		<input type="text" id="txtExibeNome" placeholder="" /><br />
		<input type="button" id="btnExibeNome" value="Exibir" /><br />
		
		<script src="jquery-3.1.0.min.js"></script>
		
		<script>
			$(document).ready(function(){
				
				$("#btnExibeNome").click(function(){
				
					//Criamos uma variável e atribuimos a ela o valor do elemento txtNome
					var nome  = $("#txtNome").val();
					
					//Atribuimos ao evento val() o valor obtido pela variável nome
					$("#txtExibeNome").val(nome);
					
				});
				
			});
		</script>
		
	</body>
</html>

Para finalizamos, vamos agora alterar os seletores que contenham determinada class, para isto ao invés de ‘#’ vamos utilizar o ‘.’, onde:

# = Indica atributos ID;
. = Indica atributos class.

Código 08:

<!doctype html>
<html lang="pt-br">
	<head>
		<title>Introdução ao JQuery</title>
		<meta charset="utf-8" />
	</head>
	<body>
		
		<ul>
			<li class="text">Olá mundo!</li>
			<li class="text">Olá mundo!</li>
			<li class="text">Olá mundo!</li>
			<li class="text">Olá mundo!</li>
			<li class="text">Olá mundo!</li>
			<li class="text">Olá mundo!</li>
		</ul>
		
		<input type="button" id="btnAlterar" value="Alterar" />
		
		<script src="jquery-3.1.0.min.js"></script>
		
		<script>
			$(document).ready(function(){
				
				$("#btnAlterar").click(function(){
					//Acessamos todos os elementos com a class text e alteramos a cor para Azul e seu tamanho para 20px.
					$(".text").css({"color" : "blue", "font-size" : "20px"});
				});
				
			});
		</script>
		
	</body>
</html>

Finalizamos por aqui este artigo, espero que tenham gostado e aprendido.