2. časť: Základné selektory

jQuery.jpg V pred­chád­za­jú­cej čas­ti se­riá­lu o prog­ra­mo­va­ní inter­ak­tív­nych strá­nok po­mo­cou fra­mewor­ku jQuery sme sa oboz­ná­mi­li so zá­klad­ný­mi vlas­tnos­ťa­mi a vý­ho­da­mi po­uži­tia toh­to fra­mewor­ku a uvied­li sme jed­no­duc­hý prík­lad de­monštru­jú­ci spo­mí­na­né as­pek­ty. Ten­to­raz sa bu­de­me ve­no­vať jed­nej z hlav­ných vý­hod toh­to fra­mewor­ku – se­lek­to­rom.

Zá­klad­né se­lek­to­ry
Se­lek­tor pred­sta­vu­je vo fra­mewor­ku jQuery mec­han­izmus na vý­ber jed­not­li­vých ele­men­tov (ob­jek­tov) na strán­ke. V pre­doš­lej čas­ti se­riá­lu sme ma­li mož­nosť vi­dieť v ak­cii je­den zo zá­klad­ných ty­pov se­lek­to­rov – se­lek­tor po­dľa iden­ti­fi­ká­to­ra ele­men­tu:

$("#btn")...

Ako sme už uvied­li, ten­to zá­pis vý­raz­ne skra­cu­je kód po­treb­ný na vý­ber ele­men­tu, kto­rý by pred­tým väč­ši­nou vy­ze­ral asi tak­to:

do­cu­ment.ge­tE­le­men­tById("btn")...

Ta­kým­to spô­so­bom do­ká­že­me vy­brať na strán­ke aký­koľ­vek ele­ment, kto­rý má pri­ra­de­ný iden­ti­fi­ká­tor po­mo­cou at­ri­bú­tu id. Po vy­bra­ní po­ža­do­va­né­ho ele­men­tu po­tom mô­že­me vy­ko­ná­vať po­treb­né ope­rá­cie, ako sú nap­rík­lad zob­ra­zo­va­nie či skrý­va­nie ele­men­tov, ani­má­cie, spúš­ťa­nie a pri­ra­ďo­va­nie ak­cií, nas­ta­vo­va­nie pa­ra­met­rov a po­dob­ne.

Se­lek­to­ry v jQuery sú však ove­ľa flexibil­nej­ší nás­troj a umož­ňu­jú všes­tran­ný vý­ber ob­jek­tov na strán­ke na zá­kla­de rôz­nych kri­té­rií. Zá­klad­né tri ty­py se­lek­to­rov uvád­za ta­buľ­ka 1.

Se­lek­tor Prík­lad Opis
Iden­ti­fi­ká­tor $("#btn") Vy­be­rie ele­ment s pri­ra­de­ným iden­ti­fi­ká­to­rom "btn" (id="btn")
Tag $("div") Vy­be­rie všet­ky ele­men­ty rep­re­zen­to­va­né tag­mi <div>
Trie­da CSS $(".list") Vy­be­rie všet­ky ele­men­ty, kto­ré ma­jú pri­ra­de­ný št­ýl CSS "list" (class="list")

Tab. 1

Z tej­to ta­buľ­ky je zrej­mé, že se­lek­tor ne­mu­sí vy­brať len je­den ob­jekt, ako je to oby­čaj­ne v prí­pa­de po­uži­tia iden­ti­fi­ká­to­ra (po­mo­cou pre­fixu "#"), ale vy­bra­ných ob­jek­tov mô­že byť i ce­lá sku­pi­na. Ak ne­pou­ži­je­me v se­lek­to­re žiad­ny pre­fix, bu­dú vy­bra­né ele­men­ty pred­sta­vu­jú­ce da­ný tag, napr. <div>. Po­kiaľ je týc­hto ele­men­tov v do­ku­men­te viac, bu­dú vy­bra­né všet­ky a nás­led­ne vy­ko­na­ná ope­rá­cia sa po­tom ap­li­ku­je na všet­ky tie­to ele­men­ty. Tá­to vlas­tnosť je jed­na z ďal­ších vý­hod fra­mewor­ku jQuery, pre­to­že vďa­ka to­mu sa mô­že­me vy­hnúť po­uži­tiu cyk­lov v 90 % prí­pa­dov, keď by sme ich inak zrej­me po­tre­bo­va­li. Po­kiaľ to­tiž vy­be­rá­me sku­pi­nu ele­men­tov na­mies­to je­di­né­ho, zrej­me chce­me nad všet­ký­mi vy­ko­ná­vať ne­ja­kú ope­rá­ciu.

