jQuery Alapok – DOM bejárás

-

A jQuery Alapok című oktató sorozat segítségével bevezetést nyerhetünk a jQuery JavaScript program könyvtár használatába. Megtanulhatjuk a rendszer alap szintű használatát, valamint megtudhatjuk hogy miért ilyen hatékony.

jquery-alap-3

A DOM bejárás ( angolul traversing ) egy fontos része a JavaScript/jQuery-nek. A jQuery DOM bejárás segítségével bejárhatjuk a dokumentumunk szerkezetét és megkereshetjük azt az elemet/elemeket, amire éppen szükségünk van. Mindezt úgy tehetjük meg, hogy figyelembe vesszük az elhelyezkedését a többi eleméhez képest. Addig ugrálunk a különböző szinteken, amíg el nem érünk ahhoz, ami nekünk kell.

Lényegében 5 fajta relációt különböztetünk meg a kapcsolódó elemek között. A gyerek – szülőt, leszármazott – ős/felmenőt és a testvért. Ezek tulajdonképpen mind a való életből vett kapcsolatok. A gyerek – szülő egyértelmű, azonban ebben az esetben egy gyereknek, csak egy szülő elme lehet, viszont egy szülőelemnek számtalan gyerek eleme. A leszármazott – felmenő, hasonlítható a nagyszülőkre, dédszülőkre. Ha egy elemnek kijelöljük a felmenőit, akkor visszakapjuk az összes létező felmenőjét, ugyan ez igaz, ha kijelöljük a leszármazottait, mindet visszakapjuk. A testvér elem kijelölővel a dokumentumban az egy szinten lévő elemeket jelölhetjük ki.

Mint tudjuk a DOM egy olyan strukturált szerkezet, ahol az elemek alá és fölé rendeltségi viszonnyal kapcsolódnak egymáshoz. A DOM bejárása tulajdonképpen a kijelölési módszerek finomítása. Nézzük példával illusztrálva.

Adott az alábbi DOM szerkezet:

<div>
	<p>Bekezdés 1</p>
	<p class="text">Bekezdés 2<strong>Leszármazott </strong></p>
	<p>Bekezdés 3</p>
	<p>Bekezdés 4</p>
</div>

dom-jquery

Jól látható, hogy szerkezetileg a p elemek a div elem gyerekei, vagyis a div elem a p elemek szülő eleme. Tudjuk azt is, hogy a p elemek egymás testvérei, mivel egy szinten helyezkednek el. Tovább megfigyelhetjük azt is, hogy a strong elem a div elem leszármazottja, valamint a div elem a strong elem ős eleme. Ez a tudás valószínű ismerős a HTML/CSS ismereteink megszerzése során. Nézzünk pár kijelölést!

Elsőként jelöljük ki a második p elemet:

$(function() {
    var second = $("p").eq(1).text();
    alert(second);
});

Kijelöljük az összes p elemet, majd az eq() eljárással kijelöljük szám szerint az elsőt, valamint a text() eljárás segítségével érjük el, hogy a second változóban a második p elem szövege kerüljön. Ezek után mindezt egy figyelmeztető ablakban jelenítjük meg. Az eq() eljárásban, azért az egyes szám szerepel, mert mint a legtöbb programozási nyelvben, úgy itt is, a tömb, vagy tömbszerű adattárolás során nullától kezdjük számozni az értékeket.

Leszármazott kijelölők – children(), find()

Leszármazott kijelölőknek nevezzük azokat a kijelölőket, amik egy elem leszármazottait jelölik ki. Két fajtája a children() és a find(). A lényeges eltérés az, hogy a children(), csak a közvetlen leszármazottakat adja vissza, vagyis a gyerekeket, míg a find() az összes leszármazottat visszaadhatja.

$(function() {
     var p = $("div").children();
     console.log(p);
});

Ez a megoldás a console panelre kiírja a p objektum tartalmát, amiben láthatjuk a négy darab p elemünket.

A find eljárás ettől egy kicsit eltérő. Itt az eljáráson belül kell megadnunk, hogy melyik leszármazott elemet keressük. Jelen esetben ez a strong elem, ami a p elem leszármazottja. Ha az összes leszármazottat szeretnénk visszakapni, akkor a find(“*”) eljárást kell alkalmaznunk.

$(function() {
     var p = $("div").find("strong");
     console.log(p);
});

Ős kijelölők – parent(), parents()

Az ős kijelölőkkel kijelölhetjük a közvetlen szülőket és a felmenőket. A parent() eljárás jelöli ki csak a szülőket, míg a parents() az összes felmenőt.

