Barion Pixel
Ez itt a lifelong learning

Sosem tudhatsz eleget!

Blog

Segédlet

Bevezetés a jQuery-be

2018. február 09. | Pócsik Emese

# # # # #

Mi az a jQuery?

A jQuery nem más, mint egy gyors és tömör JavaScript nyelvű függvénykönyvtár, ami előre megírt függvényeket tartalmaz. A hagyományos programozási nyelvektől eltérően “csak” értelmez, nem pedig végrehajt. A jQuery megpróbálja leegyszerűsíteni a bonyolultabb dolgokat a JavaScript-ből, (például az AJAX-hívások, DOM-manipulációk), így sokkal könnyebben, és gyorsabban használhatjuk azt a weboldalon.

Mire használjuk?

  • DOM manipuláció – Lehetővé teszi a DOM elemeinek kiválasztását, tartalmának módosítását, manipulálását.
  • Eseménykezelés – Lehetőségünk van kattintás, görgetés, vagy egérmozgás alapú események létrehozására.
  • AJAX Támogatás – Az AJAX a szerverrel való adatcserét szolgálja, segítségével frissítheted a weboldal egyes részeit anélkül, hogy újra töltenéd az egész oldalt.
  • Animációk, effektek – Számos beépített animációs hatással rendelkezik, amelyeket egyszerű függvényekkel hívhatsz meg.

A Dokumentum Objektum Modell (DOM)

A DOM egy objektummodell, amire a HTML és az XML is épül. A modell egymással szülő-gyerek kapcsolatban álló objektumok rendszere, melyek segítségével módosíthatjuk a HTML dokumentumok elemeit, vagy a böngésző eseményeit. A DOM nem az a HTML, amit kézzel írsz, és nem is a weboldal forráskódja, hanem konkrétan az, amit a böngésző DevTools részében látsz. Ezt lehet manipulálni, nem magát az oldal forráskódját.

jQuery betöltése a weboldalba

  • betöltés saját tárhelyről – A jQuery könyvtárat letöltheted a tárhelyedre, és beillesztheted a HTML kódba.
  • betöltés külső tárhelyről – A jQuery könyvtárat közvetlenül a code.jquery.com-ról, vagy a Google-ről is betöltheted.

Az elmélet az, hogy a jQuery gyorsabban töltődik be, ha külső tárhelyről töltjük, mert valószínűleg az már eleve tárolva van a böngészőnkben (Cache).

A függvénykönyvtárat mindkét esetben két helyre tudjuk beszúrni a HTML fájlunkban: a <head> részbe és a </body> elé. A kódot mindig a </body> elé érdemes beszúrni, hogy az a HTML kód után töltődjön le. Ha a jQuery kódot a <head> részbe rakod, akkor az az előtt fog lefutni, mielőtt létre jönne maga a HTML dokumentum, így mivel a JS kód lefutásakor a HTML fizikailag még nem létezik, módosítani/hozzáférni sem lehet.

Ha betöltöttük a weboldalba a JS könyvtárat, akkor közvetlenül utána hívjuk be a saját JS fájlunkat, amibe írjuk a weboldalra vonatkozó módosításainkat, nevezzük mondjuk custom.js-nek.

A $() szelektor

