Introdução ao jQuery

Imprimir

Introdução ao Framework jQuery

Adaptação da apostila da Caelum – Introdução à web:

https://www.caelum.com.br/download/caelum-html-css-javascript-php.pdf

A principal vantagem na adoção de uma biblioteca de JavaScript é permitir uma maior compatibilidade de um mesmo código com diversos navegadores. Uma maneira de se atingir esse objetivo é criando funções que verificam quaisquer características necessárias e permitam que o programador escreva um código único para todos os navegadores.

Além dessa vantagem, o jQuery, que é hoje a biblioteca padrão na programação front-end para Web, traz uma sintaxe mais “fluida” nas tarefas mais comuns ao programador que são: selecionar um elemento do documento e alterar suas características.

Com ela é possível selecionar elementos com maior facilidade, maior compatibilidade, e com menos código.

Por exemplo. Veja a diferença dos códigos:

// JavaScript "puro"

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

if (cabecalho.attachEvent) {

cabecalho.attachEvent("onclick", function (event) {

alert("Você clicou no cabeçalho, usuário do IE!");

});

} else if (cabecalho.addEventListener) {

cabecalho.addEventListener("click", function (event) {

alert("Você clicou no cabeçalho!")

}, false);

}

// jQuery

$("#cabecalho").click(function (event) {

alert("Você clicou no cabeçalho!");

});

O jQuery é uma biblioteca de Javascript “leve”, fácil de utilizar no sentido “escrever menos, fazer mais”. Esta biblioteca foi desenvolvida por John Resig, um programador de Javascript. O site oficial do JQuery fica em www.jQuery.com.

Atualmente o jQuery é praticamente onipresente em qualquer site da web. Diretamente ou mais ainda em forma de plugin.

 

Plugins com jQuery

17 plugins - http://www.creativebloq.com/jquery/top-jquery-plugins-6133175

5500 plugins - http://www.jqueryrain.com/

 

Exemplo em jQuery e JavaScript

Um código em Javascript puro, para atribuir o valor "5" em um elemento qualquer.

document.getElementById( 'Teste' ).value = 5;




O mesmo código em jQuery.






$( '#Teste' ).val( 5 );