3. časť: Pokročilé selektory

jQuery.jpg Se­lek­to­ry mo­de­lu DOM
Mo­del DOM pred­sta­vu­je abstrakt­ný strom rep­re­zen­tu­jú­ci v pa­mä­ti štruk­tú­ru do­ku­men­tu XML (resp. HTML). Tá­to rep­re­zen­tá­cia je pria­mo­čia­ra, te­da ak je ne­ja­ký ele­ment B za­ba­le­ný v inom ele­men­te A v do­ku­men­te HTML, v stro­me mo­de­lu DOM bu­de B po­tom­kom A. Vez­mi­me do úva­hy nas­le­du­jú­ci frag­ment kó­du HTML:

<div id="top_od­sek">
  <div id="od­sek1">
    <ul id="zoz­nam">
      <li id="po­loz­ka1">Po­lož­ka 1</li>
      <li id="po­loz­ka2">Po­lož­ka 2</li>
      <li id="po­loz­ka3">Po­lož­ka 3</li>
      <li id="po­loz­ka4">Po­lož­ka 4</li>
    </ul>
    <div id="vnu­tor­ny_od­sek1">Vnú­tor­ný od­sek</div>
  </div>
  <div id="od­sek2">
    <div id="vnu­tor­ny_od­sek2">Vnú­tor­ný od­sek</div>
  </div>
  <a href="jquery3.html">Od­kaz</a>
</div>

Ta­ká­to štruk­tú­ra HTML bu­de po­tom rep­re­zen­to­va­ná v pa­mä­ti stro­mom DOM, aký mô­že­te vi­dieť na ob­ráz­ku 1.

V praxi sa mož­no čas­to stret­núť so si­tuá­cia­mi, keď po­tre­bu­je­me prec­hád­zať jed­not­li­vé uz­ly stro­mu mo­de­lu DOM v sme­re na­hor i na­dol, ­prí­pad­ne sa po­hy­bo­vať po sú­ro­de­nec­kých uz­loch. Ta­kis­to mô­že­me chcieť zis­ťo­vať in­for­má­cie o po­čte sú­ro­den­cov či po­tom­kov s ne­ja­kou vlas­tnos­ťou. Na to nám po­slú­žia prá­ve se­lek­to­ry pra­cu­jú­ce s mo­de­lom DOM.

Je­den se­lek­tor z tej­to ka­te­gó­rie sme už pred­sta­vi­li v pred­chád­za­jú­cej čas­ti – se­lek­tor na vý­ber pria­mych po­tom­kov >. Ke­by sme nap­rík­lad chce­li vy­brať všet­ky ele­men­ty <div>, kto­ré sú pria­mym po­tom­kom ele­men­tu od­se­ku "top_od­sek", mož­no to uro­biť tak­to:

$("#top_od­sek > div")

V tom­to kon­texte je dô­le­ži­té zdô­raz­niť spo­je­nie pria­my po­to­mok, pre­to­že ten­to vý­raz vy­be­rie len od­se­ky s iden­ti­fi­ká­tor­mi "od­sek1" a "od­sek2", no nie vnú­tor­né od­se­ky, te­da ele­men­ty, kto­ré sú v hie­rar­chii o ďal­šiu úro­veň niž­šie (po­zri strom na ob­ráz­ku 1). Po­kiaľ by sme chce­li vy­brať všet­ky od­se­ky, kto­ré sú v hie­rar­chii pod ním, bez oh­ľa­du na to, či ide o pria­mych ale­bo nep­ria­mych po­tom­kov, mož­no po­užiť med­ze­ru, kto­rá slú­ži ako se­lek­tor prá­ve pre ta­ké­to prí­pa­dy:

$("#top_od­sek div")

Ta­ký­to vý­raz vy­be­rie ok­rem uve­de­ných dvoch pria­mych po­tom­kov "od­sek1" a "od­sek2" i vnú­tor­né ele­men­ty ty­pu <div>. Sa­moz­rej­me, tie­to se­lek­to­ry (rov­na­ko ako os­tat­né, o kto­rých bu­de reč) sa da­jú kom­bi­no­vať i s os­tat­ný­mi typ­mi se­lek­to­rov (napr. se­lek­to­ry pre trie­dy CSS či at­ri­bú­ty).

