jQuery Tutorial => Iniziare con jQuery

Osservazioni

jQuery è una libreria JavaScript che semplifica le operazioni DOM, la gestione degli eventi, AJAX e le animazioni. Si occupa anche di molti problemi di compatibilità del browser nei motori DOM e javascript sottostanti.

Ogni versione di jQuery può essere scaricata da https://code.jquery.com/jquery/ nei formati compresso (minificato) e non compresso.

Versioni

Versione	Gli appunti	Data di rilascio
1.0	Prima versione stabile	2006-08-26
1.1		2007-01-14
1.2		2007-09-10
1.3	Sizzle introdotto nel nucleo	2009-01-14
1.4		2010-01-14
1.5	Gestione differita del callback, riscrittura del modulo ajax	2011-01-31
1.6	Guadagni significativi nelle prestazioni nei metodi `attr()` e `val()`	2011-05-03
1.7	Nuove API di eventi: `on()` e `off()` .	2011-11-03
1.8	Sizzle ha riscritto, migliorato le animazioni e la flessibilità di `$(html, props)` .	2012-08-09
1.9	Rimozione di interfacce deprecate e pulizia del codice	2013/01/15
1.10	Correzioni di bug incorporate e differenze riportate da entrambi i cicli beta 1.9 e 2.0	2013/05/24
1.11		2014/01/24
1.12		2016/01/08
2.0	Dropped IE 6-8 supporto per miglioramenti delle prestazioni e riduzione delle dimensioni	2013/04/18
2.1		2014/01/24
2.2		2016/01/08
3.0	Massicci accelerazioni per alcuni selettori personalizzati jQuery	2016/06/09
3.1	Niente più errori silenziosi	2016/07/07

jQuery Namespace ("jQuery" e "$")

jQuery è il punto di partenza per scrivere qualsiasi codice jQuery. Può essere usato come una funzione jQuery(...) o una variabile jQuery.foo .

$ è un alias per jQuery e di solito i due possono essere scambiati tra loro (tranne dove è stato usato jQuery.noConflict(); vedere Come evitare le collisioni jQuery.noConflict(); spazio dei nomi ).

Supponendo che abbiamo questo frammento di HTML -

<div id="demo_div" class="demo"></div>

Potremmo voler usare jQuery per aggiungere del contenuto testuale a questo div. Per fare questo potremmo usare la funzione jQuery text() . Questo potrebbe essere scritto usando jQuery o $ . cioè -

jQuery("#demo_div").text("Demo Text!");

O -

$("#demo_div").text("Demo Text!");

Entrambi produrranno lo stesso HTML finale -

<div id="demo_div" class="demo">Demo Text!</div>

Poiché $ è più conciso di jQuery , è generalmente il metodo preferito di scrittura del codice jQuery.

jQuery utilizza i selettori CSS e nell'esempio sopra è stato utilizzato un selettore ID. Per ulteriori informazioni sui selettori in jQuery, vedi i tipi di selettori .

Iniziare

Crea un file hello.html con il seguente contenuto:

<!DOCTYPE html>
<html>
<head>
    <title>Hello, World!</title>
</head>
<body>
    <div>
        <p id="hello">Some random text</p>
    </div>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#hello').text('Hello, World!');
        });
    </script>
</body>
</html>

Live Demo su JSBin

Apri questo file in un browser web. Di conseguenza vedrai una pagina con il testo: Hello, World!

Spiegazione del codice

Carica la libreria jQuery dal CDN di jQuery:
```
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
```
Questo introduce la variabile $ globale, un alias per la funzione jQuery e lo spazio dei nomi.
Tieni presente che uno degli errori più comuni commessi quando si include jQuery non riesce a caricare la libreria PRIMA di altri script o librerie che potrebbero dipendere da o farne uso.

Rinvia una funzione da eseguire quando viene rilevato che il DOM ( Document Object Model ) è "pronto" da jQuery:

// When the `document` is `ready`, execute this function `...`
$(document).ready(function() { ... });
 
// A commonly used shorthand version (behaves the same as the above)
$(function() { ... });

