Olá, pessoal!
Neste artigo vamos aprender a instalar a biblioteca jQuery e como utilizá-la.
Para iniciar, precisamos incluir a biblioteca javascript em nossa página. Vamos então fazer uma breve pesquisa no Google por "hosted libraries" e acessamos o primeiro link apresentado na pesquisa (proveniente do dominio https://developers.google.com), ou basta clicar AQUI.
Copiamos então a tag "script" do item "2.x snippet" da sessão "jQuery" e a inserimos dentro da tag HEAD de nossa página. Ficará algo parecido com o seguinte:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Seu título</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
</body>
</html>
Agora vamos abordar um pouco a sintaxe de utilização do jQuery.
O jQuery tem duas formas de se trabalhar:
- jQuery;
- $;
Tanto o string "jQuery", quanto o cifrão ($) são referências à função do jQuery criada pela biblioteca jQuery no JavaScript.
Vamos ver como atribuir um valor a um input através de uma comparação entre o JavaScript puro e o jQuery:
<script type="text/javascript">
document.getElementById('input1').value = 100;//JavaScript
$('#input1').val(100);//jQuery
jQuery('#input1').val(100);//jQuery
</script>
As três formas estão corretas e funcionam. A primeira foi efetuada puramente com JavaScript. A segunda e a terceira é jQuery com suas duas formas de aplicação (sendo mais comum o uso do cifrão).
Utilizamos no exemplo acima o seletor do jQuery para selecionar o input através do id ("$('#input1')"), e concatenamos o método val() passando dentro dele o valor que deve ser inserido no value do input.
O exemplo produzirá o seguinte:
<input id="input1" type="text" value="100" />
Assim como o JavaScript, o jQuery trabalha com concatenação de seus métodos e seletores (mesmos seletores que são possíveis no CSS).
Vamos agora testar se o jQuery está funcionando. Vamos programar um alerta quando a página for carregada:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Seu título</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
alert('funcionou a instalação!');
});
</script>
</head>
<body>
</body>
</html>
No seletor selecionamos o documento em si ("$(document)") e concatenamos com o método ready() que executa a função que é passada para ele no callback no momento em que o elemento selecionado pelo seletor estiver pronto/carregado. Em outras palavras, executa a função contida no método ready() quando a página é carregada.
Pronto! o jQuery está pronto para ser utilizado em seu website!
No próximo post sobre jQuery veremos outros tipos mais de seletores e os métodos find() e parent().