La scorsa settimana, ho parlato di quanto sia importante jQuery per qualsiasi sviluppatore web moderno e perché è fantastico. Questa settimana, penso che sia ora che ci sporchiamo le mani con un po' di codice e impariamo come utilizzare effettivamente jQuery nei nostri progetti.

Lo dirò ora: non è necessario imparare Javascript per utilizzare jQuery. Probabilmente è meglio pensare a jQuery come a un'evoluzione di Javascript - un modo migliore per farlo - piuttosto che una semplice libreria che aggiunge funzionalità. Qualsiasi Javascript di cui hai bisogno verrà prelevato lungo la strada. Si presume tuttavia che come sviluppatore web tu abbia una buona conoscenza di HTML e CSS (e in caso contrario, ecco un'utile guida xHTML gratuita!).

---

---

Modello oggetto documento

jQuery è tutto incentrato sull'attraversamento e la manipolazione del GIUDIZIO - il D ocument O oggetto m odel. Il DOM è una rappresentazione ad albero gerarchica della pagina, costruita dai browser dopo aver letto tutto il codice HTML. In jQuery, useremo una terminologia come genitore , figli , e fratelli abbastanza spesso, quindi dovresti avere un'idea di cosa significa in relazione al DOM.

Questo semplice diagramma daw3schoolsspiega abbastanza bene i concetti. Dovresti essere in grado di vedere che il genitore dell'elemento è , mentre il l'elemento ha un immediato

fratello.

Per iniziare: aggiunta di jQuery

L'ultima versione di jQuery è di circa 91 KB quando compressa, quindi aggiunge circa lo stesso peso della pagina di una piccola fotografia o screenshot. Il modo più semplice per includere jQuery nel tuo progetto è incollare un riferimento alla versione ospitata più recente nella sezione dell'intestazione del tuo sito:

Nota tuttavia che se stai eseguendo Wordpress, ciò potrebbe causare problemi perché ha già una propria copia della libreria jQuery. I plugin possono richiedere che venga caricato e Wordpress caricherà in modo intelligente jQuery solo una volta, indipendentemente da quanti plugin lo hanno richiesto.

Se aggiungi la seguente riga al tuo funzioni.php file del tema, aggiungerai un'altra richiesta per l'inclusione. Wordpress saprà quindi caricarlo sempre se il tuo tema è attivo.

---

---

come impostare l'account predefinito di Gmail

wp_enqueue_script('jquery');

La seconda cosa da tenere a mente è che quando jQuery viene aggiunto utilizzando il metodo standard, verrà caricato come $ . Tutto ciò che fai con jQuery sarà preceduto da questo $, come ad esempio:

$.ajax

o

---

---

$('#header')

Tuttavia, quando jQuery viene caricato tramite Wordpress, tutto viene eseguito utilizzando la variabile jQuery anziché $, quindi ad esempio:

jQuery('#header')

Sebbene questo non sia un grosso problema quando scrivi il tuo codice, significa che tagliare e incollare frammenti di jQuery che trovi sul web dovrà essere tradotto per usare jQuery invece di $ - È tutto.

Un modo per aggirare questo è avvolgere il codice in stile $ che trovi in ​​questo modo:

(function($) {
// paste $ code in here
})(jQuery);

Questo prende il jQuery variabile e la passa in una funzione anonima come $ . Spiegherò le funzioni anonime la prossima volta: per ora, impariamo la struttura di base di un po' di codice jQuery.

Per aggiungere il tuo codice a una pagina HTML o PHP, racchiudi tutto nei tag, in questo modo:


// jQuery code codes here


$ ('selettore').metodo();

Ecco, nel titolo lassù. Questa è la struttura di base di un singolo pezzo di codice jQuery per manipolare il DOM. Facile, vero?

Ilselettoredice a jQuery di trovare cose che corrispondono a questa regola, ed è lo stesso dei selettori CSS (e poi altri in alto). Quindi, proprio come nei CSS, avresti uno stile per tutti i collegamenti

