Introduzione a jQuery (parte 2): metodi e funzioni

Annuncio pubblicitario

Questo fa parte di un'introduzione continua per principianti alle serie di programmazione Web jQuery. La parte 1 trattava le basi di jQuery Tutorial jQuery - Per iniziare: Nozioni di base e selettoriLa scorsa settimana, ho parlato dell'importanza di jQuery per qualsiasi sviluppatore web moderno e del perché sia ​​fantastico. Questa settimana, penso che sia tempo di sporcarci le mani con un po 'di codice e abbiamo imparato come ... Leggi di più di come includerlo nel progetto e selettori. Nella parte 2, continueremo con l'utilizzo di base mentre esaminiamo alcuni metodi che puoi eseguire su quegli elementi DOM e alcuni altri fondamentali del linguaggio.

$(selettore).metodo();

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 ovviamente, ma è il posto più semplice da cui iniziare e il più comune, quindi è per questo che l'abbiamo scelto.

Per ricapitolare rapidamente, il

selettore parte di questa affermazione consente di utilizzare nomi di elementi, classi o ID simili a CSS per individuare parti del DOM. Ad esempio, per afferrare tutto con un nome di classe di .nascosto, useremmo:

$ ( 'Div.hidden')

La seconda parte di questa equazione è la metodo esibirsi su questi DIV una volta che li abbiamo trovati (se esistono affatto; o possono essere solo un elemento "corrispondente"). Ricorda, jQuery restituirà sempre e solo un elemento per le selezioni di ID, poiché gli ID dovrebbero fare riferimento a elementi unici. Se hai intenzione di avere più di qualcosa di simile, deve essere definito come una classe nel CSS.

Sui metodi allora; cosa puoi fare comunque con gli elementi del DOM?

Prima di tutto, ti ho presentato il css metodo l'ultima volta in modo da poterlo utilizzare per i test. Il formato è semplice:

css ( 'proprietà', 'valore');

Tutto ciò che può essere definito dai CSS può quindi essere regolato da jQuery - colori, trasparenza, posizione, dimensioni - per nominarne solo alcuni. Il cambiamento è immediato.

Se preferisci animare le modifiche CSS, allora ho ottime notizie per te; c'è anche un metodo chiamato .animare(). È un po 'più complesso però:

.animate ({ 'proprietà': 'valore'}, velocità);

Come esempio:

.animate ({ 'opacità': '0.25', 'height': '100px'}, 'veloce');

A questo punto, potresti chiederti a cosa servono le parentesi graffe; vengono chiamati "oggetti letterali" e in genere vengono utilizzati per creare un elenco di costo dell'immobile coppie, un po 'come un matrice indicizzata se vieni da altre lingue. Li userai molto in jQuery, quindi lo ripeto: abituati a controllare correttamente parentesi e parentesi chiuse!

Check-out questa pagina per molti esempi funzionanti del metodo animato.

Oltre a manipolare le proprietà CSS di qualcosa, puoi modificarne il contenuto con .metodi text (), .html () e .val () (val è per il contenuto degli elementi del modulo). Questi metodi agiscono come entrambi impostatoters e ottenereTERS; se non specifichi un valore, otterranno il valore corrente. Se si specifica un valore, sostituiranno il valore corrente.

Ecco alcuni esempi rapidi:

Ottieni il valore corrente del campo del nome nel modulo dei commenti e assegnalo a una variabile comment_name:

var commenter_name = $ (# comment-form #name) .val ();

Imposta il valore di al valore preso da COMMENTER_NAME:

$ ('span.name'). text (commenter_name);

Quindi abbiamo una vasta selezione di metodi per clonare, spostarsi, inserire o eliminare parti del DOM. La tua immaginazione è il limite, davvero.

Supponiamo che tu voglia inserire dinamicamente un blocco di immagini pubblicitarie ogni 3 anni paragrafo nella colonna del contenuto, ma lo stai facendo in Javascript in modo che il caricamento della pagina iniziale possa essere tenuto pulito. Sembra piuttosto complesso, vero? Quasi ...

$('div content #p: nth-child (3n)').dopo('');

In conclusione, abbiamo chiesto a jQuery di:

1. Trova il div con un ID di "contenuto"
2. Trova le p contenute in quel div
3. Filtra ogni 3 p utilizzando lo pseudo-selettore nth-child (più su questo qui)
4. Inserisci un img arbitrario dopo ogni elemento corrispondente

Non posso elencare qui tutti i metodi e non vorresti leggerlo. Il punto è che esiste un metodo per fare praticamente qualsiasi cosa tu possa pensare quando si tratta di manipolazione, quindi controlla l'API per uno che puoi usare.

Inoltre, tieni presente che potrebbe esserci più di un modo per fare qualcosa. Se ad esempio non puoi restringere l'oggetto corretto a InsertAfter (), forse pensare di trovare il Il prossimo bambino giù e usando insertBefore () anziché.

Metodo di concatenamento

Infine oggi, diamo una breve parola sul concatenamento dei metodi, praticamente solo perché è fantastico. Innanzitutto, consideriamo le seguenti righe di codice:

$ ( '# Menù nav') fadeIn ( 'veloce.'); $ ( '# Menù nav') addClass ( 'beingShown.'); $ ( '# Menù nav') css ( 'margin-right', '10px.');

Sembra abbastanza ragionevole, giusto? Ma puoi fare lo stesso in una sola riga:

$ ( '# Menù nav') fadeIn ( 'veloce') addClass ( 'beingShown') css ( 'margin-right', '10px')...;

Fa esattamente la stessa cosa e si chiama concatenamento del metodo. Poiché quasi tutti i metodi jQuery restituiscono essi stessi un oggetto jQuery, ognuno può alimentare il successivo. Questo significa meno codice - che è sempre una buona cosa - ma in realtà funziona anche più velocemente.

Perché? Bene, ogni volta che invochi il jQuery di base $ comando e selettore, gli stai chiedendo di cercare attraverso l'albero del DOM alla ricerca di un elemento corrispondente. Quando esegui il concatenamento dei metodi, non è necessario continuare a fare riferimento al DOM, perché sa dove si trovano ora e può eseguire immediatamente il metodo.

Per oggi è tutto, e penso che probabilmente abbiamo coperto parecchio. Ora dovresti essere armato della capacità di eseguire alcune manipolazioni DOM piuttosto pesanti, quindi prova, incatena i tuoi metodi e crea un vero pasticcio della pagina. Per ora, ti consigliamo di posizionare gli script nel piè di pagina per consentire al resto della pagina di caricare. La prossima settimana affronteremo il problema di fare in modo che jQuery faccia le cose solo quando tutto è stato caricato correttamente con gli eventi e il curioso caso di 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 WordPress e blog articoli o anche i nostri I migliori plugin per WordPress I migliori plugin di WordPress Leggi di più pagina.