jQuery - introduzione


jQuery è un framework javascript creato per semplificare la programmazione lato client delle pagine HTML.

Usando la libreria jQuery è possibile, con poche righe di codice, effettuare svariate operazioni, come ad esempio ottenere l'altezza di un elemento, o farlo scomparire con effetto dissolvenza.

*gestione eventi *
Anche la gestione degli eventi è completamente standardizzata e gestita automaticamente, assieme alla loro propagazione; stessa cosa per quanto riguarda l'utilizzo di AJAX, in quanto sono presenti alcune funzioni molto utili e veloci che si occupano di istanziare i giusti oggetti ed effettuare la connessione e l'invio dei dati.

la funzione jQuery() / $()


esempio

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Prova</title>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<!-- chiamata della libreria -->
<!-- è possibile chiamare jquery direttamente dal cdn
di google -->
<script src="percorso/jquery.js"></script>
</body>
</html>
<script src="jquery.js"></script>
per scaricare in locale jQuery: Downloading jQuery

per introdurre da vari CDN

http://docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery



lanciare il codice all apartenza del documento

abbiamo visto in javascript

window.onload = function(){ alert('welcome'); }

e

<body onload ="function(){ alert('welcome'); }">




Launching Code on Document Ready

The first thing that most Javascript programmers end up doing is adding some code to their program, similar to this:
window.onload = function(){ alert("welcome"); }
Inside of which is the code that you want to run right when the page is loaded. Problematically, however, the Javascript code isn't run until all images are finished downloading (this includes banner ads). The reason for using window.onload in the first place is that the HTML 'document' isn't finished loading yet, when you first try to run your code.
To circumvent both problems, jQuery has a simple statement that checks the document and waits until it's ready to be manipulated, known as the ready event:
$(document).ready(function(){ // Your code here });
Inside the ready event, add a click handler to the link:
$(document).ready(function(){ $("a").click(function(event){ alert("Thanks for visiting!"); }); });
Save your HTML file and reload the test page in your browser. Clicking the link on the page should make a browser's alert pop-up, before leaving to go to the main jQuery page.
For click and most other events, you can prevent the default behaviour - here, following the link to jquery.com - by calling event.preventDefault() in the event handler:
$(document).ready(function(){ $("a").click(function(event){ alert("As you can see, the link no longer took you to jquery.com"); event.preventDefault(); }); });