Cheatsheet JQuery - Het beste interactieve spiekbriefje op JQuery

Inleiding tot Cheatsheet JQuery

Jquery is een platformonafhankelijke javascriptbibliotheek die persistent is op een primaire intentie om webontwikkeling eenvoudiger te coderen. Het is een bewezen verklaring dat de introductie van Jquery de lengte van JavaScript-codes behoorlijk heeft verkort. Dus zelfs een JavaScript-code met meerdere regels kan eenvoudig worden bereikt met een klein blok of zelfs een enkele regel met JQuery-instructie.

In dit Cheatsheet JQuery-artikel zullen we bespreken wat Jquery is en de PTP van dit framework:

Er zijn talloze websites actief op het web en de markt omvat een breed scala aan talen die de bouw van deze websites en online producten tot stand brengen. Sommige van de beroemde zijn als volgt,

HTML, CSS
Javascript en JQuery voor client-scripts
PHP voor server-einde scripting
MYSQL voor databasequery's
enz.

Voordelen van het gebruik van JQuery framework ten opzichte van anderen,

Het gaat om een enorme community en er worden heel veel plug-ins in geïntroduceerd.
lichtgewicht
krachtige kettingmogelijkheden
Korte documentatie en tutorials
Mogelijkheid om Ajax-componenten gemakkelijk te ontwikkelen
Het is de mogelijkheid om code eenvoudig en herbruikbaar te maken
Browser vriendelijk

Basisinhoud en syntaxis van Cheat Sheet JQuery:

Opnemen: Jquery opnemen in het huidige uitvoeringsscript

Syntaxis: de syntaxuele structuur van JQuery

De selector selecteert de HTML-componenten

$(Selector).action() Actie uitgevoerd op geselecteerde component

Definieert het gebruik van JQuery

Cheatsheet voor Jquery Selectors:

tag-elemententag-elementen

keuzeschakelaar	BESCHRIJVING
$ ( “*”)	Selecteert alle HTML-elementen
$ ( “P.demo”)	Selecteert tag-elementen
$ ( “: Knop”)	Selecteert de knop en invoerelementen
$ ( “Tr: zelfs”)	Selecteert de even
$ ( “Tr: oneven”)	Selecteert de oneven
$ ( “Overspanning: ouder”)	Selecteert elementen waaraan een onderliggend element is gekoppeld
$ ( “(Href)”)	Selecteert alle elementen met href-attributen
$ ( “: Input”)	Selecteert alle formulierelementen

Cheatsheet voor Jquery-evenementen: evenement is een soort actie op de webpagina. De belangrijkste gebeurtenissen zijn als volgt.

Muis evenementen	Mouse Event-methode	Toetsenbordgebeurtenissen	Keyboard Event-methode	Vorm evenementen	Formulier Evenement-methode
muis binnen	.mouseenter ()	toets indrukken	.toets indrukken()	verandering	.verandering()
Dubbelklik	.dblclick ()	Toets neer	.toets neer()	focus	.focus()
Klik	.Klik()	keyUp	.keyup ()	vervagen	.blur ()
muis verlaten	.mouseleave ()	Browsergebeurtenissen	Browser Event methode	Documentgebeurtenissen	Documentgebeurtenismethoden
muis naar beneden	.mousedown ()	Foutpopulatie	.fout()	lossen	.lossen()
muis omhoog	.mouseup ()	rol	.rol()	laden	.laden()

Ex:

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

Cheatsheet Jquery-effecten:

Basisprincipes: .hide (), .show (), .toggle () - Hiermee kunt u de geselecteerde elementen verbergen, weergeven en schakelen.

Ex:

$("p").hide();

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

de methode animate () bereidt aangepaste animaties voor
de methode delay () maakt vertraagde uitvoering van items mogelijk.
dequeue () voert de volgende reeks functies uit die in de wachtrij aanwezig zijn.

Ex:

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

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

fadeIn () Vervaagt een verborgen element
fadeout () laat toe een zichtbaar element te vervagen
fadeTo () vervaagt tot een gegeven dekking
Met fadeToggle () kan het element worden omgeschakeld met methoden voor in- en uitfaden.

Ex:

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

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

slideDown () Weergeven met een glijdende beweging overgepaste elementen
slideToggle () Toont of verbergt met een glijdende beweging te veel elementen
slideUp () Verbergt met een glijdende beweging te veel elementen

Gratis tips en trucs voor het gebruik van Cheatsheet jQuery

1) Houd een contextparameter waarmee de uitvoering vanaf een diepere DOM-vertakking kan worden gestart in plaats van dat deze wordt aangeroepen vanuit de root.

2) Controleer of het element bestaat en duw vervolgens naar voren voor uitvoering van de code.

Syntaxis:

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

3) jQuerys-gegevensmethode bindt DOM-elementen en gegevens zonder de DOM te wijzigen.

4) Controleer of een van de elementen verborgen is.

Ex:

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

5) Houd een telling van onmiddellijk voorafgaande onderliggende elementen.

6) Het vooraf laden van de afbeeldingen optimaliseert de prestaties van de uitvoering van de zoekopdracht.

7) Het is beter om te controleren of de query met succes is geladen voordat deze wordt uitgevoerd.

Ex:

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

8) Verbroken afbeeldingslinks kunnen eenvoudig worden vervangen door het onderstaande stukje code uit te voeren,

Ex:

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

9) Zorg ervoor dat het kader altijd past bij de inhoud van de pagina.

10) Eigen selectie filters kunnen worden toegevoegd in Jquery. zoals alles in de bibliotheek selectie filters ook kunnen worden aangepast. het toevoegen van een $ .expr (':') object zal dit gedaan krijgen.

Ex:

(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) Door het uitgeschakeld kenmerk toe te voegen aan de invoer, blijft het invoerveld uitgeschakeld totdat bepaalde relatieve velden zijn ingevuld.

Ex:

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

12) Zorg ervoor dat u de sectie voor foutafhandeling definieert om ajax-foutretouren af te handelen. wanneer een 400- of 500-fout wordt geraakt, wordt deze sectie automatisch geactiveerd.

Ex:

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

Cheatsheet JQuery - conclusie

Jquery vermindert de extra complexiteit die JavaScript met zich meebrengt. met meerdere entiteiten geassocieerd met jquery staat als een van de beste hulpmiddelen voor webpaginaontwikkeling op de markt. zijn lichtgewicht en efficiënte kettingmogelijkheden hebben redelijk eenvoudig webcodering gemaakt voor ontwikkelaars.

Aanbevolen artikel

Dit is een gids voor Cheatsheet JQuery, hier hebben we de inhoud en het commando besproken, evenals gratis tips en trucs voor cheatsheet JQuery. Je kunt ook het volgende artikel bekijken voor meer informatie -