Foglio cheat JQuery - Il miglior cheat sheet interattivo su JQuery

Introduzione al Cheatsheet JQuery

Jquery è una libreria javascript multipiattaforma persistente nell'intenzione primaria di rendere più semplice la codifica dello sviluppo web. È un'affermazione comprovata che l'introduzione di Jquery ha abbastanza ridotto la lunghezza dei codici javascript. Quindi anche un codice javascript a più righe può essere facilmente ottenuto con un piccolo blocco o anche una singola riga di istruzione JQuery.

In questo articolo su Cheatsheet di JQuery, discuteremo cos'è Jquery e il PTP di questo framework:

Esistono numerosi siti Web attivi sul Web e il mercato include una vasta gamma di lingue che realizzano la creazione di questi siti Web e prodotti online. Alcuni dei famosi sono i seguenti,

HTML, CSS
Javascript e JQuery per lo scripting client end
PHP per scripting di fine server
MYSQL per l'interrogazione di database
eccetera.

Vantaggi dell'utilizzo del framework JQuery rispetto ad altri,

Coinvolge una grande comunità e molti plugin introdotti in essa.
leggero
potenti capacità di concatenamento
Breve documentazione ed esercitazioni
Capacità di sviluppare facilmente componenti Ajax
È in grado di rendere il codice semplice e riutilizzabile
Browser amichevole

Contenuto di base e sintassi del cheat sheet JQuery:

Includi: incluso Jquery allo script di esecuzione corrente

Sintassi: la struttura sintattica di JQuery

Il selettore seleziona i componenti HTML

$(Selector).action() Azione eseguita sul componente selezionato

Definisce l'uso di JQuery

Foglio informativo per i selettori Jquery:

elementi tagelementi tag

Selettore	DESCRIZIONE
$ ( “*”)	Seleziona tutti gli elementi HTML
$ ( “P.demo”)	Seleziona elementi tag
$ ( “: Il tasto”)	Seleziona il pulsante e gli elementi di input
$ ( “TR: anche”)	Seleziona il pari
$ ( “TR: odd”)	Seleziona il dispari
$ ( “Arco: genitore”)	Seleziona gli elementi a cui è associato un elemento figlio
$ ( “(Href)”)	Seleziona tutti gli elementi con attributi href
$ ( “: Ingresso”)	Seleziona tutti gli elementi del modulo

Cheat sheet for Jquery Events: Event è una sorta di azione sulla pagina web, Gli eventi chiave coinvolti sono i seguenti.

Eventi del mouse	Metodo di evento del mouse	Eventi tastiera	Metodo evento tastiera	Eventi form	Metodo dell'evento modulo
mouse entra	.mouseenter ()	pressione di un tasto	.keypress ()	modificare	.modificare()
Doppio click	.dblclick ()	keydown	.keydown ()	messa a fuoco	.messa a fuoco()
clic	.clic()	keyup	.keyup ()	sfocatura	.blur ()
congedo del mouse	.mouseleave ()	Eventi del browser	Metodo di evento del browser	Document Document Events	Metodi di Document Event
mouse in giù	.mousedown ()	Popolazione dell'errore	.errore()	scaricare	.scaricare()
mouse in alto	.mouseup ()	scorrere	.scorrere()	caricare	.caricare()

Es:

$("p").dblclick(function()( $(this).hide(); ));

Trucchi Effetti jquery:

Nozioni di base: .hide (), .show (), .toggle (): consente di nascondere, mostrare e attivare o disattivare gli elementi selezionati.

Ex:

$("p").hide();

Personalizzato: .animate (), .delay (), .dequeue (), .stop ()

il metodo animate () prepara animazioni personalizzate
il metodo delay () consente l'esecuzione ritardata di elementi.
dequeue () esegue la successiva sequenza di funzioni presenti nella coda.

Es:

$("element1").animate( ( opacity : 0.50 left: "+=27" )

Fade: fadeTo (), fadeOut (), fadeIn (), fadeToggle ()

fadeIn () Sfuma un elemento nascosto
fadeout () consente di sbiadire un elemento visibile
fadeTo () si dissolve in una data opacità
fadeToggle () consente all'elemento di essere attivato / disattivato con i metodi fade in e fade out.

Es:

$("button").click(function() ( $("#div2").fadeOut("slow"); ));

Slide: slideDown (), slideUp (), slideToggle ()

slideDown () Visualizza con un movimento scorrevole elementi sovrapposti
slideToggle () Visualizza o nasconde con un movimento scorrevole elementi sovrapposti
slideUp () Si nasconde con un movimento scorrevole elementi sovrapposti

Suggerimenti e trucchi per l'utilizzo di Cheat sheet jQuery

1) Mantenere un parametro di contesto che consente l'esecuzione dell'avvio da un ramo DOM più profondo anziché invocare dalla radice.

2) Controllare se l'elemento esiste e quindi spingere in avanti per l'esecuzione del codice.

Sintassi:

if($("#element").length) ( // DOM element exists ) else ( //DOM element dont exists )

3) Il metodo di dati jQuerys collega elementi e dati DOM senza modificare il DOM.

4) Verifica se uno degli elementi è nascosto.

Es:

if($(element).is(":visible") == "true") ( //The element is Visible )

5) Tenere un conto degli elementi figlio precedenti immediatamente.

6) Il caricamento delle immagini precedenti ottimizza le prestazioni dell'esecuzione della query.

7) È meglio verificare che la query sia stata caricata correttamente prima di eseguirla.

Ex:

if (typeof jQuery == 'undefined') ( console.log('jQuery not loaded'); ) else ( console.log('jQuery loaded'); )

8) I collegamenti di immagini interrotti possono essere facilmente sostituiti eseguendo il codice sottostante,

Ex:

$('img').on('error', function () ( if(!$(this).hasClass('broken-image')) ( $(this).prop('src', 'img/broken.png.webp').addClass('broken-image'); ) ));

9) La cornice deve essere sempre assicurata per adattarsi al contenuto della pagina.

10) I filtri di selezione propri possono essere aggiunti in Jquery. come ogni cosa nei filtri di selezione della libreria può anche essere personalizzata. Aggiungere un oggetto $ .expr (':') lo farà.

Es:

(function($) ( var random = 0 $.expr(':').random = function(a, i, m, r) ( if (i == 0) ( random = Math.floor(Math.random() * r.length); ) return i == random; ); ))(jQuery); // how to utilize this piece of code. $('li:random').addClass('glow');

11) L'aggiunta dell'attributo disabilitato all'input consente di mantenere disabilitato il campo di input fino a quando alcuni campi relativi non vengono riempiti.

Ex:

$('input(type="submit")').prop('disabled', true);

12) Assicurarsi di definire la sezione del gestore degli errori per gestire i ritorni degli errori ajax. quando si verifica un errore 400 o 500, questa sezione verrà automaticamente attivata.

Ex:

$(document).on('ajaxError', function (e, xhr, settings, error) ( console.log(error); ));

Cheat sheet JQuery - conclusione

Jquery riduce la complessità aggiuntiva che javascript tiene con sé. con più entità associate a jquery si colloca tra i migliori strumenti di sviluppo di pagine Web sul mercato. le sue capacità di concatenamento leggere ed efficienti hanno reso abbastanza facilmente la codifica Web per gli sviluppatori.

Articolo raccomandato

Questa è stata una guida al cheat sheet JQuery qui abbiamo discusso il contenuto e il comando, nonché suggerimenti e trucchi gratuiti del cheat sheet JQuery, puoi anche leggere il seguente articolo per saperne di più -