Questo fa parte di un'introduzione per principianti alla serie di programmazione web jQuery. Parte 1 ha coperto le nozioni di base di jQuery jQuery Tutorial - Introduzione: Nozioni di base e selettori jQuery Tutorial - Per iniziare: Nozioni di base e selettori La settimana scorsa, 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 abbiamo imparato come ... Per saperne di più su come includerlo nel tuo progetto e selettori. Nella parte 2, continueremo con l'utilizzo di base mentre osserviamo alcuni metodi che è possibile eseguire su questi elementi DOM e alcuni altri fondamenti linguistici.
$ (Selector) .method ();
Se ricordi dalla lezione 1, questa è la struttura di base di una manipolazione DOM in jQuery. La manipolazione del DOM non è l'unica cosa che puoi fare con jQuery, naturalmente, ma è il posto più facile da cui iniziare e il più comune, ecco perché lo abbiamo scelto.
Per ricapitolare rapidamente, la parte selettore di questa istruzione consente di utilizzare nomi, classi o ID di elementi simili a CSS per individuare parti del DOM. Per esempio, per afferrare tutto con un nome di classe di .hidden, useremmo :
$('div.hidden') La seconda parte di questa equazione è il metodo da eseguire su questi DIV una volta che li abbiamo trovati (se esistono o potrebbero essere solo un elemento "corrispondente"). Ricorda, jQuery restituirà sempre un elemento per le selezioni di ID, poiché gli ID dovrebbero fare riferimento a elementi univoci. Se hai intenzione di avere più di una cosa, deve essere definita come una classe in CSS.
A quei metodi poi; cosa puoi fare comunque con gli elementi del DOM?
Prima di tutto, ti ho presentato l'ultima volta il metodo .css in modo che tu potessi usarlo per il test. Il formato è semplice:
.css('property', 'value'); Tutto ciò che è definibile dai CSS può quindi essere regolato da jQuery - colori, trasparenza, posizione, dimensioni - per citarne solo alcuni. Il cambiamento è immediato.
Se preferisci animare le modifiche CSS, allora ho ottime notizie per te; c'è anche un metodo chiamato .animate () . È un po 'più complesso però:
.animate({'property':'value'}, speed); Come esempio:
.animate({'opacity':'0.25', 'height':'100px'}, 'fast'); A questo punto, potresti chiederti a cosa servono le parentesi graffe; vengono definiti "oggetti letterali" e vengono generalmente utilizzati per creare un elenco di proprietà: coppie di valori, un po 'come un array indicizzato se provieni da altre lingue. Li userete molto in jQuery, quindi lo ripeto: abituatevi a controllare correttamente parentesi graffe e parentesi graffe!
Dai un'occhiata a questa pagina per un sacco di esempi di lavoro del metodo animato.
Oltre a manipolare le proprietà CSS di qualcosa, puoi modificarne il contenuto con . anche i metodi text (), .html () e .val () (val è per il contenuto degli elementi del form) . Questi metodi agiscono sia come set che come get ; se non si specifica un valore, otterranno il valore corrente. Se specifichi un valore, sostituiranno il valore corrente.
Ecco alcuni esempi rapidi:
Ottieni il valore corrente del campo del nome nel modulo di commento e assegnalo a una variabile comment_name :
var commenter_name = $(#comment-form #name).val(); Imposta il valore del valore afferrato da commenter_name :
$('span.name').text(commenter_name); Quindi abbiamo una vasta scelta di metodi per la clonazione, lo spostamento, l'inserimento o l'eliminazione di parti del DOM. La tua immaginazione è il limite, davvero.
Supponiamo che tu voglia inserire dinamicamente un blocco immagine pubblicitario dopo ogni 3 ° paragrafo nella colonna del contenuto, ma lo stai facendo in Javascript in modo che il caricamento iniziale della pagina possa essere mantenuto pulito. Sembra piuttosto complesso, giusto? Quasi ...
$('div#content p:nth-child(3n)').after(' 
'); 
');Concludendo, abbiamo chiesto a jQuery di:
- Trova il div con un ID di "contenuto"
- Trova le p contenute in quel div
- Filtra ogni 3 p usando pseudo-selettore nth-child (altro su questo qui)
- Inserisci un img arbitrario dopo ogni elemento corrispondente
Non posso elencare tutti i metodi qui e non vorresti leggerlo. Il punto è che c'è un metodo per fare praticamente tutto ciò che si può pensare quando si tratta di manipolazione, quindi controlla l'API per quello che puoi usare.
Inoltre, tieni presente che potrebbe esserci più di un modo per fare qualcosa. Se per esempio non puoi restringere l'oggetto corretto a insertAfter (), forse pensa di trovare il prossimo bambino in basso e usa invece insertBefore () .
Metodo di concatenamento
Infine, facciamo una breve parola sul metodo di concatenamento, fondamentalmente solo perché è fantastico. Innanzitutto, consideriamo le seguenti righe di codice:
$('nav#menu').fadeIn('fast'); $('nav#menu').addClass('beingShown'); $('nav#menu').css('margin-right', '10px'); Sembra abbastanza ragionevole, giusto? Ma puoi fare lo stesso in una sola riga:
$('nav#menu').fadeIn('fast').addClass('beingShown').css('margin-right', '10px'); Questo fa esattamente la stessa cosa e si chiama metodo concatenamento . Poiché quasi tutti i metodi jQuery restituiscono essi stessi un oggetto jQuery, ognuno può alimentare il successivo. Ciò significa meno codice, che è sempre una buona cosa, ma in realtà funziona anche più velocemente.
Perché? Bene, ogni volta che invochi il comando e il selettore di base di jQuery $, stai chiedendo di cercare attraverso l'albero DOM alla ricerca di un elemento corrispondente. Quando si concatenano i metodi, non è necessario continuare a riferirsi al DOM, perché sa dove si trovano ora e può eseguire il metodo all'istante.
È tutto per oggi, e penso che probabilmente abbiamo coperto parecchio. Ora dovresti essere armato con la possibilità di eseguire alcune manipolazioni DOM piuttosto pesanti, quindi provaci, incatena i tuoi metodi e crea un vero casino della pagina. Per ora, ti consigliamo di inserire gli script nel piè di pagina per caricare il resto del tempo della pagina. La settimana prossima affronteremo il problema di fare jQuery fare le cose solo quando tutto è stato caricato correttamente con gli eventi e il curioso caso delle funzioni anonime.
Se ti sei appena imbattuto in questo post, probabilmente sei uno sviluppatore web di qualche tipo e potresti voler controllare tutti i nostri articoli WordPress e blog, o anche la nostra pagina Best WordPress Plugin.