Ako prík­lad nám po­slú­ži nas­le­du­jú­ci jed­no­duc­hý kód HTML:

<div class="bold">
  To­to je pr­vý od­sta­vec.
</div>
<div id="text" class="bold">
  <a href="jquery2.html" tar­get="_blank">
    To­to je dru­hý od­sta­vec.
  </a>
</div>
<div>
  <a href="jquery2.html">
    To­to je tre­tí od­sta­vec.
  </a>
</div>
<a href="http://www.in­foware.sk" tar­get="_blank">
  Sa­mos­tat­ný od­kaz.
</a>

Má­me tu tri od­se­ky, dva z nich ma­jú pri­ra­de­nú trie­du CSS "bold", kto­rú na­de­fi­nu­je­me vlo­že­ním nas­le­du­jú­ce­ho kó­du do hla­vič­ky náš­ho do­ku­men­tu HTML:

<sty­le ty­pe="text/css">
  .bold {
    font-weight: bold;
  }
</sty­le>

Te­raz mož­no od­se­ky vy­be­rať po­uži­tím zís­ka­ných ve­do­mos­tí o se­lek­to­roch nas­le­du­jú­ci­mi spô­sob­mi:

$("div")		// vy­be­rie všet­ky tri od­se­ky
$("#text")	// vy­be­rie len dru­hý od­sek
$(".bold")	// vy­be­rie pr­vé dva od­se­ky

Pr­vý se­lek­tor vy­be­rie všet­ky od­se­ky, resp. ele­men­ty rep­re­zen­to­va­né ta­gom <div> v do­ku­men­te HTML, za­tiaľ čo dru­hý vy­be­rie iba kon­krét­ny je­den s iden­ti­fi­ká­to­rom "text" a po­sled­ný vy­be­rie pr­vé dva ele­men­ty, pre­to­že ma­jú pri­ra­de­nú trie­du CSS "bold". Ke­by sme te­da chce­li vy­ko­nať ope­rá­ciu nad všet­ký­mi ele­men­tmi ty­pu <div> (nap­rík­lad ich skryť ale­bo zme­niť ich far­bu atď.), za­vo­la­li by sme s tým­to se­lek­to­rom prís­luš­nú ope­rá­ciu a tá by sa ap­li­ko­va­la sú­čas­ne na všet­ky vy­bra­né ele­men­ty. Uve­de­né se­lek­to­ry mož­no vzá­jom­ne kom­bi­no­vať, nap­rík­lad mô­že­me chcieť vy­brať všet­ky ob­jek­ty, kto­ré s od­sek­mi (ele­men­tmi ty­pu <div>) zá­ro­veň ma­jú pri­ra­de­nú CSS trie­du "bold".

$("div.bold")	// vy­be­rie pr­vé dva od­se­ky

Tie­to zá­klad­né tri ty­py se­lek­to­rov nám vo väč­ši­ne prí­pa­dov vy­sta­čia, ale v praxi sa mô­že­me stret­núť aj so si­tuá­cia­mi, keď nám uve­de­né tri se­lek­to­ry ne­mu­sia sta­čiť. Ako prík­lad uve­die­me mož­nosť, že by sme chce­li vy­brať len tre­tí od­sek z uve­de­ných troch, te­da ten, kto­rý ne­má ani iden­ti­fi­ká­tor, ani trie­du CSS.

V ta­kej­to si­tuá­cii nám po­mô­že se­lek­tor :not(.class):

$("div:not(.bold)")	// vy­be­rie po­sled­ný od­sek

Zjed­no­du­še­ne po­ve­da­né, ta­ký­to vý­raz vy­be­rie všet­ky ele­men­ty <div>, kto­ré ne­ma­jú pri­ra­de­nú trie­du "bold", či­že v na­šom prík­la­de ide len o po­sled­ný od­sek. I ten­to se­lek­tor, sa­moz­rej­me, mož­no s os­tat­ný­mi vzá­jom­ne kom­bi­no­vať – mô­že­me nap­rík­lad chcieť vy­brať od­sek s da­ným iden­ti­fi­ká­to­rom, ale len vte­dy, ak ne­má pri­ra­de­nú ne­ja­kú trie­du CSS:

$("#text:not(.bold)")	// vy­be­rie dru­hý od­sek

Tak­to de­fi­no­va­ný vý­raz vy­be­rie ele­ment s iden­ti­fi­ká­to­rom "text", ale len v prí­pa­de, že ten ne­má pri­ra­de­nú trie­du "bold". Ope­rá­tor not() však mož­no po­užiť aj s os­tat­ný­mi se­lek­tor­mi. Ke­by sme chce­li nap­rík­lad vy­brať všet­ky ele­men­ty <div> ok­rem to­ho, kto­rý má iden­ti­fi­ká­tor "text", uro­bi­li by sme to tak­to:

$("div:not(#text)") 

At­ri­bú­to­vé se­lek­to­ry
Ok­rem uve­de­ných zá­klad­ných se­lek­to­rov má­me v jQuery k dis­po­zí­cii i ďal­šiu ka­te­gó­riu, kto­rou sú at­ri­bú­to­vé se­lek­to­ry. Do tej­to ka­te­gó­rie pa­tria se­lek­to­ry, kto­ré umož­ňu­jú vy­be­rať ele­men­ty na zá­kla­de kri­té­rií sta­no­ve­ných z as­pek­tu at­ri­bú­tov – nap­rík­lad mô­že­me chcieť tes­to­vať prí­tom­nosť ne­ja­kých at­ri­bú­tov ale­bo bliž­šie skú­mať ich hod­no­ty. Zoz­nam at­ri­bú­to­vých se­lek­to­rov náj­de­te v ta­buľ­ke 2.

Se­lek­tor Test na Prík­lad Vý­sle­dok
tag[at­ri­bút] prí­tom­nosť at­ri­bú­tu div[id] Ele­men­ty <div>, kto­ré ma­jú at­ri­bút id
tag[at­ri­bút=hod­no­ta] rov­nosť hod­no­ty at­ri­bú­tu in­put[na­me=da­ta] Ele­men­ty <in­put>, kto­rých at­ri­bút na­me je rov­ný re­ťaz­cu "da­ta"
tag[at­ri­bút!=hod­no­ta] ne­rov­nosť hod­no­ty at­ri­bú­tu in­put[na­me!=da­ta] Ele­men­ty <in­put>, kto­rých at­ri­bút na­me nie je rov­ný re­ťaz­cu "da­ta"
tag[at­ri­bút^=hod­no­ta] za­čia­tok hod­no­ty at­ri­bú­tu a[href^=http:] Ele­men­ty <a>, kto­rých at­ri­bút href sa za­čí­na re­ťaz­com "http:"
tag[at­ri­bút$=hod­no­ta] ko­niec hod­no­ty at­ri­bú­tu a[href$=.pdf] Ele­men­ty <a>, kto­rých at­ri­bút href sa kon­čí re­ťaz­com ".pdf"
tag[at­ri­bút*=hod­no­ta] po­dre­ťa­zec hod­no­ty at­ri­bú­tu img[alt*=test] Ele­men­ty <img>, kto­rých at­ri­bút alt ob­sa­hu­je re­ťa­zec "test"
tag[at­ri­bút~=hod­no­ta] slo­vo v hod­no­te at­ri­bú­tu img[alt~=test] Ele­men­ty <img>, kto­rých at­ri­bút alt ob­sa­hu­je slo­vo "test" (od­de­ľo­va­čom slov sú med­ze­ry)
tag[at­ri­bút|=hod­no­ta] hod­no­tu ale­bo pre­fix hod­no­ty at­ri­bú­tu img[alt|=test] Ele­men­ty <img>, kto­rých at­ri­bút alt je rov­ný re­ťaz­cu "test" ale­bo sa za­čí­na tým­to re­ťaz­com a po­ml­čkou ("test-")

Tab. 2

At­ri­bú­to­vé se­lek­to­ry sú v mno­hých prí­pa­doch veľ­mi uži­toč­né, a ako mož­no z uve­de­nej ta­buľ­ky vy­čí­tať, po­sky­tu­jú vy­so­kú mie­ru flexibi­li­ty – od tes­tu na prí­tom­nosť at­ri­bú­tu v ele­men­te až po test na po­dre­ťa­zec hod­no­ty at­ri­bú­tu. Ich po­uži­tie by ma­lo byť z uve­de­nej ta­buľ­ky jas­né, skú­si­me pre­to uviesť prík­la­dy vzťa­hu­jú­ce sa na na­šu strán­ku HTML s tro­mi od­sek­mi.

