1.2 O que é jQuery?

O jQuery é uma biblioteca JavaScript gratuita que oferece um conjunto de funcionalidades que simplificam bastante a programação JavaScript, deixando-a mais intuitiva, clara e fácil. O jQuery é construído sobre a linhagem JavaScript, ou seja, tudo o que é feito com jQuery pode ser feito com JavaScript. É importante destacar que o jQuery não é uma linguagem, na verdade ele é JavaScript sendo interpretado pelo navegador web como código JavaScript e respeitando a mesma sintaxe do JavaScript.

1.3 Vantagens do jQuery

O jQuery simplifica bastante o desenvolvimento de código JavaScript. Sua API é intuitiva e de fácil leitura, o que torna a curva de aprendizado da linguagem mais suave. O jQuery implementa uma única API que executa em qualquer browser moderno – até mesmo no Internet Explorer 6 – sem a necessidade de hacks em JavaScript para adaptar o código para cada navegador, pois o jQuery faz esse trabalho por baixo do pano de forma transparente ao programador. Isso economiza um tempo considerável e libera o programador para concentrar-se nas principais funcionalidades de implementação do site. Além disso, os usuários da API se beneficiam também com a liberação de novas versões do jQuery, pois a cada novo release seu site é automaticamente atualizado, bastando apenas a substituição do arquivo de importação do jQuery. Agora, se você escreve todo o seu código em JavaScript, cabe ao próprio desenvolvedor o trabalho de atualizar e manter as funcionalidades do seu site, verificando questões de compatibilidade entre as últimas versões de navegadores.

A seguir veremos exemplos comparativos de códigos JavaScript e o equivalente usando jQuery.

Obtendo uma referência a um elemento pelo seu ID:

// JavaScript

var menu = document.getElementById("menu");

// jQuery

var menu = $("#menu");

Acessando todos os parágrafos da página e modificando a cor de fundo para amarelo:

//JavaScript

var ps = document.getElementsByTagName("p");

for(i=0;i<ps.length;i++)

ps[i].style.backgroundColor = "yellow";

//jQuery

$("p").css("background-color","yellow");

Associando um evento do tipo click ao botão #bto:

// JavaScript

function aviso(){

alert("botão acionado!");

}

function adicionaEvento() {

var el = document.getElementById("bto");

el.addEventListener("click", aviso, false);

}

document.addEventListener("DOMContentLoaded",

adicionaEvento, false);

//jQuery

$("#bto").click(function(){

alert("botão acionado!");

});