Una volta che il DOM è pronto, jQuery esegue la funzione di callback mostrata sopra. All'interno della nostra funzione, c'è solo una chiamata che fa 2 cose principali:
1. Ottiene l'elemento con l'attributo id uguale a hello (il nostro selettore #hello ). L'utilizzo di un selettore come argomento passato è il nocciolo della funzionalità e della denominazione di jQuery; l'intera libreria essenzialmente si è evoluta dall'estensione di document.querySelectorAll ^MDN .
2. Imposta il text() all'interno dell'elemento selezionato su Hello, World! .
```
#    ↓ - Pass a `selector` to `$` jQuery, returns our element
$('#hello').text('Hello, World!');
#             ↑ - Set the Text on the element
```

Per ulteriori informazioni, consultare la pagina jQuery - Documentazione .

Includi tag script in testa alla pagina HTML

Per caricare jQuery dal CDN ufficiale, vai al sito Web di jQuery. Vedrai un elenco di diverse versioni e formati disponibili.

Ora, copia il sorgente della versione di jQuery, che vuoi caricare. Supponiamo che tu voglia caricare jQuery 2.X , fare clic su tag non compresso o minimizzato che ti mostrerà qualcosa di simile a questo:

Copia il codice completo (o fai clic sull'icona della copia) e incollalo in <head> o <body> del tuo html.

La procedura migliore è caricare qualsiasi libreria JavaScript esterna sul tag head con l'attributo async . Ecco una dimostrazione:

<!DOCTYPE html>
    <html>
      <head>
         <title>Loading jquery-2.2.4</title>
         <script src="https://code.jquery.com/jquery-2.2.4.min.js" async></script>
      </head>
      <body>
          <p>This page is loaded with jquery.</p>
      </body>
   </html>

Quando si utilizza l'attributo async sii consapevole delle librerie javascript che vengono quindi caricate ed eseguite in modo asincrono non appena disponibili. Se sono incluse due librerie in cui la seconda libreria dipende dalla prima libreria, in questo caso se la seconda libreria viene caricata ed eseguita prima della prima libreria, potrebbe verificarsi un errore e l'applicazione potrebbe interrompersi.

Evitare collisioni nello spazio dei nomi

Le librerie diverse da jQuery possono anche usare $ come alias. Questo può causare interferenze tra quelle librerie e jQuery.

Per rilasciare $ per l'uso con altre librerie:

jQuery.noConflict();

Dopo aver chiamato questa funzione, $ non è più un alias per jQuery . Tuttavia, puoi comunque utilizzare la variabile jQuery per accedere alle funzioni di jQuery:

jQuery('#hello').text('Hello, World!');

Facoltativamente, puoi assegnare una variabile diversa come alias per jQuery:

var jqy = jQuery.noConflict();
jqy('#hello').text('Hello, World!');

Viceversa, per evitare che altre librerie interferiscano con jQuery, puoi avvolgere il tuo codice jQuery in un'espressione di funzione immediatamente invocata (IIFE) e passare in jQuery come argomento:

(function($) {
    $(document).ready(function() {
        $('#hello').text('Hello, World!');
    });
})(jQuery);

All'interno di questo IIFE, $ è un alias solo per jQuery.

Un altro modo semplice per proteggere l'alias $ di jQuery e assicurarsi che il DOM sia pronto :

jQuery(function( $ ) { // DOM is ready
   // You're now free to use $ alias
   $('#hello').text('Hello, World!');
});

Riassumere,

jQuery.noConflict() : $ non si riferisce più a jQuery, mentre la variabile jQuery fa.
var jQuery2 = jQuery.noConflict() - $ non fa più riferimento a jQuery, mentre la variabile jQuery fa così come la variabile jQuery2 .

Ora, esiste un terzo scenario: cosa succede se vogliamo che jQuery sia disponibile solo in jQuery2 ? Uso,

var jQuery2 = jQuery.noConflict(true)

Ciò non causa né $ né jQuery riferendosi a jQuery.

Questo è utile quando più versioni di jQuery devono essere caricate sulla stessa pagina.

<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>
<script>
    var jQuery1 = jQuery.noConflict(true);
</script>
<script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
<script>
    // Here, jQuery1 refers to jQuery 1.12.4 while, $ and jQuery refers to jQuery 3.1.0.
</script>

https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

Caricamento di jQuery tramite console su una pagina che non ce l'ha.

A volte si deve lavorare con le pagine che non usano jQuery mentre la maggior parte degli sviluppatori è abituata ad avere jQuery portata di mano.

In tali situazioni è possibile utilizzare la console degli Chrome Developer Tools ( F12 ) per aggiungere manualmente jQuery su una pagina caricata eseguendo quanto segue:

var j = document.createElement('script');
j.onload = function(){ jQuery.noConflict(); };
j.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(j);

La versione che desideri potrebbe differire da quella sopra ( 1.12.4 ) è possibile ottenere il link per uno di cui hai bisogno qui .

L'oggetto jQuery

Ogni volta che jQuery viene chiamato, usando $() o jQuery() , internamente sta creando una new istanza di jQuery . Questo è il codice sorgente che mostra la nuova istanza:

// Define a local copy of jQuery
jQuery = function( selector, context ) {

    // The jQuery object is actually just the init constructor 'enhanced'
    // Need init if jQuery is called (just allow error to be thrown if not included)
    return new jQuery.fn.init( selector, context );
}

Internamente jQuery si riferisce al suo prototipo come .fn , e lo stile usato qui di istanziare internamente un oggetto jQuery permette che il prototipo sia esposto senza l'uso esplicito di new da parte del chiamante.

Oltre all'impostazione di un'istanza (che è come vengono esposte le API jQuery, come ad esempio .each , children , filter , ecc.), Internamente jQuery creerà anche una struttura di tipo array per abbinare il risultato del selettore (a condizione che come argomento è stato passato qualcosa di diverso da niente, undefined , null o simile). Nel caso di un singolo oggetto, questa struttura a forma di array manterrà solo quell'elemento.

Una semplice dimostrazione sarebbe quella di trovare un elemento con un id, e quindi accedere all'oggetto jQuery per restituire l'elemento DOM sottostante (questo funzionerà anche quando più elementi sono abbinati o presenti).

var $div = $("#myDiv");//populate the jQuery object with the result of the id selector
var div = $div[0];//access array-like structure of jQuery object to get the DOM Element

Caricamento dei plugin jQuery con namespace

In genere durante il caricamento dei plug-in, assicurati di includere sempre il plug-in dopo jQuery.

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="some-plugin.min.js"></script>

Se devi utilizzare più di una versione di jQuery, assicurati di caricare i plug-in dopo la versione richiesta di jQuery seguita dal codice per impostare jQuery.noConflict(true) ; quindi carica la prossima versione di jQuery e i relativi plugin associati:

<script src="https://code.jquery.com/jquery-1.7.0.min.js"></script>
<script src="plugin-needs-1.7.min.js"></script>
<script>
// save reference to jQuery v1.7.0
var $oldjq = jQuery.noConflict(true);
</script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="newer-plugin.min.js"></script>

Ora, durante l'inizializzazione dei plugin, dovrai utilizzare la versione jQuery associata

<script>
// newer jQuery document ready
jQuery(function($){
  // "$" refers to the newer version of jQuery
  // inside of this function

  // initialize newer plugin
  $('#new').newerPlugin();
});

// older jQuery document ready
$oldjq(function($){
  // "$" refers to the older version of jQuery
  // inside of this function

  // initialize plugin needing older jQuery
  $('#old').olderPlugin();
});
</script>

È possibile utilizzare solo una funzione pronta per l'uso per inizializzare entrambi i plugin, ma per evitare confusione e problemi con qualsiasi codice jQuery aggiuntivo all'interno della funzione di pronto per il documento, sarebbe meglio mantenere separati i riferimenti.

Modified text is an extract of the original Stack Overflow Documentation

Autorizzato sotto CC BY-SA 3.0

Non affiliato con Stack Overflow

jQuery Tutorial
Iniziare con jQuery

Ricerca…