Substituindo o código JavaScript comum por funções da jQuery

Com intuito de demonstrar o quanto jQuery é mais produtivo e menos propenso a erros em relação a JavaScript puro (devido a menor quantidade de código e a menor complexidade do mesmo), nesta seção, iremos apresentar as funções Javascript que iremos no fim da aula utilizar para alterar os arquivos JSP tanto com o código JavaScript puro (comentado, não será executado) como o código jQuery (não comentado e que efetivamente serão executados) para que seja possível se fazer uma comparação.

Vamos apresentar várias funções Javascript/jQuery novas que serão utilizadas no projeto e mais a frente o código final modificado, então por enquanto somente mantenha a atenção nas diferenças entre utilizar ou não JQuery.

Comecemos pela função verDetalhes(), do arquivo catalogo.jsp, mostrada a seguir. No código dessa função, você pode ver tanto o código antigo, comentado com //, como o novo, bem mais simples e enxuto.

Vamos ver agora a nova função verCatalogo(). Repare que se o código fosse escrito em Javascript puro, sem o uso do jQuery, você precisaria manipular valores de estilo CSS diretamente enquanto com jQuery basta se utilizar os métodos show() e hide() para obter o mesmo resultado (mostra/esconder um elemento). O arquivo que irá futuramente conter essa função é o catalogo.jsp. Veja a função verCatalogo() abaixo:

Ainda no mesmo arquivo, iremos ter a função carregarDetalhes(). O código Javascript puro está comentado com /* e */. É interessante ver que, mesmo com o uso do do Ajax no Javascript puro, o código jQuery é muito mais simples e fácil de entender.

JQuery realmente ajuda a simplificar o código não é mesmo? Imagina ter que fazer um sistema completo somente utilizando Javascript puro… seria muito mais trabalhoso. Veja também como ficará a nova função adicionarLivro():

Após comparar o JavaScript puro (comentado nos trechos acima) com o código jQuery que desempenha o mesmo propósito, é notável que é o código jQuery é menor, mais simples e mais legível.