Ke­by sme chce­li nap­rík­lad vy­brať len tie od­ka­zy (ele­men­ty <a>), kto­ré ma­jú de­fi­no­va­ný at­ri­bút "tar­get", uro­bi­li by sme to tak­to:

$("a[tar­get]")	// vy­be­rie pr­vý a po­sled­ný od­kaz

Ďal­šiu mož­nosť pred­sta­vu­je si­tuácia, keď chce­me vy­brať exter­né od­ka­zy, te­da od­ka­zy za­da­né ab­so­lút­nou URL (za­čí­na­jú­ce sa "http:").

$("a[href^=http:]")	// vy­be­rie po­sled­ný od­kaz

At­ri­bú­to­vé se­lek­to­ry ta­kis­to mož­no ľu­bo­voľ­ne kom­bi­no­vať – mô­že­me nap­rík­lad chcieť vy­brať všet­ky od­ka­zy, kto­ré ma­jú za­da­ný at­ri­bút "tar­get" a zá­ro­veň sa kon­čia re­ťaz­com ".html":

$("a[tar­get][href$=.html]")	// vy­be­rie pr­vý od­kaz

Se­lek­tor pre po­tom­kov
Po­sled­ný se­lek­tor, kto­ré­mu sa bu­de­me v tej­to čas­ti ve­no­vať, je se­lek­tor ">", kto­rý slú­ži na vý­ber po­tom­kov ele­men­tov. Zjed­no­du­še­nie po­ve­da­né, sú vy­bra­né ele­men­ty, kto­ré vy­ho­vu­jú se­lek­to­rom nap­ra­vo od se­lek­to­ra ">" a zá­ro­veň ich pria­mi pred­ko­via (ro­di­čia) vy­ho­vu­jú se­lek­to­rom na­ľa­vo od toh­to se­lek­to­ra.
Ako prík­lad nám mô­že po­slú­žiť si­tuácia, keď chce­me v uve­de­nom kó­de HTML vy­brať ele­men­ty <a>, ale len tie, kto­ré sú zá­ro­veň po­tom­ka­mi ele­men­tu <div> (čo spĺňa­jú pr­vé dva od­ka­zy, po­sled­ný od­kaz nie je za­ba­le­ný v od­se­ku). To mož­no vďa­ka to­mu­to se­lek­to­ru do­siah­nuť veľ­mi jed­no­duc­ho:

$("div > a")	// vy­be­rie pr­vé dva od­ka­zy

Tre­ba si však uve­do­miť, že ten­to ope­rá­tor fun­gu­je len pre pria­mych po­tom­kov, te­da vy­be­rie len tie ele­men­ty <a>, kto­rých pria­my ro­dič je ele­ment <div>. Ke­by sme chce­li vy­brať všet­ky ele­men­ty <a>, kto­ré sú pria­my­mi ale­bo nep­ria­my­mi po­tom­ka­mi ne­ja­ké­ho <div> ele­men­tu (to zna­me­ná, že mô­žu byť za­ba­le­né eš­te v inom ele­men­te, kto­rý je za­ba­le­ný v ele­men­te <div>), sta­čí jed­no­duc­ho po­užiť med­ze­ru, kto­rá slú­ži ako se­lek­tor pre nás­led­ní­kov:

$("div a")

Sa­moz­rej­me, pre oba tie­to se­lek­to­ry opäť pla­tí, že ich mož­no ľu­bo­voľ­ne kom­bi­no­vať s os­tat­ný­mi uve­de­ný­mi se­lek­tor­mi.

Zá­ver
V tej­to čas­ti sme sa oboz­ná­mi­li so zá­klad­ný­mi aj špe­cia­li­zo­va­ný­mi se­lek­tor­mi, kto­ré nám po­sky­tu­je jQuery. Na­bu­dú­ce té­mu o se­lek­to­roch do­kon­čí­me po­kro­či­lý­mi se­lek­tor­mi, kto­ré bu­dú vy­uží­vať mo­del DOM do­ku­men­tu HTML.

Ďal­šie čas­ti >>

Zdroj: Infoware 5/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