a { }

Lo stesso sarebbe fatto in jQuery come

$('a')

Questo può essere fatto per qualsiasi elemento HTML - div, h1, span - qualunque cosa. Puoi anche usare classi e ID CSS per essere più specifici.

Ad esempio, per trovare tutti i collegamenti con la classe 'findme', dovresti usare:

$('a.findme')

Non è necessario specificare ogni volta il tipo di elemento, ma se lo fai, rende semplicemente la regola più specifica. Avresti potuto semplicemente dire

$('.findme')

che abbinerebbe tutto con la classe Trovami , indipendentemente dal fatto che si trattasse o meno di un collegamento.

Per usare un elemento ID con nome, usa il pulsante # segno invece. La differenza fondamentale qui è che un selettore ID selezionerà sempre un solo oggetto, mentre un selettore di classe può trovarne più di uno.

come trovare una lista su amazon

$('#something')

Fondamentalmente se puoi farlo in CSS, anche jQuery lo farà. In effetti, puoi anche usare alcuni pseudo selettori in stile CSS3 abbastanza complessi come :first

$('body p:first')

Che afferrerebbe il paragrafo della pagina. Trovi anche elementi con determinati attributi. Considera questo esempio; vogliamo trovare tutti i link della pagina che puntano internamente a utilizzare ed evidenziarli in qualche modo. Ecco come potremmo trovarli:

$('a[href*='makeuseof']')

Non è bello? Bene, penso che lo sia.

Il tuo prossimo porto di scalo dovrebbe essere il Documentazione dell'API jQuery per i selettori . È un elenco enorme di tutti i diversi tipi di selettori disponibili per l'uso e nessuno si aspetterebbe che tu li impari tutti.

La parte successiva dell'equazione èmetodo- cosa fare con quelle cose una volta che le hai trovate tutte - ma lo lasceremo per la prossima lezione. Se vuoi iniziare a provare vari selettori ora, ti suggerisco di attenerti al seguente metodo CSS. Questo richiede due parametri: un CSS nome della proprietà , e un nuovo valore assegnare a quella proprietà. Quindi, per dare a tutti i collegamenti un colore di sfondo rosso, dovresti fare:

$('a').css('background-color','red');

Abbastanza semplice! Anche se questo potrebbe non essere di alcuna utilità pratica, ti permetterà di vedere facilmente tutti gli elementi che si trovano usando i tuoi selettori. Ora vai avanti e seleziona: il DOM ti aspetta.

Spero che questo tutorial ti sia stato utile; Ho cercato di renderlo il più semplice e comprensibile possibile. Sentiti libero di fare qualsiasi domanda tu abbia o lasciare un feedback, ma tieni presente che non sono certamente un ninja jQuery d'élite.

Condividere Condividere Tweet E-mail 5 suggerimenti per potenziare le tue macchine Linux VirtualBox

Stanchi delle scarse prestazioni offerte dalle macchine virtuali? Ecco cosa dovresti fare per aumentare le prestazioni di VirtualBox.

Leggi Avanti Argomenti correlati

• Cultura Web
• Sviluppo web
• JavaScript
• Programmazione
• jQuery

Circa l'autore James Bruce(707 articoli pubblicati)

James ha una laurea in Intelligenza Artificiale ed è certificato CompTIA A+ e Network+. Quando non è impegnato come editor di recensioni hardware, gli piacciono i LEGO, la realtà virtuale e i giochi da tavolo. Prima di entrare a far parte di MakeUseOf, era un tecnico luci, insegnante di inglese e ingegnere di data center.

Altro da James Bruce

Iscriviti alla nostra Newsletter

Iscriviti alla nostra newsletter per consigli tecnici, recensioni, ebook gratuiti e offerte esclusive!

Clicca qui per iscriverti