Cheat sheet JQuery Najlepšie interaktívne podvádzať list na JQuery

Úvod do Cheatheet JQuery

Jquery je medziplatformová knižnica javascript, ktorá je trvalá na primárnom úmysle uľahčiť kódovanie vývoja webových aplikácií. Je dokázané, že zavedenie Jquery značne znížilo dĺžku javascriptových kódov. Aj pomocou malého bloku alebo dokonca jedného riadku JQuery kódu je možné ľahko dosiahnuť aj viacriadkový javascriptový kód.

V tomto článku Cheatheet JQuery diskutujeme o tom, čo je Jquery, a o PTP tohto rámca:

Na webe je veľa webových stránok a trh zahŕňa širokú škálu jazykov, ktoré umožňujú zostavenie týchto webových stránok a online produktov. Niektoré z tých slávnych sú nasledujúce,

HTML, CSS
Javascript a JQuery na skriptovanie koncových klientov
PHP na skriptovanie na konci servera
MYSQL pre dotazovanie databázy
atď.

Výhody použitia rámca JQuery v porovnaní s ostatnými,

Zahŕňa obrovskú komunitu a do nej bolo zavedených veľa doplnkov.
ľahká váha
výkonné možnosti reťazenia
Stručná dokumentácia a návody
Schopnosť ľahko vyvíjať komponenty Ajaxu
Je to jednoduché, aby bol kód jednoduchý a opakovane použiteľný
Prehliadač priateľský

Základný obsah a syntax Cheat Sheet JQuery:

Zahrnúť: Zahrnutie Jquery do aktuálneho skriptu na vykonanie

Syntax: Syntaxová štruktúra JQuery

Selektor vyberie komponenty HTML

$(Selector).action() Akcia vykonaná na vybranom komponente

Definuje použitie JQuery

Cheat sheet pre Jquery Selectors:

prvky značkyprvky značky

selektor	POPIS
$ ( "*")	Vyberie všetky prvky HTML
$ ( "P.demo")	vyberie prvky značky
$ ( ": Tlačidlo")	Vyberie tlačidlo a vstupné prvky
$ ( "Tr: i")	Vyberie párne
$ ( "Tr: odd")	Vyberá nepárne
$ ( "Span: rodič")	Vyberie prvky, ktoré majú priradený podradený prvok
$ ( "(Preklad)")	Vyberie všetky prvky s atribútmi href
$ ( ": Input")	Vyberie všetky prvky formulára

Cheat sheet for Jquery Events: Udalosť je nejaký druh akcie na webovej stránke. Kľúčové udalosti sú nasledujúce.

Udalosti myši	Metóda udalosti myši	Udalosti klávesnice	Metóda udalosti klávesnice	Udalosti formulára	Metóda udalosti formulára
myši vstúpiť	.mouseenter ()	stlačenie klávesy	.stlačenie klávesy()	zmena	.change ()
Dvojité kliknutie	.dblclick ()	KeyDown	.keydown ()	ohnisko	.focus ()
cvaknutie	.click ()	KeyUp	.keyup ()	rozmazať	.rozmazať()
myš opustiť	.mouseleave ()	Udalosti prehliadača	Metóda udalosti prehliadača	Udalosti dokumentu	Metódy udalosti dokumentu
myš dole	.mousedown ()	Chybová populácia	.chyba()	vyložiť	.unload ()
myš hore	.mouseup ()	zvitok	.scroll ()	naložiť	.naložiť()

Príklad:

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

Cheat sheet Jquery účinky:

Základy: .hide (), .show (), .toggle () - Umožňuje skrývať, zobrazovať a prepínať vybrané prvky.

ex:

$("p").hide();

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

metóda animate () pripravuje vlastné animácie
metóda delay () umožňuje oneskorené vykonanie položiek.
dequeue () vykoná ďalšiu sekvenciu funkcií prítomných vo fronte.

Príklad:

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

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

fadeIn () Stlmí skrytý prvok
fadeout () umožňuje vyblednutie viditeľného prvku
fadeTo () mizne s danou nepriehľadnosťou
fadeToggle () umožňuje prvku prepínať sa metódami stmievania a stmievania.

Príklad:

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

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

slideDown () Displej s prvkami s posuvným pohybom
slideToggle () Zobrazí alebo skryje s prvkami s posuvným pohybom
slideUp () Skryje sa s prvkami s posuvným pohybom

Tipy a triky na používanie Cheat sheet jQuery

1) Ponechajte kontextový parameter, ktorý umožňuje spustenie spúšťania z hlbšej vetvy DOM namiesto vyvolávania z koreňa.

2) Skontrolujte, či prvok existuje, a potom zatlačte na vykonanie kódu.

Syntax:

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

3) Metóda jQuerys data viaže prvky DOM a údaje bez úpravy DOM.

4) Skontrolujte, či sú niektoré z prvkov skryté.

Príklad:

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

5) Majte počet bezprostredne predchádzajúcich podriadených prvkov.

6) Načítanie obrázkov vopred optimalizuje výkon vykonávania dotazu.

7) Je lepšie skontrolovať, či bol dotaz úspešne načítaný pred jeho vykonaním.

ex:

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

8) Nefunkčné obrázkové odkazy môžu byť ľahko nahradené vykonaním nižšie uvedeného kódu,

ex:

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

9) Rám sa musí vždy uistiť, že zodpovedá obsahu stránky.

10) Vlastné výberové filtre môžu byť pridané do Jquery. rovnako ako všetko vo filtroch na výber knižnice sa dá tiež prispôsobiť. Pridaním objektu $ .expr (':') to urobíte.

Prí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) Pridanie atribútu disabled na vstup umožňuje ponechať vstupné pole vypnuté, kým sa nevyplnia určité relatívne polia.

ex:

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

12) Uistite sa, že ste definovali časť obsluhy chýb, aby ste zvládli návraty chýb ajaxu. ak sa vyskytne chyba 400 alebo 500, táto sekcia sa automaticky spustí.

ex:

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

Cheat sheet JQuery - záver

Jquery znižuje dodatočnú zložitosť, ktorú s ňou javascript obsahuje. s viacerými subjektmi spojenými s jQuery stojí medzi najlepšími nástrojmi na vývoj webových stránok na trhu. jeho ľahké a efektívne reťazenie umožnilo vývojárom ľahko kódovanie webu.

Odporúčaný článok

Toto bol sprievodca Cheat sheet JQuery, kde sme diskutovali o obsahu a príkazoch, ako aj bezplatné tipy a triky cheat sheet JQuery, prečítajte si tiež nasledujúci článok, aby ste sa dozvedeli viac -