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:
- Cuore e Utilità: questa componente contiene il cuore, le utilità e la librerie per la gestione dei dati utilizzati nella maggior parte di jQuery.
- 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.
- Motore CSS: Principalmente per gestire il CSS.
- Motore Ajax: Fornisce funzionalità per la comunicazione sincrona o asincrona tra client e server web.
- Motore per gli Eventi: Per elaborazione Eventi e manipolazione del tipo bubbling (bolle) degli eventi.
- 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 jQueryIl 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);
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.ciaoMondoPlugin.js"></script>
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(); });
$(function(){ $('.saluto2').ciaoMondo({foo:'Qui tutto', bar:'bene!'}); });
$("document").ready({ $('.saluto3').ciaoMondo({foo:'Addio'}); });
<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>
<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>
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…
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…
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…
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…
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…
Aggiungi un commento