Internet

Introduzione a jQuery (Parte 2) Metodi e funzioni

Introduzione a jQuery (Parte 2) Metodi e funzioni / Internet

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 DOM non è l'unica cosa che puoi fare con jQuery, ovviamente, 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. Ad esempio, per afferrare tutto il

con un nome di classe di .nascosto, 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 uno “accoppiamento” articolo). 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 con gli elementi del DOM comunque?

Prima di tutto, ti ho presentato il .css metodo l'ultima volta in modo che tu possa usarlo per il test. Il formato è semplice:

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

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 .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; sono chiamati a “oggetto letterale”, 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 userete molto in jQuery, quindi lo ripeto: abituatevi a controllare correttamente parentesi quadre 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 i contenuti degli elementi del modulo). Questi metodi agiscono come entrambi impostatoters e ottenereTERS; 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 di al valore afferrato da COMMENTER_NAME:

. $ ( 'Span.name') testo (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:

  1. Trova il div con un ID di “soddisfare”
  2. Trova le p contenute in quel div
  3. Filtra ogni 3 p usando pseudo-selettore nth-child (altro su questo qui)
  4. 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 una che puoi usare.

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

Metodo di concatenamento

Infine, facciamo una breve parola sul metodo di concatenamento, fondamentalmente solo perché è fantastico. Innanzitutto, consideriamo le seguenti righe di codice:

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

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

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

Questo fa esattamente la stessa cosa e viene chiamato metodo di concatenamento. Poiché quasi tutti i metodi jQuery restituiscono 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 jQuery di base $ comando e selettore, 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 immediatamente il metodo.

È 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 di funzioni anonime.

Se ti sei 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 migliore pagina dei plugin WordPress.