Bevezetés
Ha ismered a programozás világát, tudod, milyen fontosak a programozási nyelvek. A legfontosabbak és leggyakrabban használtak közé tartozik a HTML, CSS, és a JavaScript. Amíg a HTML és a CSS a weboldalad tervezésében és strukturálásában segít, addig a JavaScript lehetővé teszi, hogy interaktívvá tedd azt. Számos olyan JavaScript-könyvtár létezik, amelyet használhatsz, hogy egyedi funkciókat adj a webes projektedhez. Ezek közé tartozik a jQuery könyvtár is.
jQuery önmagában nem programozási nyelv. Ez egy olyan eszköz, amellyel megkönnyítheted a JavaScriptben történő webfejlesztést. Ez segít a feladatok egyszerűbbé és egyértelműbbé tételében. Híresen a „Write Less, Do More” (Írj kevesebbet, tégy többet) koncepción alapul. Amellett, hogy megkönnyíti a webfejlesztést, a jQuery a böngészők közötti kompatibilitás előnyét is biztosítja számodra. Ez azt jelenti, hogy a kód megfelelően jelenik meg, függetlenül attól, hogy melyik böngészőt használják a megjelenítéshez.
Hogy jobban szemléltessük, hogyan teszi a jQuery tömörebbé a dolgokat, vegyünk egy példát. Tegyük fel, hogy a „Hello, World!” programot írjuk meg. Így nézne ki JavaScriptben, illetve jQuery-ben:
|
1 2 |
JavaScript document.getElementById("demo").innerHTML = "Hello, World!"; |
|
1 2 |
jQuery $("#demo").html("Hello, World!"); |
Mindkét kódsor ugyanazt az eredményt adja. Azonban, mint látható, a jQuery tömörebbé és lényegretörőbbé teszi az írást.
Ebben az útmutatóban mindent megtudhatsz a jQuery alapjairól. Az eszközt letöltheted magadnak erről a weboldalról. Úgy járunk el, mintha teljesen kezdő lennél, akinek nincs semmilyen ismerete a jQuery-ről. Ez az útmutató megtanítja, hogyan telepítsd a jQuery-t, és bemutat néhány hozzá kapcsolódó alapvető fogalmat. Megvizsgálunk néhány gyakori szelektort, eseményt és effektust a jQuery-ben. Ezután megtanulhatod, hogyan tesztelhetsz olyan fejlesztési koncepciókat, mint az API, a DOM és a CDN, hasznos példákon keresztül. Olvass tovább, hogy megismerkedj a jQuery világával.
Mielőtt elkezdenénk
Vannak bizonyos dolgok, amelyek előnyödre válnak, ha előre ismered őket. Például a HTML és a CSS működésének alapvető megértése sokat segít majd. Erre ebben az útmutatóban nem térünk ki. Abból a feltételezésből indulunk ki, hogy legalább egy egyszerű weboldal beállítását tudod kezelni. Általánosságban is rendelkezned kell a programozás működésének alapvető megértésével. Ez nem feltétlenül jelenti azt, hogy a JavaScript szakértőjének kell lenned a folytatáshoz. Egyszerűen elegendő, ha némileg ismered az olyan dolgokat, mint a logika, a változók és az adattípusok a programozásban.
Hogyan állítsd be a jQuery-t a rendszereden
Először is lássuk, hogyan állíthatod be a jQuery-t a rendszereden. A jQuery JavaScript-fájlként érhető el, mivel ez egy JavaScript-könyvtár. Ezt a fájlt be kell linkelned a weboldalunk HTML-kódjába. Ennek két módja van. Mint korábban említettem, az egyik módja az, hogy letöltöd innen. A hivatalos weboldalon kívül a jQuery-t a Google Hosted Libraries oldalon is megtalálod pont itt.
A másik módszer az, hogy a Content Delivery Network-öt (tartalomkézbesítő hálózat) vagy CDN-t használod a fájl linkelésére. A CDN olyan szerverek csoportjából áll, amelyek segítenek a webtartalom helyi kézbesítésében. A jQuery-fájl CDN-en keresztüli kiszolgálása lehetővé teszi, hogy a tartalom sokkal gyorsabban eljusson a felhasználóhoz. Ezért ettől a ponttól kezdve a Content Delivery Network-öt fogjuk használni ebben az útmutatóban.
Az első példánkban egy webes projektet fogunk készíteni. Ez a kis projekt tartalmaz egy style.css fájlt a css/ könyvtárban. A script.js a js/ könyvtárban található. Végül egy index.html található a webes projekt gyökerében:
Ezen projektnek megfelelően létrehozunk egy HTML vázat. Ezt követően elmentjük mint index.html:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!doctype html> <html lang="en"> <head> <title>jQuery Demo</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> </html> |
Itt fogjuk belinkelni a jQuery fájlt. Ahogy korábban említettem, CDN-en keresztül fogjuk linkelni. A jQuery linket a </body> tag elé kell beillesztened. Ezután hozzáadhatod a saját egyedi JavaScript fájlodat, ami a mi példánkban a script.js volt. Ne feledd, hogy a JavaScript fájlt mindig a jQuery könyvtár alá kell helyezned, így:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!doctype html> <html lang="en"> <head> <title>jQuery Demo</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="js/script.js"></script> </body> </html> |
Mit tennél, ha ehelyett a jQuery könyvtár helyi másolatát töltenéd le? Ebben az esetben a jQuery fájlt a js/ mappába kell mentened. Ezután így linkelheted be: js/jquery.min.js.
jQuery: Az alapok
Mielőtt elmerülnénk a részletekben, tekintsük át a jQuery néhány alapvető fogalmát. A jQuery fő feladata, hogy a DOM segítségével összekapcsolja a böngészőben lévő HTML-elemeket. A DOM a Document Object Model rövidítése. Ez az a módszer, amely lehetővé teszi a JavaScript számára, hogy interakcióba lépjen a HTML-lel a böngészőben. A DOM-ot úgy jelenítheted meg, ha jobb gombbal kattintasz a weboldalra, és a Vizsgálat (Inspect) lehetőséget választod. A Fejlesztői eszközökben megjelenő HTML maga a DOM.
A csomópont (node) egy egyedi HTML-elem a DOM-ban. A JavaScript képes módosítani ezeket az objektumokat vagy elemeket. Úgy képzelheted el ezeknek az objektumoknak az elrendezését, mint egy faszerkezetet. <html> található a gyökérnél, míg a többi elem ebből ágazik el.
Ha jobb gombbal kattintasz, és az Oldal forrásának megtekintése lehetőséget választod, láthatod a weboldal nyers HTML kódját. Ne feledd, hogy ez nem ugyanaz, mint a DOM. Míg a DOM módosítható, a HTML forrás teljesen statikus. A JavaScriptben végzett módosítások nem lesznek hatással erre a HTML fájlra. A teljes <html> csomópont egy document objektumnak nevezett külső rétegbe van csomagolva.
A következőkben meglátjuk, hogyan módosíthatod a weboldaladat és annak funkcióit a jQuery segítségével. Előtte azonban meg kell győződnöd arról, hogy az oldal készen áll.
Írd be a következőt, miután létrehoztad a script.js fájlt a js/ könyvtárban:
|
1 2 3 4 5 |
$(document).ready(function() { // ide kerül az összes egyedi jQuery kód }); |
Mostantól minden megírt kódod ebbe a kódba lesz ágyazva. A jQuery észlelni fogja a kód készenlétét. Az ebben a függvényben lévő kód csak akkor fut le, ha a DOM már előkészült.
Visszatérünk a „Hello, World!” szkriptre, amelyről a bemutató elején beszéltünk. Tegyük fel, hogy el akarjuk indítani ezt a szkriptet. Ahhoz, hogy a jQuery segítségével kiírjuk ezt a szöveget a böngészőbe, hozzá kell rendelnünk a demo azonosítót (ID) egy ilyen üres blokkszintű bekezdéshez:
|
1 2 3 4 5 6 |
... <body> <p id="demo"></p> ... |
A jQuery meghívásához a $ szimbólumot kell használnunk. CSS szintaxist és metódusokat alkalmazhatsz a DOM eléréséhez a jQuery segítségével. Egy egyszerű példa a következő:
|
1 |
$("selector").method(); |
Ezt a formátumot fogod használni a jQuery-vel. Már tudjuk, hogy a # szimbólum jelöli az ID-t a CSS-ben. Ezért a demo ID-t a #demo.html() szelektorral érheted el. Ez a metódus lehetővé teszi az elemben lévő HTML módosítását.
A következő kód megmutatja, hogyan helyezzük el a „Hello, World” programot a script.js fájl jQuery ready() wrapperébe:
|
1 2 3 |
$(document).ready(function() { $("#demo").html("Hello, World!"); }); |
Ezt a kódsort hozzá kell adnod a script.js fájlhoz. Mentsd el ezt a fájlt. Ezután megnyithatod a index.html fájlt a böngészőben. Látnod kell a Hello, World! kimenetet. Ez egyúttal jó alkalom arra is, hogy a jobb megértés érdekében ellenőrizd a DOM-ot. Kattints jobb gombbal a „Hello, World!” szövegre. Válaszd az Elem vizsgálata (Inspect Element) lehetőséget. A DOM ezt fogja mutatni: <p id="demo">Hello, World!</p>. Az Oldal forrásának megtekintése (View Page Source) lehetőségre kattintva viszont csak a nyers HTML fog megjelenni. Ebben az esetben ez a következő lenne: <p id="demo"></p>.
Mik azok a szelektorok?
Most rátérünk a jQuery néhány kritikus fontosságú funkciójára. Ezek közé tartoznak a szelektorok. A jQuery szelektorok megmondják a programnak, hogy mely elemekkel szeretnél dolgozni, vagy melyeket szeretnéd „kijelölni”. Nagyon hasonlítanak a CSS-ben használt szelektorokhoz. Íme a jQuery szelektorok elérésének alapvető formátuma:
|
1 |
$("selector") |
Használhatsz egyszeres vagy kétszeres idézőjelek közé zárt karakterláncokat is, bár a jQuery stílusútmutató az utóbbit részesíti előnyben. Ha szeretnéd, megtekintheted a jQuery szelektorok teljes listáját ezen a hivatalos oldalon. Tájékoztatásul íme néhány a leggyakrabban használt szelektorok közül:
-
$("*")
Ez a Wildcard (helyettesítő) szelektor. Az oldal összes elemét kijelöli.
-
$(this)
Ez a Current (aktuális) szelektor. Azt az elemet jelöli ki, amelyen éppen műveletet végzel egy függvénnyel.
-
$("p")
Ez a Tag (címke) szelektor. Kijelöli a <p> címke összes előfordulását.
-
$(".example")
Ez a Class (osztály) szelektor. Kijelöl minden egyes elemet, amelyre az example osztály van alkalmazva.
-
$("#example")
Ez az Id szelektor. Csak az example azonosító egyetlen előfordulását jelöli ki.
-
$("[type='text']")
Ez az Attribute (attribútum) szelektor. Kijelöl minden olyan elemet, amelynél a text érték van alkalmazva a type attribútumra.
-
$("p:first-of-type")
Ez a Pseudo Element (pszeudoelem) szelektor. Segít kijelölni az első <p>.
Mik azok az események?
A weboldalnak vannak olyan funkciói, amelyek azonnal betöltődnek, amint az oldal betöltődik. Gondoljunk a „Hello, World” példára. Ebben az esetben a kódot közvetlenül a forrás HTML-hez is hozzáadhattuk volna. De mi történik akkor, ha egy funkció betöltéséhez felhasználói interakcióra van szükség? Itt válik hasznossá a jQuery.
Tegyük fel, hogy azt szeretnénk, hogy egy szöveg jelenjen meg, miután a felhasználó rákattint egy gombra. Ennek a funkciónak a hozzáadásához egy <button> elemet kell hozzáadnod az index.html fájlhoz. Ez a gomb a kattintás „eseményt” fogja figyelni:
|
1 2 3 4 5 6 |
... <body> <button id="trigger">Kattints rám</button> <p id="demo"></p> |
Minden olyan alkalom, amikor a felhasználó interakcióba lép a böngészővel, eseménynek minősül. Az interakció történhet az egérmutatóval vagy a billentyűzettel. A fenti példában egy gombra való kattintás az eseményünk. Ezért nevezik kattintásos (click) eseménynek.
Ezután meg kell hívnunk egy függvényt, amely tartalmazza a „Hello, World” kódot. Ehhez a click() metódust fogjuk használni:
|
1 2 3 |
$(document).ready(function() { $("#trigger").click(); }); |
Amint láthatod, a <button> elemünk azonosítója (ID) trigger. Ezt a $(“#trigger") segítségével jelölhetjük ki. A click() metódus hozzáadásának célja, hogy a program figyelje a kattintás eseményt. Ezután a szöveges kódot tartalmazó függvényt a metóduson belülre helyezzük:
|
1 2 3 |
function() { $("#demo").html("Hello, World!"); } |
A kódunk a végén valahogy így fog kinézni:
|
1 2 3 4 5 |
$(document).ready(function() { $("#trigger").click(function() { $("#demo").html("Hello, World!"); }); }); |
Most már elmentheted a script.js fájlt. Frissítsd az index.html a böngészőben a változtatások alkalmazásához. Miután rákattint a gombra, megjelenik a „Hello, World!” tesztkimenet.
A kattintáson (click) kívül más típusú jQuery események is léteznek. Ezen eseménymetódusok teljes listáját megtekintheti innen: ez a hivatalos dokumentum. Íme néhány a leggyakrabban használtak közül, amelyekkel alkalmanként találkozhat:
-
click()
A click esemény egyetlen egérkattintásra hajtja végre a kódot.
-
hover()
A hover esemény akkor hajtja végre a kódot, amikor az egérmutató egy elem fölé ér. Azt is megadhatja, hogy a kódot az egér belépése vagy távozása váltsa-e ki a mouseenter() és mouseleave() eseményekkel.
-
submit()
Egy űrlap elküldése váltja ki a kódot.
-
scroll()
A képernyő lefelé görgetése lesz az az esemény, amely végrehajtja a kódot.
-
keydown()
A billentyűzet lefelé gombjának megnyomása hajtja végre a kódot.
Mik azok az effektusok?
jQuery effektusok együttműködnek a jQuery eseményekkel. Az effektusok fő célja, ahogy a kifejezés is sugallja, animációk hozzáadása az oldalhoz. Lehetővé teszi az elemek manipulálását különféle effektusok alkalmazásához. Ezeket az effektusokat bizonyos események válthatják ki.
A jobb megértés érdekében vegyünk egy példát. Tegyük fel, hogy meg akarunk nyitni és be akarunk zárni egy felugró átfedést (overlay). Ennek egyik módja két különböző ID használata lenne. Az egyik megnyitná az átfedést, a másik pedig bezárná. A másik módszer egy osztály (class) használata erre. Az osztály használatának előnye, hogy ugyanaz a funkció képes megnyitni és bezárni az átfedést.
Nyissa meg a index.html fájlt. Ezután törölje a <button> és <p> tageket a body-ból. Most adja hozzá a következő kódsorokat a HTML-hez:
|
1 2 3 4 5 6 7 8 9 10 |
... <body> <button class="trigger">Open</button> <section class="overlay"> <button class="trigger">Close</button> </section> ... |
Nézzük meg a style.css fájlt legközelebb. Itt a célunk a minimális CSS használata az átfedés elrejtéséhez. Ehhez a display: none értéket fogjuk használni, és így középre igazítjuk:
|
1 2 3 4 5 6 7 8 9 10 |
.overlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 200px; width: 200px; background: gray; } |
Ezután a toggle() metódust fogjuk használni. Ez a metódus lehetővé teszi, hogy váltogassuk a display tulajdonságot a none és a block értékek között. Így az átfedés elrejtésre és megjelenítésre kerül, amikor rákattintunk. Adja hozzá ezt a kódot a script.js fájlhoz:
|
1 2 3 4 5 |
$(document).ready(function() { $(".trigger").click(function() { $(".overlay").toggle(); }); }); |
Végül frissítse az index.html fájlt a változtatások alkalmazásához. Most már képes lesz váltani a modális ablak láthatóságát. Mindössze annyit kell tennie, hogy rákattint a gombokra. Vannak más jQuery effektusok is, amelyeket ezzel kombinálva használhat. Például megváltoztathatja az egyszerű toggle() metódust slideToggle() vagy fadeToggle().
Az alábbiakban bemutatunk néhányat a jQuery-ben leggyakrabban használt effektusmetódusok közül:
-
toggle()
Ez a metódus lehetővé teszi az elem láthatóságának megváltoztatását. A hozzá kapcsolódó egyirányú effektusok a show() és a hide().
-
fadeToggle()
Ez a metódus lehetővé teszi az elem láthatóságának és átlátszóságának váltását animáción keresztül. Az egyirányú effektusok ebben az esetben a fadeIn() és a fadeOut().
-
slideToggle()
Ez a metódus lehetővé teszi a csúszó effektusok használatát az elem láthatóságának váltásához. Az egyirányú effektusok ebben az esetben a slideUp() és a slideDown().
-
animate()
Ez az effektusmetódus lehetővé teszi egyedi animációs effektusok végrehajtását. Az adott elem CSS tulajdonságát használja.
Összegzés
Remélhetőleg ez az útmutató hasznosnak bizonyult, és alapos bevezetést nyújtott a jQuery használatába. Ez egy hihetetlenül hasznos eszköz, amely nagyban megkönnyíti a webfejlesztést és a kódírást. Ez különösen igaz akkor, ha viszonylag új vagy a programozás világában.
Felfedeztük a jQuery alapjait alkotó különböző elemeket. Azt is megtanultuk, hogyan lehet kiválasztani és módosítani ezeket az elemeket, valamint hogyan lehet az eseményeket és effektusokat jól hasznosítani. A jQuery-hez hasonló eszközök elsajátítása segíthet olyan interaktív funkciókkal teli webhelyek létrehozásában, amelyek magával ragadó felhasználói élményt nyújtanak.
Nézz meg néhány forrást a blogunkról, amely segítségedre lesz, amikor a JavaScripttel dolgozol:
- Útmutató a JavaScript HTML-hez való hozzáadásához
- Munka a JavaScripttel: Hogyan működnek az osztályok
- Munka a JavaScripttel: Hogyan működnek a prototípusok és az öröklődések
Kellemes kódolást!
Hozzászólások
Még nincsenek hozzászólások. Legyen Ön az első.