logo javascript

Aprenda javascript com facilidade do zero

Prof. Ivan Lourenço Gomes

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.

Índice de Aulas