Snyderark JQuery - Det bedste interaktive snyderi på JQuery

Introduktion til Cheatsheet JQuery

Jquery er et javascript-bibliotek på tværs af platforme, der er vedvarende med en primær hensigt at gøre webudvikling lettere at kode. Det er en bevist erklæring, at introduktionen af Jquery har ret reduceret længden af javascript-koder. Selv en javascript-kode med flere linjer kan let opnås med en lille blok eller endda en enkelt linje med JQuery-erklæring.

I denne Cheatsheet JQuery-artikel vil vi diskutere, hvad Jquery er, og PTP for denne ramme:

Der er adskillige websteder, der er aktive på nettet, og markedet inkluderer en bred vifte af sprog, der udfører opbygningen af disse websteder og online produkter. Nogle af de berømte er som følger,

HTML, CSS
Javascript og JQuery til scripting af klientens slutning
PHP til server-slut scripting
MYSQL til databaseforespørgsel
etc.

Fordele ved at bruge JQuery-rammer frem for andre,

Det involverer et enormt samfund og en hel masse plugins introduceret i det.
Letvægts
stærke kædeevne
Kort dokumentation og tutorials
Evne til let at udvikle Ajax-komponenter
Det er kapacitet at gøre kode enkel og genanvendelig
Browser venlig

Grundlæggende indhold og syntaks for Cheat Sheet JQuery:

Inkluder: Inkluderer Jquery til det aktuelle eksekveringsscript

Syntaks: Den syntaksiske struktur af JQuery

Selector vælger HTML-komponenterne

$(Selector).action() Handling udført på den valgte komponent

Definerer brugen af JQuery

Snyderi til Jquery Selectors:

tagelementertagelementer

Selector	BESKRIVELSE
$ ( ”*”)	Vælger alle HTML-elementer
$ ( ”P.demo”)	Vælger tagelementer
$ ( ”: Knappen”)	Vælger knappen og inputelementerne
$ ( ”Tr: selv”)	Vælger det lige
$ ( ”Tr: odd”)	Vælger det ulige
$ ( ”Spændvidde: forælder”)	Vælger elementer, der har et underordnet element tilknyttet
$ ( ”(Href)”)	Vælger alle elementer med href-attributter
$ ( ”: Input”)	Vælger alle formelementer

Snyderiark til Jquery-begivenheder: Begivenhed er en slags handling på websiden. De involverede centrale begivenheder er som følger.

Musbegivenheder	Mushændelsesmetode	Tastaturbegivenheder	Tastaturbegivenhedsmetode	Form begivenheder	Form Begivenhedsmetode
musen indtastes	.mouseenter ()	tastetryk	.tastetryk()	lave om	.lave om()
Dobbeltklik	.dblclick ()	KeyDown	.keydown ()	fokus	.fokus()
klik	.Klik ()	keyup	.keyup ()	sløring	.blur ()
museforladelse	.mouseleave ()	Browserbegivenheder	Browserbegivenhedsmetode	Dokument begivenheder	Dokumenthændelsesmetoder
musen nede	.mousedown ()	Fejlpopulation	.fejl()	losse	.losse()
musen op	.mouseup ()	rulle	.scroll ()	belastning	.belastning()

Eks:

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

Snyderark Jquery-effekter:

Grundlæggende:. Skjul (), .show (), .toggle () - Gør det muligt at skjule, vise og skifte de valgte elementer.

Eks:

$("p").hide();

Brugerdefineret:. Animere (), . Forsinkelse (), .dequeue (), .stop ()

metoden animere () forbereder tilpassede animationer
metoden forsinkelse () tillader forsinket udførelse af elementer.
dequeue () udfører den næste række af funktioner, der findes i køen.

Eks:

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

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

fadeIn () Bleges et skjult element
fadeout () gør det muligt at falde et synligt element
fadeTo () falmer til en given opacitet
fadeToggle () gør det muligt for elementet at skifte med fade in og fade out metoder.

Eks:

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

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

slideDown () Display med en glidende bevægelse overmatchede elementer
slideToggle () Viser eller skjuler med en glidende bevægelse overmatchede elementer
slideUp () Skjuler med en glidende bevægelse overmatchede elementer

Gratis tip og tricks ved brug af Cheat sheet jQuery

1) Opbevar en kontekstparameter, der tillader udførelsen at sparke start fra en dybere DOM-gren i stedet for at påkalde fra roden.

2) Kontroller, om elementet findes, og skub derefter fremad for udførelse af koden.

Syntaks:

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

3) jQuerys-datametode binder DOM-elementer og data uden at ændre DOM.

4) Kontroller, om nogle af elementerne er skjult.

Eks:

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

5) Foretag en optælling af øjeblikkeligt foregående børnelementer.

6) Indlæsning af billederne tidligere optimerer ydelsen for udførelse af forespørgsel.

7) Det er bedre at kontrollere, at forespørgslen er indlæst, før den udføres.

Eks:

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

8) Ødelagte billedlink kan udskiftes med lethed ved at udføre nedenstående stykke kode,

Eks:

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

9) Rammen skal altid sørges for at passe til indholdet på siden.

10) Egne valgfiltre kan tilføjes i Jquery. ligesom alt i bibliotekets valgfiltre også kan tilpasses. tilføjelse af et $ .expr (':') -objekt gør 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) Tilføjelse af den deaktiverede attribut til inputen gør det muligt at holde inputfeltet deaktiveret, indtil visse relative felter er udfyldt.

Eks:

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

12) Sørg for at definere fejlhåndteringsafsnittet for at håndtere ajax-fejlretur. når der er ramt en 400 eller 500 fejl, vil dette afsnit automatisk blive udløst.

Eks:

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

Snyderark JQuery - konklusion

Jquery reducerer den yderligere kompleksitet, som javascript indeholder. med flere enheder, der er forbundet med jquery-stande, som blandt markedets øverste udviklingsværktøjer. dens lette og effektive kædekapaciteter har ret gjort webkodning let for udviklere.

Anbefalet artikel

Dette har været en guide til Cheat sheet JQuery her, vi har diskuteret indholdet og kommandoen samt gratis tip og tricks af snyderis JQuery. Du kan også se på følgende artikel for at lære mere -