A parent() eljárást alkalmazva a p elemekre vissza kapjuk a div elemet:

$(function() {
     var p = $("p").parent();
     console.log(p);
});

Ugyan ebben a kontextusban a parents() eljárást alkalmazva visszakapjuk a p elem összes ősét, vagyis a div, body és html elemet.

$(function() {
     var p = $("p").parents();
     console.log(p);
});

A parents() eljárást a find() eljáráshoz hasonlóan hásználhatjuk konkrét elemre is, mint például a find(“ul”), ami csak az ul felmenőket adja vissza.

Testvér kijelölés – siblings()

A siblings() eljárással visszakapjuk a megadott elem testvéreit, vagyis a DOM-ban az azonos szinten elhelyezkedő elemeket. A lépegetésre az eredmények között számos egyéb eljárás létezik.

$(function() {
     var p = $("p").siblings();
     console.log(p);
});

Az eljárás ebben az esetben visszaadja a p elemet és annak testvéreit, azonban ha ugyan ezen lenne egy h2-es elem és annak szeretnénk kijelölni a testvér elemeit, akkor csak a 4 p elemet kapnánk vissza, vagyis saját magát nem. Elvileg, a siblings() eljárás a saját magát nem adja hozzá a kijelöléshez, azonban ebben az általános esetben még is.

Kijelölések további szűrése – not(), add(), filter(), first(), last(), eq()

not(), add()

A kijelöléseinket bővíthetjük, vagy szükíthetjük a nekünk tetsző elemekkel. Értelem szerűen az add() eljárással hozzáadhatunk, míg a not()-al kivonhatunk elemeket a kijelölésből.

$(function() {
     var p = $("p").siblings().add('div');
     console.log(p);

     var p = $("p").parents().not("html");
     console.log(p);
});

filter()

A filter eljárás segítségével egy adott kijelölt halmazból kiválaszthatjuk azokat, amik megfelelnek egy kritériumnak. Így csak azt a p elemet kapjuk vissza, ami text értékű osztály kijelölővel rendelkezik.

$(function() {
     var p = $("p").filter(".text");
     p.css("background", "aqua");
});

first(), last()

A fist(), last() eljárás értelemszerűen a kijelölt elemekből az elsőt és az utolsót adja vissza.

$(function() {
     var p = $("p").first();
     p.css("background", "olive");

     var p = $("p").last();
     p.css("background", "olive");
});

eq()

Az eq() eljárás az :eq() pseudo kódnak megfelelő eljárás, segítségével visszakapjuk az x-edik elemet. Természetesen a számolást itt is nullától kell kezdenünk!

$(function() {
     var p = $("p").eq(2);
     p.css("background", "pink");
});

Eljárások összefűzése – chaining

A jQuery rugalmasságának egy másik példája az összefűzési megoldás. Ha egy eljárásnak a visszatérési értéke jQuery objektum, akkor az eljárás után azonnal alkalmazhatunk egy másikat, így hozzáfűzve azt.

Hogy jQuery objektum-e a visszatérési érték, ellenőrizhetjük a dokumentációban, az egyes eljárásoknál. A visszatérési érték típusát a jobb felső sarokban találjuk.

A visszatérési érték jQUery objektum, tehát alkalmazhatunk összefűzést!
A visszatérési érték jQUery objektum, tehát alkalmazhatunk összefűzést!
$(function() {
     var p = $(".text").siblings().andSelf();
     console.log(p);
});

Ebben a példában visszakapjuk a három p elemet, ahol a class tulajdonság nem text és az andSelf() eljárással hozzáadjuk a .text tulajdonságú elemet is.

Összefoglalás – jQuery Alapok – DOM bejárás

Ha megfelelően tudunk a DOM-ban lépkedni, olyan magas szintű kijelőléseket hozhatunk létre, amikkel bármit kijelölhetünk a dokumentumunkon belül. Érdemes kellő figyelmet fordítanunk ezek fontoságára és böngésszük át a dokumentációt!

A sorozat további részei

Szolgáltatások

Full-stack webfejlesztés

01.

Egyedi weboldalt szeretnél?

WordPress CMS-el fejlesztve megvalósítjuk elképzeléseid. Készítünk egy modern oldalt, amivel felveheted a versenyt a konkurenciával.

02.

Komplex webes ötleted van?

Teljes körű alkalmazásfejlesztési szolgáltatást nyújtunk, amennyiben van egy olyan ötleted, vagy terved, ami nem valósítható meg kész megoldásokkal.