Nie­ke­dy však mô­že­me po­tre­bo­vať po­stu­po­vať opač­ným sme­rom – k ro­di­čo­vi. Se­lek­tor <, kto­rý by vám na­pa­dol mož­no in­tui­tív­ne, neexis­tu­je, pre­to­že ta­ký­to se­lek­tor by zrej­me na­ru­šil štruk­tú­ru strán­ky, keď­že rov­na­ký znak uvád­za i znač­ku ele­men­tu HTML/XML. Pre­to v ta­kom­to prí­pa­de ne­mô­že­me po­užiť se­lek­tor, ale fun­kciu na prís­tup k ro­di­čov­ské­mu ele­men­tu – pa­rent(). Ke­by sme nap­rík­lad chce­li zís­kať od­kaz na ro­di­ča ele­men­tu s iden­ti­fi­ká­to­rom "zoz­nam", kto­rým je "od­sek1", uro­bi­li by sme to tak­to:

$("#zoz­nam").pa­rent()

Po­dob­ne exis­tu­je i fun­kcia children(), kto­rá umož­ňu­je zís­kať od­ka­zy na pria­mych po­tom­kov. Fun­kcia však umož­ňu­je i špe­ci­fi­ko­vať ako pa­ra­me­ter se­lek­tor, kto­rý je ap­li­ko­va­ný na tak­to vy­bra­ných po­tom­kov, a tak umož­ňu­je vy­filtro­vať po­ža­do­va­né ele­men­ty. Prík­lad s po­uži­tím se­lek­to­ra > zo za­čiat­ku toh­to di­elu by sa dal pre­pí­sať po­mo­cou fun­kcie children() tak­to:

$("#top_od­sek").children("div")

Ob­dob­ne mož­no na­mies­to se­lek­to­ra med­ze­ry (se­lek­tor pre pria­mych i nep­ria­mych po­tom­kov) po­užiť me­tó­du find(), kto­rej opäť mô­že­me ako pa­ra­me­ter za­dať se­lek­tor, kto­rý bu­de ap­li­ko­va­ný na všet­kých nás­led­ní­kov ele­men­tu, na kto­rom tú­to me­tó­du za­vo­lá­me.

Ke­by sme chce­li zis­tiť, koľ­ko ele­men­tov náv­ra­to­vá súp­ra­va ob­sa­hu­je (napr. koľ­ko po­tom­kov má da­ný ele­ment), mož­no ap­li­ko­vať me­tó­du si­ze() ale­bo pris­tú­piť k at­ri­bú­tu length.

Ok­rem týc­hto me­tód sú k dis­po­zí­cii i se­lek­to­ry :first-child a :nth-child(). Ako už zrej­me je­ho ná­zov na­po­ve­dá, se­lek­tor :first-child umož­ňu­je vy­brať pr­vý z po­tom­kov ele­men­tu, za­tiaľ čo :nth-child() vrá­ti ľu­bo­voľ­né­ho po­tom­ka, sta­čí špe­ci­fi­ko­vať je­ho in­dex. Je dô­le­ži­té pa­mä­tať na to, že ten­to se­lek­tor in­dexuje ele­men­ty od 1, a nie od 0. Pre­to prís­tup k pr­vé­mu po­tom­ko­vi ele­men­tu "zoz­nam" je mož­ný i jed­ným z dvoch nas­le­du­jú­cich spô­so­bov:

$("#zoz­nam :first-child")
$("#zoz­nam :nth-child(1)")

K se­lek­to­ru :first-child na­vy­še exis­tu­je fun­kcia first(), kto­rá fun­gu­je rov­na­ko ako ten­to se­lek­tor. Ok­rem to­ho je k dis­po­zí­cii i last() na vý­ber po­sled­né­ho po­tom­ka.

Pri prec­hád­za­ní jed­not­li­vých pr­vkov v súp­ra­ve mô­žu prísť ta­kis­to vhod fun­kcie next() a prev(), kto­ré umož­ňu­jú jed­no­duc­hý prec­hod k ďal­šie­mu ale­bo pred­chád­za­jú­ce­mu pr­vku v súp­ra­ve (te­da k sú­ro­den­co­vi vľa­vo ale­bo vpra­vo).

Filtre zblíz­ka
Filtre sú me­tó­dy ale­bo se­lek­to­ry, kto­ré umož­ňu­jú zú­žiť vy­bra­nú mno­ži­nu ele­men­tov na zá­kla­de ur­či­té­ho kri­té­ria. Prík­la­dom filtrov sú i fun­kcie uve­de­né na kon­ci pred­chád­za­jú­cej po­dka­pi­to­ly, first() a last(). Ok­rem to­ho však exis­tu­jú i ďal­šie filtre, kto­ré umož­ňu­jú vy­ššiu flexibi­li­tu pri filtro­va­ní vý­sled­kov.

jquery.jpg

Obr. 1

