JQuery/Funcionamento
| JQuery | ||
| Funcionamento | ||
Aquí aprenderemos como funciona JQuery, dende cero, cun exemplo simple que poida seguirse paso a paso.
Ficheiro HTML inicial
editarO primeiro será crearmos un ficheiro HTML sobre o que traballar. Dado que JavaScript é unha linguaxe do lado do cliente e JQuery é unha biblioteca de JavaScript, non será necesario en ningún momento dispoñermos dun servidor web. Abondará con crear un ficheiro de texto simple coa extensión .html nun cartafol calquera.
Unha vez teñamos o ficheiro de texto simple, procederemos a enchelo co seguinte código HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Probas con JQuery</title>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<script src="jquery.js"></script>
<script>
</script>
</body>
</html>
Na liña 9 indícase onde está a copia da biblioteca JQuery. Se a descargamos no mesmo cartafol no que o documento HTML, poderemos deixar a liña de código tal cual está, senón haberá que cambiar o valor da propiedade src.
Execución de código unha vez estea cargado o documento
editarO primeiro que fan moitos dos programadores de JavaScript é engadir algo de código ao seu documento HTML, como por exemplo:
window.onload = function(){ alert("Funciona!"); }
Dentro de window.onload = function() vai o código a executar xusto tras cargarse o documento. O problema é que o código JavaScript non se dá executado ata que todas as imaxes rematan de cargarse (incluíndo as de publicidade). O motivo para empregar window.onload é que senón o código JavaScript executaríase antes de que o «documento» HTML acabase de cargarse.
Para solucionar ambos os dous problemas, JQuery emprega unha única sentencia que analiza o documento e espera a que estea preparado para ser manipulado, o evento ready:
$(document).ready(
function()
{
// Aquí iría o código.
}
);
Engade dita sentencia ao teu documento HTML, dentro do segundo elemento script (entre as liñas 10 e 12 do código inicial). Unha vez feito, dentro do evento ready, engade un xestor de presións nas ligazóns (neste caso só haberá unha, na liña 8 do código inicial):
$(document).ready(
function()
{
$("a").click(
function(event)
{
alert("Grazas pola súa visita.");
}
);
}
);
| JQuery | ||
| Funcionamento | ||