Introdução

Adicionar a biblioteca jQuery a uma página

Pode-se incluir a biblioteca jQuery numa página de duas formas:

Descarregar a biblioteca e instalá-la numa pasta do servidor, incluindo o endereço da biblioteca na página:

<head> 
<script src=libs/jquery-3.3.1.min.js"></script> 
</head>

Incluir o endereço da biblioteca a partir de uma CDN (Content Delivery Network):

<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>"> 
</head>

Sintaxe do jQuery

A sintaxe do jQuery é:

$ ( seletor ). ação ()

O seletor é usado para encontrar um ou vários elementos de HTML de uma página.

Esta sintaxe significa que uma ação é executada sobre o(s) elemento(s) encontrados pelo seletor.

O evento $(document).ready()

O evento $(document).ready() ocorre quando toda a página é carregada.

O código jQuery deve estar dentro do evento $(document).ready() :

$(document).ready(function(){ 
   // jQuery methods go here... 
});

Isso é para evitar que qualquer código jQuery seja executado antes que o documento seja carregado totalmente (está pronto).

É uma boa prática aguardar o documento esteja completamente carregado e pronto antes de trabalhar com ele. Isso também permite que possa colocar o código JavaScript antes do corpo do documento, na secção <head>.

Aqui estão alguns exemplos de ações que podem falhar se os métodos são executados antes que o documento esteja totalmente carregado:

Tentando esconder um elemento que não está criado ainda.
Tentando obter o tamanho de uma imagem que não está carregada ainda.