Cheat sheet JQuery - Nejlepší interaktivní cheat sheet na JQuery

Úvod do Cheatheet JQuery

Jquery je meziplatformová javascriptová knihovna, která trvá na primárním záměru usnadnit kódování vývoje webu. Je prokázáno, že zavedení Jquery značně snížilo délku javascriptových kódů. Pomocí více bloků nebo dokonce jediným řádkem JQuery lze snadno dosáhnout i víceřádkového javascriptového kódu.

V tomto článku Cheatheet JQuery si probereme, co je Jquery a PTP tohoto rámce:

Na webu je aktivních mnoho webů a trh zahrnuje širokou škálu jazyků, které vytvářejí tyto weby a online produkty. Některé ze slavných jsou následující,

HTML, CSS
Javascript a JQuery pro skriptování na konci klienta
PHP pro skriptování na konci serveru
MYSQL pro dotazování databáze
atd.

Výhody použití rámce JQuery oproti ostatním,

Zahrnuje obrovskou komunitu a do ní bylo zavedeno mnoho pluginů.
Lehká váha
výkonné možnosti řetězení
Stručná dokumentace a návody
Schopnost snadno vyvíjet komponenty Ajaxu
Je to schopnost, aby byl kód jednoduchý a znovu použitelný
Prohlížeč přátelský

Základní obsah a syntaxe Cheat Sheet JQuery:

Zahrnout: Zahrnutí Jquery do aktuálního prováděcího skriptu

Syntaxe: Syntaktická struktura JQuery

Selektor vybere komponenty HTML

$(Selector).action() Akce provedená na vybrané komponentě

Definuje použití JQuery

Cheat sheet pro Jquery Selectors:

prvky značkyprvky značky

Volič	POPIS
$ („*“)	Vybere všechny prvky HTML
$ („P.demo“)	Vybere prvky značky
$ („: Button“)	Vybere tlačítko a vstupní prvky
$ („Tr: sudý“)	Vybere sudý
$ („Tr: lichý“)	Vybere liché
$ („Span: parent“)	Vybírá prvky, které mají přidružený podřízený prvek
$ („(Href)“)	Vybere všechny prvky s atributy href
$ („: Input“)	Vybere všechny prvky formuláře

Cheat sheet for Jquery Events: Událost je nějaký druh akce na webové stránce. Klíčové události jsou následující.

Události myši	Metoda události myši	Události z klávesnice	Metoda události klávesnice	Události formuláře	Metoda události formuláře
myši vstoupit	.mouseenter ()	stisknutí klávesy	.keypress ()	změna	.změna()
Dvojklik	.dblclick ()	Keydown	.keydown ()	soustředit se	.soustředit se()
klikněte	.click ()	Keyup	.keyup ()	rozmazat	.rozmazat()
myš opustit	.mouseleave ()	Události prohlížeče	Metoda události prohlížeče	Události dokumentu	Metody události dokumentu
myš dolů	.mousedown ()	Chyba populace	.chyba()	vyložit	.vyložit()
myš nahoru	.mouseup ()	svitek	.svitek()	zatížení	.zatížení()

Příklad:

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

Cheat sheet Jquery effects:

Základy: .hide (), .show (), .toggle () - Umožňuje skrýt, zobrazit a přepnout vybrané prvky.

Příklad:

$("p").hide();

Vlastní: .animate (), .delay (), .queque (), .stop ()

metoda animate () připravuje vlastní animace
metoda delay () umožňuje zpožděné provedení položek.
dequeue () provede další posloupnost funkcí přítomných ve frontě.

Příklad:

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

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

fadeIn () Ztrácí skrytý prvek
fadeout () umožňuje vyblednutí viditelného prvku
fadeTo () mizí podle dané neprůhlednosti
fadeToggle () umožňuje prvku přepínat s metodami fade in a fade out.

Příklad:

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

Snímek: slideDown (), slideUp (), slideToggle ()

slideDown () Displej s překrývajícími se prvky s posuvným pohybem
slideToggle () Zobrazí nebo skryje s prvky s posuvným pohybem
slideUp () Skryje se překrývajícími se prvky posuvným pohybem

Tipy a triky zdarma s využitím cheat sheet jQuery

1) Ponechejte kontextový parametr, který umožňuje spuštění spouštění kopu z hlubší větve DOM namísto vyvolání z kořenového adresáře.

2) Zkontrolujte, zda prvek existuje, a potom zatlačte dopředu pro provedení kódu.

Syntaxe:

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

3) Metoda dat jQuerys váže prvky DOM a data bez úpravy DOM.

4) Ověřte, zda je některý z prvků skrytý.

Příklad:

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

5) Udržujte počet bezprostředně předcházejících podřízených prvků.

6) Načtení obrázků předem optimalizuje výkon provádění dotazu.

7) Před provedením je lepší zkontrolovat, zda byl dotaz úspěšně načten.

Příklad:

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

8) Poškozené odkazy na obrázky lze snadno nahradit provedením níže uvedeného kódu,

Příklad:

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

9) Rám musí být vždy zkonstruován tak, aby odpovídal obsahu stránky.

10) Do Jquery lze přidat filtry vlastního výběru. stejně jako všechno ve filtrech pro výběr knihovny lze také přizpůsobit.Přidáním objektu $ .expr (':') se tak stane.

Příklad:

(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) Přidání atributu disabled ke vstupu umožňuje ponechat vstupní pole deaktivované, dokud nejsou vyplněna určitá relativní pole.

Příklad:

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

12) Nezapomeňte definovat část obsluhy chyb, aby bylo možné zpracovat návraty chyb Ajax. pokud dojde k chybě 400 nebo 500, pak se tato část automaticky spustí.

Příklad:

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

Cheat sheet JQuery - závěr

Jquery snižuje další složitost, kterou s sebou skrývá javascript. s více entitami spojenými s jQuery stojí mezi špičkovými nástroji pro vývoj webových stránek na trhu. díky svým lehkým a efektivním možnostem řetězení vývojářům docela usnadnilo webové kódování.

Doporučený článek

To byl průvodce Cheat sheet JQuery zde jsme diskutovali o obsahu a příkaz, stejně jako bezplatné tipy a triky cheat sheet JQuery se můžete také podívat na následující článek se dozvědět více -