Cheat sheet JQuery - A legjobb interaktív csaló lap a JQuery-n

Bevezetés a JQuery cheatsheetbe

A Jquery egy platformon átívelő javascript könyvtár, amely továbbra is fennáll annak elsődleges célja, hogy könnyebben kódolja a webfejlesztést. Bizonyított állítás, hogy a Jquery bevezetése meglehetősen csökkentette a javascript kódok hosszát. Így még a többsoros javascript kód is könnyen elérhető egy kis blokk vagy akár a JQuery utasítás egyetlen sorával.

Ebben a Cheatsheet JQuery cikkben megvitatjuk, mi a Jquery, és ennek a keretnek a PTP-jét:

Számos aktív webhely található az interneten, és a piac olyan nyelvek széles skálájára terjed ki, amelyek ezen webhelyek és online termékek felépítését végzik. Néhány híres a következő,

HTML, CSS
Javascript és JQuery az ügyfélvég szkripteléséhez
PHP szervervégű szkriptekhez
MYSQL adatbázis lekérdezéshez
stb.

A JQuery keretrendszer használatának előnyei másokkal szemben,

Ez egy hatalmas közösséget és egy sor beépített plugint tartalmaz.
Könnyűsúlyú
erőteljes láncolási képességek
Rövid dokumentáció és útmutatók
Képesség az Ajax komponensek egyszerű fejlesztésére
Az a képesség, hogy a kódot egyszerűvé és újrafelhasználhatóvá tegye
Böngészőbarát

A JQuery cheat alaplap tartalma és szintaxisa:

Tartalmazza: Jquery beépítése az aktuális Végrehajtási szkriptbe

Szintaxis: A JQuery szintaxual felépítése

A Kiválasztó kiválasztja a HTML összetevőket

$(Selector).action() A kiválasztott komponensre végrehajtott művelet

Meghatározza a JQuery használatát

Cheat lap a Jquery Selectors számára:

címke elemekcímke elemek

Választó	LEÍRÁS
$ ( „*”)	Az összes HTML elemet kiválasztja
$ ( „P.demo”)	Kiválasztja címke elemek
$ ( „:” Gombot)	Kiválasztja a gombot és a bemeneti elemeket
$ ( „Tr: még a”)	A párosot választja
$ ( „Tr: páratlan”)	Kiválasztja a páratlan
$ ( „Span: szülő”)	Olyan elemeket választ ki, amelyekhez gyermekelem van társítva
$ ( „(Href)”)	Az összes elemet kiválasztja a href attribútumokkal
$ ( „: Input”)	Az összes űrlapelemet kiválasztja

A Jquery Események cheat lapja: Az esemény valamilyen művelet a weboldalon, A következő fő események állnak rendelkezésre.

Egér események	Egér Esemény módszer	Billentyűzet események	Billentyűzet-esemény módszer	Formaesemények	Form Event módszer
egér belépés	.mouseenter ()	gombnyomás	.gombnyomás()	változás	.változás()
Dupla kattintás	.dblclick ()	Keydown	.keydown ()	fókusz	.fókusz()
kettyenés	.Kattintson ()	Keyup	.keyup ()	elhomályosít	.elhomályosít()
egér szabadság	.mouseleave ()	Böngésző eseményei	Böngésző-esemény módszer	Dokumentum események	Dokumentum esemény módszerei
egér le	.mousedown ()	Hibapopuláció	.hiba()	leterhelő	.unload ()
egér fel	.mouseup ()	tekercs	.tekercs()	Betöltés	.Betöltés()

Például:

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

Cheat sheet Jquery hatások:

Alapok: .hide (), .show (), .toggle () - lehetővé teszi a kiválasztott elemek elrejtését, megjelenítését és váltását.

Volt:

$("p").hide();

Egyéni: .animate (), .delay (), .dequeue (), .stop ()

az animáló () módszer egyedi animációkat készít
a késleltetés () módszer lehetővé teszi az elemek késleltetett végrehajtását.
dequeue () hajtsa végre a sorban lévő funkciók következő sorozatát.

Például:

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

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

fadeIn () Elrejti a rejtett elemet
A fadeout () lehetővé teszi a látható elem elhalványítását
fadeTo () elhalványul egy adott átlátszósághoz
A fadeToggle () lehetővé teszi az elem számára, hogy bekapcsoljon a fade in és fade out módszerekbe.

Például:

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

Dia: slideDown (), slideUp (), slideToggle ()

slideDown () Kijelző csúszó mozgással, túlméretezett elemekkel
slideToggle () Megjeleníti vagy elrejti a csúszó mozgással túlméretezett elemeket
slideUp () Csúszó mozgással elrejti a túlméretezett elemeket

Ingyenes tippek és trükkök a Cheat sheet jQuery használatához

1) Tartsa a környezeti paramétert, amely lehetővé teszi a végrehajtásnak, hogy a mélyebb DOM ágból indítsa el a gyökérből történő meghívás helyett.

2) Ellenőrizze, hogy létezik-e az elem, majd tolja előre a kód végrehajtásához.

Szintaxis:

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

3) A jQuerys adatmódszer a DOM elemeit és adatait megköti a DOM módosítása nélkül.

4) Ellenőrizze, hogy az elemek rejtettek-e.

Például:

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

5) Vegyen számot a közvetlenül megelőző gyermek elemekről.

6) A képek betöltése előtti optimalizálja a lekérdezés végrehajtásának teljesítményét.

7) Jobban ellenőrizze, hogy a lekérdezés sikeresen betöltődött-e, mielőtt végrehajtja.

Volt:

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

8) A törött kép linkek egyszerűen cserélhetők az alábbi kódrészlet végrehajtásával,

Volt:

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

9) A keretet mindig ügyelni kell arra, hogy illeszkedjen az oldal tartalmához.

10) Saját kiválasztási szűrők hozzáadhatók a Jquery alkalmazáshoz. ugyanúgy, mint a könyvtárat kiválasztó szűrőkben, minden testreszabható. A $ .expr (':') objektum hozzáadásával ez megtörténik.

Például:

(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) A letiltott attribútum hozzáadásával a bemeneti mezőt addig lehet letiltva, amíg bizonyos relatív mezők kitöltésre nem kerülnek.

Volt:

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

12) Ügyeljen arra, hogy meghatározza a hibakezelő szakaszt az ajax hibavisszaadások kezelése érdekében. Ha 400 vagy 500 hibát észlel, akkor ez a szakasz automatikusan elindul.

Volt:

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

JQuery cheat sheet - következtetés

A Jquery csökkenti a javascript további bonyolultságát. a jquery standokkal társított több entitás mellett, mint a piacon a legfontosabb weboldal-fejlesztő eszközök között. könnyű és hatékony láncolási képességei révén a webkódolás a fejlesztők számára könnyen megtörtént.

Ajánlott cikk

Ez egy útmutató a JQuery Cheat laphoz, itt megvitattuk a JQuery cheat lap tartalmát és parancsát, valamint ingyenes tippeket és trükköket. További tudnivalókat a következő cikkben találhat -