jQuery è una ben nota libreria Javascript Web 2.0 light-weight cross-browser, sviluppato da un team guidato da John Resig. jQuery è costruito sulla cima di Sizzle, che è un motore per i selettori CSS scritto in Javascript puro.

La chiave del successo di jQuery è quello di permettere agli sviluppatori di terze parti di aumentare la biblioteca di risorse con l’aggiunta di plugins. Prima di entrare nei detagli dei plugin di jQuery, diamo un concetto di base del framework jQuery e jQuery. Il framework di jQuery può essere rappresentato dallo schema seguente:

Ci sono sei componenti principali nella libreria jQuery:

  1. Cuore e Utilità: questa componente contiene il cuore, le utilità e la librerie per la gestione dei dati utilizzati nella maggior parte di jQuery.
  2. Motore DOM: Il motore DOM opera in cima del motore selettore Sizzle per la gestione dei selettori, per il processing trasversing, per la manipolazione dei nodi DOM e per modificare gli attributi.
  3. Motore CSS: Principalmente per gestire il CSS.
  4. Motore Ajax: Fornisce funzionalità per la comunicazione sincrona o asincrona tra client e server web.
  5. Motore per gli Eventi: Per elaborazione Eventi e manipolazione del tipo bubbling (bolle) degli eventi.
  6. Motore per gli Effetti: Fornire funzione di base per aggiungere effetti di animazione alla pagina web.

jQuery Plugin, d’altra parte, interagisce con ciascuno dei componenti delle librerie jQuery per fornire specifiche funzionalità alla programmazione web. I jQuery-plugins, i componenti jQuery e il motore Sizzle, il tutto insieme forma il framework jQuery.

I programmatori web o i web designer, quindi, possono ottenere vantaggi nel utilizzo del framework jQuery per fornire una migliore interfaccia utente per una migliore user-experience agli utenti finali.

Usando il plugin di jQuery
⤽
La maggior parte dei jQuery-plugins sono rilasciati sotto una certa licenza. I programmatori web e i web designer dovrebbero leggere attentamente i termini descritti nella licenza corrispondente. Nella maggior parte dei casi, i programmatori web o i web designer possono scaricare il plugin per jQuery di cui avevano bisogno e impiegarlo nei loro siti web. Ad esempio, se si vuole utilizzare una nostra libreria jquery.ciaoMondoPlugin.js, in primo luogo, scaricare la libreria jQuery da http://www.jquery.com/ e salvarlo come, ad esempio jquery.js nel tuo sito web.

Il seguente plugin ciaoMondo, lo salviamo sempre nel sito web con, per esempio questo nome jquery.ciaoMondo.js (non è obbligatoria questa nomenclatura, ma raccomandata).

(function($){
	$.fn.extend({
		ciaoMondo : function(options) {
			var defaults = {
				'foo': 'Ciao',
				'bar': 'Mondo'
			};
			var options = $.extend(defaults, options);
			return this.each(function() {
				$(this).html(options.foo + ' ' + options.bar);
			});
		}
	});
})(jQuery);
Poi si può aggiungere il seguente codice nella sezione head di un file HTML
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="jquery.ciaoMondoPlugin.js"></script>
Dopo di che, è necessario specificare quale è il nodo HTML dove si dovrebbe applicare il plug-in.

Per esempio, se lo si vuole aggiungere in un DIV identificato con una classe chiamata ‘saluto’, si dovrà scrivere il seguente codice:

$(function(){
	$('.saluto1').ciaoMondo();
});
o passando dei parametri alla funzione per sovrascrivere i valori predefiniti
$(function(){
	$('.saluto2').ciaoMondo({foo:'Qui tutto', bar:'bene!'});
});
o inserito direttamente dentro della funzione ready() di jQuery, quando la pagina è pronta
$("document").ready({
	$('.saluto3').ciaoMondo({foo:'Addio'});
});
La prima parte $(‘.saluto’) è il selettore; il Motore DOM di jQuery ricerca di tutti i nodi DOM che hanno il nome del selettore e invocare il metodo ciaoMondo. Passando degli argomenti al metodo si sovrascriveranno i parametri di default.
<html>
	<head>
		<TITLE>Ciao Mondo</TITLE>
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="jquery.ciaoMondo.js"></script>
		<script type="text/javascript">
			$("document").ready({
				$('.saluto1').ciaoMondo();
				$('.saluto2').ciaoMondo({foo:'Qui tutto', bar:'bene!'});
				$('.saluto3').ciaoMondo({foo:'Addio'});
			});
		</script>
	</HEAD>
	<BODY>
		<DIV class='saluto1'></DIV>
		<DIV class='saluto2'></DIV>
		<DIV class='saluto3'></DIV>
	</BODY>
</html>
Differenze tra parametri e argomenti
⤽
Un parametro rappresenta un valore da passare alla funzione ometodo al momento della chiamata. Un argomento rappresenta il valore passato al parametro di una funzione o metodo quando quest’ultima viene chiamata.
Prevenire la successiva inclusione della libreria jQuery dopo il plugin
⤽
Ciò può accadere quando si tenta di utilizzare jQuery plugin in “include file” in PHP o ASP. Quindi, ricordardi che il file-plugin per jQuery segue sempre le file della libreria jQuery. Ogni successiva inclusione della libreria jQuery pulirà tutti i plugin che si sono inseriti prima. La nostra demo non funziona nel codice seguente:
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="jquery.ciaoMondoPlugin.js"></script>
  <script type="text/javascript" src="jquery.js"></script>
Comprensione delle specifiche del plugin in jQuery
⤽
Al fine di comprendere le specifiche per jQuery-plugin, è necessario studiare attentamente il documento corrispondente. E si dovrebbe essere in grado di leggere alcuni esempi di codice di base jQuery prima di provare a utilizzare uno di questi plug-in jQuery. Così la comprensione di jQuery è molto importante. Per saperne di più su jQuery, visitare sempre il sito di jQuery: http://www.jquery.com/
Similari
⋮ Migliorare lo sviluppo dei plugins di jQuery ⋮
12% Plugins ⊚
Ci sono dei favolosi plugin per jQuery. I migliori sono quelli adottati da migliaia di sviluppatori web in tutto il mondo. Fortunatamente, i peggiori falliscono e scompaiono nell’oscurità. Ecco alcuni suggerimenti per gara…
⋮ La rivoluzione dello Javascript ⋮
11% JScript ⊚
Da un linguaggio di scripting, JavaScript è diventato in questi ultimi anni la piattaforma di sviluppo più utilizzata al mondo. Oggi, Javascript si reinventa grazie a progetti come Coffeescript, DART, Node.js e jQuery. Jav…
⋮ Creare URL corto utilizzando jQuery e Ajax ⋮
11% JQuery ⊚
Molti tutorial disponibili sul web per la creazione di URL brevi utilizzano lo script sul lato server, questo script funziona sul lato client. È facile e ha soli 5 righe di codice per chiamare le API di Bit.ly in modo asin…
⋮ JSONP, chiamate AJAX tra domini ⋮
10% Json ⊚
Sicuramente quanche volta vi è successo: si tenta di fare una richiesta AJAX in un dominio diverso da quello che si sta lavorando e restituisce un errore. In particolare, l’errore che dà Firefox è il seguente: Access to re…
⋮ Differenti modi per Document Ready ⋮
9% JQuery ⊚
Ci sono diversi tipologie di funzioni Document Ready, utilizzati tipicamente in jQuery (aka jQuery DOM Ready). Diversi sviluppatori sembrano usarli senza sapere bene perché. Quindi cercherò di spiegare perché si può scegli…