Jukseark JQuery - Det beste interaktive juksearket på JQuery

Introduksjon til Cheatsheet JQuery

Jquery er et javascript-bibliotek på tvers av plattformer som vedvarer med en primær intensjon om å gjøre webutvikling enklere å kode. Det er en bevist uttalelse at innføringen av Jquery ganske har redusert lengden på javascript-koder. Så til og med en javascript-kode med flere linjer kan lett oppnås med en liten blokk eller til og med en enkelt JQuery-uttalelse.

I denne Cheatsheet JQuery-artikkelen vil vi diskutere hva Jquery er og PTP for denne rammen:

Det er mange nettsteder som er aktive på nettet, og markedet inkluderer et bredt spekter av språk som fullfører byggingen av disse nettstedene og online produkter. Noen av de berømte er som følger,

HTML, CSS
Javascript og JQuery for scripting av klientens slutt
PHP for server-slutt scripting
MYSQL for database-spørring
etc.

Fordeler med å bruke JQuery-rammeverket over andre,

Det involverer et enormt samfunn og en hel masse plugins introdusert i det.
Lett
kraftige kjedemuligheter
Kort dokumentasjon og tutorials
Evne til å utvikle Ajax-komponenter enkelt
Det er evnen til å gjøre koden enkel og gjenbrukbar
Nettleservennlig

Grunnleggende innhold og syntaks for Cheat Sheet JQuery:

Inkluder: Inkludert Jquery til gjeldende kjøringsskript

Syntaks: Den syntaksiske strukturen til JQuery

Velgeren velger HTML-komponentene

$(Selector).action() Handling utført på valgt komponent

Definerer bruken av JQuery

Jukseark for Jquery Selectors:

tagelementertagelementer

Selector	BESKRIVELSE
$ ( “*”)	Velger alle HTML-elementene
$ ( “P.demo”)	Velger tagelementer
$ ( “: Button”)	Velger knapp og inngangselementer
$ ( “Tr: selv”)	Velger partiet
$ ( “Tr: Odd”)	Velger det rare
$ ( “Span: forelder”)	Velger elementer som er tilknyttet et barnelement
$ ( “(Href)”)	Velger alle elementer med href-attributter
$ ( “: Input”)	Velger alle formelementer

Jukseark for Jquery Events: Arrangement er en slags handling på websiden. De viktigste begivenhetene involvert er som følger.

Mushendelser	Mouse Event-metoden	Tastaturhendelser	Tastaturhendelsesmetode	Form hendelser	Form hendelsesmetode
mus inn	.mouseenter ()	tastetrykk	.tastetrykk()	endring	.endring()
Dobbeltklikk	.dblclick ()	Keydown	.keydown ()	fokus	.fokus()
klikk	.Klikk ()	Keyup	.keyup ()	uklarhet	.uklarhet()
museflat	.mouseleave ()	Nettleserhendelser	Nettleserhendelsesmetode	Dokumenthendelser	Dokumenthendelsesmetoder
musen ned	.mousedown ()	Feilpopulasjon	.feil()	lesse	.lesse()
musen opp	.mouseup ()	bla	.scroll ()	laste	.laste()

Eks:

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

Jukseark Jquery-effekter:

Grunnleggende:. Skjul (), . Vis (), .toggle () - Gjør det mulig å skjule, vise og veksle de valgte elementene.

ex:

$("p").hide();

Egendefinert:. Animere (), .forsinkelse (), .dequeue (), .stop ()

den anime () -metoden forbereder tilpassede animasjoner
metoden forsinkelse () tillater forsinket utføring av elementer.
dequeue () utfører neste sekvens med funksjoner som er tilstede i køen.

Eks:

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

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

fadeIn () Tynner et skjult element
fadeout () gjør at et synlig element blir falmet
fadeTo () blekner til en gitt opacitet
fadeToggle () gjør at elementet kan slås på med fade in og fade out-metoder.

Eks:

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

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

slideDown () Skjerm med glidende bevegelse overmatchede elementer
slideToggle () Viser eller skjuler med glidende bevegelser overmatchede elementer
slideUp () Skjuler med en glidende bevegelse overmatchede elementer

Gratis tips og triks for å bruke Cheat sheet jQuery

1) Hold en kontekstparameter som gjør at utførelsen kan starte fra en dypere DOM-gren i stedet for å påkalle fra roten.

2) Kontroller om elementet eksisterer, og trykk deretter fremover for utføring av koden.

Syntaks:

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

3) jQuerys datametode binder DOM-elementer og data uten å endre DOM.

4) Kontroller om noen av elementene er skjult.

Eks:

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

5) Hold en rekke øyeblikkelig foregående barnelementer.

6) Når du laster inn bildene på forhånd, optimaliserer du ytelsen til spørring.

7) Det er bedre å sjekke at spørringen er lastet før du får den kjørt.

ex:

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

8) Ødelagte bildekoblinger kan enkelt erstattes ved å utføre koden under,

ex:

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

9) Rammen må alltid være sørget for å passe til innholdet på siden.

10) Egne valgfiltre kan legges til i Jquery. som alt i biblioteksutvalgsfiltrene kan også tilpasses. Hvis du legger til et $ .expr (':') -objekt, blir dette gjort.

Eks:

(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) Hvis du legger til deaktivert attributt til inngangen, kan du holde inndatafeltet deaktivert til visse relative felt er fylt ut.

ex:

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

12) Forsikre deg om å definere feilhåndteringsdelen for å håndtere ajax feilreturer. når en 400 eller 500 feil blir truffet, vil denne delen automatisk utløses.

ex:

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

Jukseark JQuery - konklusjon

Jquery reduserer den ekstra kompleksiteten som JavaScript inneholder. med flere enheter tilknyttet jquery-stander som blant de beste verktøyene for utvikling av nettsiden i markedet. dens lette og effektive kjedemuligheter har ganske enkelt gjort webkoding enkelt for utviklere.

Anbefalt artikkel

Dette har vært en guide til Cheat sheet JQuery her vi har diskutert innhold og kommando samt gratis tips og triks for cheat sheet JQuery. Du kan også se på følgende artikkel for å lære mer -