Come metodi a catena in jQuery?
JQuery, una biblioteca di JavaScript, consente ai suoi utenti di scrivere di meno. Puoi eseguire più azioni scrivendo solo una riga di codice. Un esempio di questo è il metodo di incatenamento che consente di combinare una serie di metodi jQuery e applicarli a un elemento tutto in una volta. È una tecnica molto divertente che riduce il tuo lavoro e risparmia molto tempo. Questa guida è progettata per illuminare i suoi lettori su come incatenare vari metodi in jQuery.
Metodi con incatenamento in jQuery
Come già accennato, possiamo incatenare vari metodi jQuery per eseguire più azioni su un elemento HTML tutte in una volta. Questo può essere fatto selezionando un elemento e scrivendo tutti i metodi richiesti in una singola riga separata da un punto.
Il più grande vantaggio dell'utilizzo del metodo di incapacità è che impedisce al browser di rintracciare lo stesso elemento più di una volta. In altre parole, non è assolutamente necessario utilizzare lo stesso selettore più e più volte, riducendo così le possibilità di rallentare il codice.
Esploriamo come incatenare i metodi in jQuery ulteriormente con l'aiuto di esempi.
Esempio 1
In questo esempio, stiamo incatenando due metodi jQuery che sono CSS () e animate ().
Html
Metodi di concatenamento jQuery
Nel codice HTML sopra, vengono creati due elementi che sono
, E . Ora faremo catene di metodi CSS () e animate () sui
Elemento per vedere come funziona i metodi di incatenamento in jQuery.
jQuery
$ (documento).ready (function ()$ (".pulsante").Click (function ()
$ ("p").CSS ("Color", "Green").animate (larghezza: "100%")
.animate (fontsize: "46px").animate (opacity: "0.4 ");
);
);
Nel codice sopra, abbiamo applicato il colore al
Elemento usando il metodo CSS () e imposta la larghezza, la fontsize e l'opacità sullo stesso elemento usando il metodo animate ().
Produzione
Quando si fa clic sul pulsante, ecco cosa succede.
I metodi CSS () e Animate () sono incatenati con successo.
Come puoi vedere nell'esempio sopra abbiamo incatenato i metodi jQuery in una sola riga di codice, tuttavia, il codice funzionerà bene anche se si desidera dividere il codice in più righe per migliorare la leggibilità.
jQuery
$ ("p").CSS ("Color", "Green").animate (larghezza: "100%")
.animate (fontsize: "46px")
.animate (opacity: "0.4 ");
Non ci sarà assolutamente alcun effetto sull'output.
Esempio 2
L'esempio seguente illustra come fare la catena di metodi SlideUp (), SlidedOwn () e FadeOut () contemporaneamente.
Html
Metodi di concatenamento jQuery
Nel codice HTML sopra vengono creati due elementi che sono
, E . Let's Chain SlideUp (), SlidedOwn () e Fadeout () Metodi per vedere l'effetto risultante.
jQuery
$ (documento).ready (function ()$ (".pulsante").Click (function ()
$ ("H1").slittamento (1000).SlidedOwn (1000).Fadeout (1000);
);
);
Nel codice sopra, a ciascuno dei metodi è stata assegnata una velocità di 1000 millisecondi.
Produzione
I metodi SlideUp (), SlidedOwn () e Fadeout () sono incatenati e funzionano correttamente.
Metodi con incatenamento senza passare argomenti
Se non si passa alcun parametro a un metodo jQuery, non restituirà un oggetto jQuery, piuttosto che restituirà invece il contenuto dell'elemento specificato.
Esempio
In questo esempio, stiamo concatenando i metodi HTML (), AddClass () e Hide ().
Html
Alcuni intestati
Qualche paragrafo.
Sono stati creati tre elementi HTML che sono
,
, E .
jQuery
$ (documento).ready (function ()$ ("pulsante").Click (function ()
// questo funzionerà
$ ("H1").html ("qualche intestazione").AddClass ("Demo").Fadeout (1000);
// Questo non funzionerà
$ ("p").html ().addClass ("demo");
);
);
Nel codice sopra, abbiamo passato il parametro al metodo HTML () quando ci appliciamo
soltanto. Tuttavia, nessun parametro è stato passato al metodo HTML () nel caso di
. Pertanto, gli effetti del concatenamento funzionano solo per
, e non per
.
Produzione
Nessun effetto sul paragrafo.
Conclusione
Il concatenamento di vari metodi jQuery può essere eseguita selezionando un elemento e scrivendo tutti i metodi richiesti in una singola riga separati da un punto per eseguire più azioni su un elemento HTML tutte in una volta. Il vantaggio di farlo è che impedisce al browser di rintracciare lo stesso elemento più e più volte, inoltre, diminuendo le possibilità di rallentare il codice. Questo articolo ti guida su come incatenare i metodi in jQuery con l'aiuto di esempi adatti.