A jQuery szelektorok a dollárjelzéssel és zárójelekkel kezdődnek – $(). Ezen belül háromféle mód létezik a HTML dokumentum elemeinek kiválasztására:

  • Címke neve  – A DOM-ban elérhető címke nevét képviseli. Például $(‘p’),  $(‘div’), $(‘li’), amellyel kiválaszthatod az összes ilyen elemet a HTML dokumentumban.
  • Azonosító (id) – A megadott azonosítóval is elérhetőek a címkét. Például $(‘#lablec’), amellyel kiválaszthatod az egyedi elemet a HTML dokumentumban.
  • Osztály (class) – Az adott osztályhoz tartozó címke. Például $(‘.service’) a dokumentumban szereplő összes olyan elemet választja ki, amely ilyen osztályú.
  • +1 Változó – A 3 közül bármelyik megadható előzőleg meghatározott változóval is. $(valtozonev)

A fenti elemek önmagukban, vagy más szelektorokkal kombinálva is használhatók. Például: $(‘#main .service ul li’)

Hogyan hívhatunk meg jQuery függvényeket?

Az oldal nem manipulálható zökkenőmentesen, amíg a HTML dokumentum “nem áll készen“. Erre van is egy függvény a $( document ).ready(function() {…}); Ezen belül elhelyezett kód csak akkor fog futni, ha az oldal DOM-ja készen áll, ha már az összes HTML betöltődött.

[js]$(document).ready(function(){ alert( "A DOM betöltődött!" ); });[/js]

A  $( window ).on( “load”, function() {…}); belsejében szereplő kód pedig akkor fog futni, ha az egész oldal (képek, iframek is, nem csak a DOM) “készen áll “. Ezt csak indokolt estben használd, mert nagyon lassítja az oldalt.

[js]$(window).on("load", function(){ alert("minden betöltődött!"); });[/js]

Nézzük meg a legfontosabb jQuery függvényeket példákkal

Érdemes létrehoznod magadnak egy HTML dokumentumot egy #box div-el, amibe teszel némi szöveget és végig próbálgatni mi történik az alábbi utasításokkal. Mindent a $( document ).ready(function() {…}); részen belülre írj, így:

[js]$(document).ready(function() {
$(‘#box’).hide();
});[/js]

  1. [js]$(‘#box’).hide();[/js]

    Elrejti a #box elemet, ha az látható.

  2. [js]$(‘#box’).show();[/js]

    Mutatja a #box elemet, ha az rejtve van.

  3. [js]$(‘#box’).html(‘<strong>Hello</strong>’);[/js]

    A #box elem tartalmát kicseréli a megadott sztringgel.

  4. [js]$(‘#box’).append(‘<strong>Hello</strong>’);[/js]

    A kijelölt #box elem tartalma után beilleszt egy elemet a DOM-ba.

  5. [js]$(‘#box’).prepend(‘<strong>Hello</strong>’);[/js]

    A kijelölt #box elem tartalma elé beilleszt egy elemet a DOM-ba.

  6. [js]$(‘#box’).appendTo("selected");[/js]

    A kijelölt #box elem után beilleszt egy elemet a DOM-ba.

  7. [js]$(‘#box’).prependTo("selected");[/js]

    A kijelölt #box elem elé beilleszt egy elemet a DOM-ba.

  8. [js]$(‘#box’).css( "color", "red" );[/js]

    A kijelölt #box elemhez inline style-t ad, így CSS attribútumokat tudunk megadni.

  9. [js]$(‘#box’).attr( "src", "img/kep.jpg");[/js]

    A kijelölt #box elem bármely attribútumának megadása, vagy módosítása. Itt egy kép src attribútumát cseréljük ki a megadott képpel.

  10. [js]$(‘#box’).val();[/js]

    Kiválasztja, vagy átállítja a value attribútumát a #box elemnek, itt a #box egy input mező, nem div

  11. [js]$(‘#box’).text();[/js]

    A #box elem szövegét adja vissza.

  12. [js]$(‘#box’).find(‘p’);[/js]

    Megtalálja a #box elem en belül az összes bekezdést.

  13. [js]$(‘.box’).each();[/js]

    Ismétli a kiválasztását az összes .box osztályú elemnek.

  14. [js]$(‘#box’).addClass("selected");[/js]

    “selected” osztály hozzáadása a #box elemhez.

  15. [js]$(‘#box’).removeClass("selected");[/js]

    selected” osztály eltávolítása a #box elemről.

  16. [js]$(‘#box’).toggleClass("selected");[/js]

    selected” osztály hozzáadása, ha nincs a  #box elemen / eltávolítása, ha van a #box elemen.

  17. [js]$(‘#box’).hasClass("selected");[/js]

    Az eredmény igaz, ha a #box elemnek, van “selected” osztálya.

  18. [js]$(‘#box’).children();[/js]

    Kiválasztja a #box elem gyerek elemeit.

  19. [js]$(‘#box’).closest("p");[/js]

    Kiválasztja a #box elemhez legközelebbi bekezdést.

  20. [js]$(‘li’).eq(3);[/js]

    Elemek keresése index szerint. Minden gyermek elem nulláról indítja az indexét, így a fenti példában az .eq(3) azt jelenti, hogy a lista 4. eleme kerül kiválasztásra.

  21. [js]$(‘#box’).find("li");[/js]

    Keresi a kiválasztott elemnek megfelelő leszármazott elemeket.

  22. [js]$(‘#box’).first();[/js]

    Kiválasztja a testvér elemek közül az elsőt.

  23. [js]$(‘#box’).last();[/js]

    Kiválasztja a testvér elemek közül az utolsót.

  24. [js]$(‘#box’).next();[/js]

    Kiválasztja a testvér elemek közül a következőt.

  25. [js]$(‘#box’).prev();[/js]

    Kiválasztja a testvér elemek közül az előzőt.

  26. [js]$(‘#box’).parent();[/js]

    Kiválasztja az elem szülő elemét.

  27. [js]$(‘.box’).siblings();[/js]

    Kiválasztja az elem összes testvér elemét.

  28. [js]$(‘#box’).animate();[/js]

    #box elem animálása, a függvényen belül megadhatod, az animálás paramétereit

  29. [js]$(‘#box’).fadeIn(300);[/js]

    Előtűnés 300 milliszekundum időegység alatt.

  30. [js]$(‘#box’).fadeOut(300);[/js]

    Eltűnés 300 milliszekundum időegység alatt.

Ezeken kívül még sok egyéb utasítás, illetve függvény létezik, tanulmányozd át a dokumentációt

jQuery Eseménykezelés

Lehetőségünk van dinamikus weboldalak létrehozására események használatával. Az események olyan tevékenységek, amelyeket a webalkalmazás észlelhet. A következő példák a következők:

  • Egérkattintás .click()
  • Változás – .change()
  • Egy egér átfutása/lefutása egy elemről – .mouseenter(), .mouseleave()
  • Billentyű lenyomás (pl: Esc)- .keyup()
  • Betöltődés – .load()
  • Bővebben itt

Összefűzés

A jQuery lehetővé teszi, hogy többféle módszert is végrehajtsunk ugyanazon az elemen. Ezeket nevezzük utasításláncnak. Valójában azért hasznos mert megkímél Téged és a böngészőt, hogy többször meghívd ugyanazt az elemet.

[js]$("#box").text("Hello, world!").css("color", "blue");[/js]
A fenti kifejezést az jelenti, hogy válasszuk ki a #box elemet, adjunk hozzá a div-hez egy “Hello, world!” szöveget, majd szinezzük az egészet kékre.

A JavaScript egy programozási nyelv

Ami azt jelenti, hogy a programozás során tanult fogalmak itt is érvényesek, változók, utasítások, logikai műveletek itt is használhatóak.

[js]var boxtext = $("#box").text();[/js]
Egy boxtext változóbaan tárolom a #box div szöveges tartalmát.

Gyakorló feladatok

jQuery-t gyakorolni akkor van értelme, ha HTML-ben és CSS-ben már magabiztosan elboldogulsz. Mivel HTML elemeket és CSS paramétereket is manipulálunk, könnyű abba a hibába esni, hogy a JS kódod ugyan működik, csak épp a nem megfelelő HTML, vagy CSS miatt nem fut le, vagy éppen fut, csak nem látszik. Ezért ezt a fázist mindig csak akkor kezd el, ha az oldalad HTML/CSS része már teljesen készen van.

Hozz létre egy HTML fájlt a következő tartalommal:
[html]
<h1>heading lorem ipsum sit a men</h1>
<p>Lorem ipsum estibulum fringilla sed vel leo. Aliquam luctus est lacus, non tempor diam commodo vel. Ut quis accumsan neque. Aenean vestibulum nunc sit amet cursus accumsan. Nulla porta, velit vel tincidunt varius, justo mauris tincidunt nibh, vel volutpat elit sem a nisi. Pellentesque eget nulla eu quam euismod pulvior vitae eu nibh.</p>
<ul>
<li>Lorem ipsum dolor sit ametadipiscing elit</li>
<li>Sit aliquam tincidunt mauris eu risus</li>
<li>Vestibulum auctor dapibus neque</li>
<li>Aliquam tincidunt mauris eu risus</li>
<li>Praesent ut tellus et nulla placerat</li>
</ul>
<p>Lorem ipsum estibulum fringilla sed vel leo. Aliquam luctus est lacus, non tempor diam commodo vel. Ut quis accumsan neque. Aenean vestibulum nunc sit amet cursus accumsan. Nulla porta, velit vel tincidunt varius, justo mauris tincidunt nibh, vel volutpat elit sem a nisi. Pellentesque eget nulla eu quam euismod pulvior vitae eu nibh.</p>
<ol>
<li>Lorem ipsum dolor sit ametadipiscing elit</li>
<li>Sit aliquam tincidunt mauris eu risus</li>
<li>Vestibulum auctor dapibus neque</li>
<li>Aliquam tincidunt mauris eu risus</li>
<li>Praesent ut tellus et nulla placerat</li>
</ol>
<div id="box"></div>
<a class="button" href="#">Button</a>[/html]

Majd hajtsd végre a következőket jQuery segítségével.

  • A címsor legyen piros
  • A számozatlan lista 3. eleme legyen kék
  • A gombra készíts egy kattintás alapú eseményt. A gombra kattintáskor, a #box div-be kerüljön bele a H1 címsor szövege
  • A második bekezdés szövegéhez adj egy .highlighted osztályt, ezt formázd CSS-ben sárga kiemeléssel
  • A számozott lista 2. elemét rejtsd el
Iratkozz fel YouTube csatornákra!

blog

Tanulás Designer Karrier Kérdezz-Felelek

Designer Karrier Kérdezz-Felelek

2022. január 25.

A múlt hét végén megtartott Kreatív Karriernavigátor nap után nagyon sok kérdés jött hozzánk, ezekre tegnap egy rögtönzött FB Live-ban válaszoltam, illetve fel tudtatok tenni egyéb kapcsolódó kérdéseket is. Kiből lehet designer? Én azt gondolom, hogy nem kell hozzá extra képesség. Nyilván aki tudja magáról, hogy általában nincs szépérzéke, nehezebben fog boldogulni, de már sok […]

Tovább a cikkre
Secured By miniOrange