jQuery - Introdução
jQuery é uma biblioteca Javascript que simplifica o uso da linguagem, requerendo menos linhas de código para fazer mais. Vejamos a diferença, por exemplo, da manipulação do CSS para elementos de uma classe específica:
Vanilla Javascript*:
var elementos = document.getElementsByClassName("exemplo");
for (var a = 0; a < elementos.length; a++) {
elementos[a].style['background-color'] = "black";
}
* Quando usamos o Javascript puro sem nenhuma biblioteca ou framework, como fizemos até agora,
usamos o termo Vanilla Javascript.
jQuery:
$(".exemplo").css("background-color", "black");
Com jQuery é possível manipular elementos do DOM e o CSS, monitorar eventos, fazer efeitos e animações além de fazer pedidos AJAX, temas que vamos ver mais adiante no curso.
jQuery roda em todos os navegadores e possui plugins para fazer com facilidade diversas funcionalidades, como galerias de fotos, grids, sliders, popups, validação de formulários e muito mais.
Instalação do jQuery
Para começar a usar o jQuery precisamos fazer o download do arquivo Javascript com todo o código da biblioteca. Para isso, vá até http://jquery.com/download/ e faça o download da versão comprimida mais recente. Pode ser que ao em vez de iniciar o donwload do arquivo, o código abra em formato texto no navegador. Se isso acontecer, pressione CTRL + A para selecionar tudo e CTRL + C para copiar. Depois abra um novo arquivo na pasta js, cole o código e salve o arquivo com a extensão '.js', por exemplo 'jquery.js'.
Se você estiver usando a versão comprimida (sem espaços e sem indentação), é uma boa prática incluir '.min' ao nome do arquivo para identificá-lo. É também interessante identificar a versão do jQuery que estamos utilizando. Desta forma o nome do arquivo ficaria "jquery-3.3.1.min.js"
Agora é só fazer o link nas páginas onde usaremos jQuery, assim como fazemos com qualquer arquivo Javascript:
<script src="jquery-3.3.1.min.js"></script>
No início do curso, vimos que o local mais apropriado para incluir as tags script é ao final do documento, antes de fechar o elemento body. Porém, no caso do jQuery, é mais recomendável incluí-lo dentro da seção head já que algumas funcionalidades da página podem depender do jQuery, portanto queremos garantir que ele seja carregado antes de qualquer outro script.
Agora que já temos o jQuery devidamente instalado, podemos começar a usá-lo. Na próxima aula vamos aprender a sintaxe os comandos básicos desta biblioteca.