Introduktion till Cheatsheet JQuery

Jquery är ett javascriptbibliotek över flera plattformar som har en bestående avsikt att underlätta webbutveckling att koda. Det är ett beprövat uttalande att införandet av Jquery har ganska minskat längden på javascript-koder. Så även en javascript-kod med flera linjer kan enkelt uppnås med ett litet block eller till och med en enda rad med JQuery-uttalande.

I denna Cheatsheet JQuery-artikel kommer vi att diskutera vad Jquery är och PTP för detta ramverk:

Det finns många webbplatser som är aktiva på nätet, och marknaden inkluderar ett brett spektrum av språk som gör byggandet av dessa webbplatser och onlineprodukter. Några av de berömda är följande:

  • HTML, CSS
  • Javascript och JQuery för klientändskript
  • PHP för serverändskript
  • MYSQL för databasfrågor
  • etc.

Fördelar med att använda JQuery-ramverket framför andra,

  • Det involverar en enorm community och en hel del plugins som introduceras i den.
  • Lättvikt
  • kraftfulla kedjefunktioner
  • Kort dokumentation och handledning
  • Förmåga att enkelt utveckla Ajax-komponenter
  • Det är kapacitet att göra koden enkel och återanvändbar
  • Webbläsarvänlig

Grundläggande innehåll och syntax för Cheat Sheet JQuery:

Inkludera: Inkludera Jquery till det aktuella exekveringsskriptet


Syntax: JQuerys syntaxuella struktur

Väljaren väljer HTML-komponenterna

$(Selector).action() Åtgärd utförd på vald komponent

Definierar användningen av JQuery

Fuskark för Jquery Selectors:

tagelementtagelement
VäljareBESKRIVNING
( ”*”) $Väljer alla HTML-element
$ ( ”P.demo”)Väljer

tagelement
$ ( ”Knappen”)Väljer knapp och ingångselement
$ ( ”Tr: även”)Väljer det jämnt
$ ( ”Tr: udda”)Väljer udda
$ ( ”Span: förälder”)Väljer element som har ett underordnat element
$ ( ”(Href)”)Väljer alla element med href-attribut
$ ( ”Input”)Väljer alla formelement

Fuskark för Jquery-händelser: Händelse är en slags handling på webbsidan. De viktigaste händelserna är följande.

MushändelserMushändelsemetodTangentbordshändelserTangentbordshändelsemetodForma händelserForm Händelsemetod
musen går in.mouseenter ()knapptryckning.knapptryckning()förändra.förändra()
Dubbelklicka.dblclick ()Nyckel ner.nyckel ner()fokus.fokus()
klick.klick()keyUp.keyup ()fläck.fläck()
mus lämnar.mouseleave ()WebbläsarhändelserMetod för webbläsarhändelseDokumenthändelserDokumenthändelsemetoder
musen ner.mousedown ()Felpopulation.fel()lasta av.lasta av()
mus upp.mouseup ()skrolla.skrolla()ladda.ladda()

Ex:

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

Fuskark Jquery-effekter:

Grunder: .hide (), .show (), .toggle () - Gör att gömma, visa och växla de markerade elementen.

Ex:

$("p").hide();

Anpassad :. Animera (), . Försena (), .dequeue (), .stop ()

  • metoden animera () förbereder anpassade animationer
  • metoden fördröjning () möjliggör försenad exekvering av objekt.
  • dequeue () kör nästa sekvens av funktioner som finns i kön.

Ex:

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

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

  • fadeIn () bleknar ett doldt element
  • fadeout () tillåter att ett synligt element bleknar
  • fadeTo () bleknar till en viss opacitet
  • fadeToggle () tillåter elementet att växla med fade in och bleka ut metoder.

Ex:

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

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

  • slideDown () Skärm med överdrivna element med glidande rörelse
  • slideToggle () Visar eller döljer med överdrivna element med glidande rörelse
  • slideUp () Döljer med en glidande rörelse överöverkomna element

Gratis tips och tricks för att använda Cheat sheet jQuery

1) Behåll en kontextparameter som gör att exekveringen kan starta från en djupare DOM-gren istället för att åberopa från roten.

2) Kontrollera om elementet finns och tryck sedan framåt för körning av koden.

Syntax:

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

3) jQuerys datametod binder DOM-element och data utan att modifiera DOM.

4) Kontrollera om något av elementen är dolda.

Ex:

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

5) Håll ett antal av omedelbara föregående barnelement.

6) Att ladda bilderna tidigare optimerar prestanda för frågetillverkning.

7) Det är bättre att kontrollera att frågan har laddats med framgång innan den körs.

Ex:

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

8) Trasiga bildlänkar kan enkelt bytas ut genom att utföra nedanstående kodkod,

Ex:

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

9) Ramen måste alltid se till att sidans innehåll passar in.

10) Egna filter kan läggas till i Jquery. som allt i bibliotekets valfilter kan också anpassas. Att lägga till ett $ .expr (':') -objekt gör detta gjort.

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) Att lägga till det inaktiverade attributet till ingången gör det möjligt att hålla inmatningsfältet inaktiverat tills vissa relativa fält är fyllda.

Ex:

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

12) Se till att definiera felhanteringsavsnittet för att hantera ajaxfelretur. när ett 400 eller 500-fel träffas kommer detta avsnitt automatiskt att triggas.

Ex:

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

Fuskark JQuery - slutsats

Jquery minskar den ytterligare komplexitet som javascript innehåller. med flera enheter associerade med jquery står som bland de bästa verktygen för utveckling av webbsidan på marknaden. dess lätta och effektiva kedjefunktioner har ganska enkelt gjort webbkodning enkelt för utvecklare.

Rekommenderad artikel

Detta har varit en guide till Cheat sheet JQuery här, vi har diskuterat innehållet och kommandot samt gratis tips och tricks av cheat sheet JQuery. Du kan också titta på följande artikel för att lära dig mer -

  1. jQuery intervjufrågor
  2. Fuskark för C ++
  3. Fuskblad för SQL
  4. JavaScript vs JQuery
  5. Bästa fuskarkiv för UNIX
  6. Cheat Sheet JavaScript: Vilka är fördelarna?
  7. Topp 8 jQuery-väljare med kodimplementering

Kategori:

Mjukvaruutveckling