Pr­vý z tej­to ka­te­gó­rie je se­lek­tor :eq(), prí­pad­ne ob­dob­ná fun­kcia eq(). Ten­to se­lek­tor umož­ňu­je vy­brať n-tý pr­vok z náv­ra­to­vej súp­ra­vy, tak­že fun­gu­je ob­dob­ne ako se­lek­tor :nth-child(), ale na roz­diel od ne­ho po­uží­va in­dexova­nie od 0, pre­to­že vy­chád­za z ja­vas­crip­to­vé­ho štan­dar­du, za­tiaľ čo :nth-child() po­uží­va štan­dard CSS. Roz­diel med­zi se­lek­to­rom :eq() a me­tó­dou eq() je na­vy­še v tom, že me­tó­da eq() umož­ňu­je po­užiť ako in­dex i ne­ga­tív­ne čís­lo, čím je ele­ment vy­be­ra­ný od­za­du (te­da napr. in­dex -1 od­ka­zu­je na po­sled­ný ele­ment).

$("#zoz­nam :eq(0)")        // vy­be­rie pr­vý ele­ment <li>
$("#zoz­nam li").eq(-1)    // vy­be­rie po­sled­ný ele­ment <li>

V tom­to prík­la­de má­me mož­nosť vi­dieť eš­te je­den roz­diel med­zi se­lek­to­rom :eq() a fun­kciou eq() – za­tiaľ čo se­lek­tor preh­ľa­dá­va i po­tom­kov ele­men­tu s iden­ti­fi­ká­to­rom "zoz­nam", fun­kcia sa strik­tne ob­med­zu­je na náv­ra­to­vú súp­ra­vu, tak­že jej mu­sí­me od­ov­zdať pria­mo tú­to súp­ra­vu po­tom­kov, a nie ich ro­di­ča.

Ďal­šie uži­toč­né se­lek­to­ry sú :gt() a :lt(), umož­ňu­jú­ce vy­brať po­dsku­pi­ny ele­men­tov zo súp­ra­vy, kto­ré ma­jú in­dex väč­ší, resp. men­ší než za­da­ný in­dex. Nap­rík­lad vý­ber všet­kých ele­men­tov zo súp­ra­vy ok­rem pr­vých dvoch by bo­lo mož­né uro­biť tak­to (ne­za­bud­ni­me, že tie­to se­lek­to­ry in­dexujú ele­men­ty od 0 rov­na­ko ako se­lek­tor :eq()):

$("#zoz­nam :gt(1)")

Ďal­šie uži­toč­né se­lek­to­ry, kto­ré sa vám mô­žu zísť naj­mä pri tvor­be ta­bu­liek, sú :even a :odd. Tie umož­ňu­jú vy­brať všet­ky pár­ne ale­bo ne­pár­ne pr­vky v súp­ra­ve, čo sa dá vy­užiť nap­rík­lad vte­dy, keď po­tre­bu­je­me strie­da­vo sfar­biť riad­ky ta­buľ­ky na lep­šiu preh­ľad­nosť. To sa dá ľah­ko do­siah­nuť vďa­ka tým­to se­lek­to­rom tak, že vy­be­rie­me pár­ne ele­men­ty (riad­ky) a pri­ra­dí­me im št­ýl s jed­nou far­bou po­za­dia, za­tiaľ čo ne­pár­nym riad­kom pri­ra­dí­me iný št­ýl (s inou far­bou po­za­dia).

Ďal­šie čas­ti >>

Zdroj: Infoware 6-7/2011



Ohodnoťte článok:
   
 

24 hodín

týždeň

mesiac

Najnovšie články

3. časť: Po­kro­či­lé se­lek­to­ry
Model DOM predstavuje abstraktný strom reprezentujúci v pamäti štruktúru dokumentu XML (resp. HTML). čítať »
 
2. časť: Zá­klad­né se­lek­to­ry
V predchádzajúcej časti seriálu o programovaní interaktívnych stránok pomocou frameworku jQuery sme sa oboznámili so základnými vlastnosťami a výhodami použitia tohto frameworku a uviedli sme jednoduchý príklad demonštrujúci spomínané aspekty. čítať »
 
1. časť: Pred­sta­vu­je­me fra­mework jQuery
V novom seriáli venovanom javascriptovému frameworku jQuery vás postupne oboznámime s tým, kedy je výhodné ho použiť, akým spôsobom nám uľahčí prácu čítať »
 
 
 
  Zdieľaj cez Facebook Zdieľaj cez Google+ Zdieľaj cez Twitter Zdieľaj cez LinkedIn Správy z RSS Správy na smartfóne Správy cez newsletter