jQuery - XPath selektory
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

jQuery - XPath selektoryjQuery - XPath selektory

 
Hledat
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Laser Game Ostrava

jQuery - XPath selektory

Google       Google       20. 5. 2008       20 259×

V minulom dieli sme si naznačili používanie CSS selektorov. Dnes si ukážeme ako sa používajú v spojení s Xpath selektormi a ako ich môžeme využiť.

Reklama
Reklama

XPath selektory

Už som ich tu niekoľkokrát spomínal a v minulom dieli sme ich už aj použili. Dnes si ich teda predstavíme trochu bližšie. Dajú sa využívať samostatne i v spojení s CSS selektormi. Pre lepšie pochopenie ich použitia a využitia prejdeme priamo na ukážky.

S ukážkami budeme pokračovať v našom seriálovom html.

Na začiatok sa pozrieme na selektory :first a :last. Áno, niečo podobné nájdete aj v CSS, no podpora prehliadačmi nie je bohvieaká. A práve v tom nám pomôže jQuery. Poďme sa teda pozrieť bližšie na ich použitie.

$(“#orderedList li:first”).addClass(“highlight”);
$(“#orderedList li:last”).addClass(“red”);

Ak si spomínate, už v minulom dieli sme používali $(“#ordered list li:last”) spolu s eventom hover, ktorý nám zabezpečoval, že ak sme prešli myšou nad poslednou položkou nášho zoznamu, zmenila sa mu trieda na green. Selektor :last teda zabezpečí vybratie posledného prvku z daného zoznamu. Ak ho použijete v spojení p:last, tak zabezpečí vybratie posledného odstavca na stránke. Selektor :first, ako ste si mohli domyslieť, naopak vyberá prvý prvok. Ekvivalentom k selektoru :first je aj :eq(0), ktorý vyberie prvok s poradovým číslom 0. Toto si môžeme zmeniť na prakticky akékoľvek číslo, a ak prvok s daným poradovým číslom bude existovať, priradí sa mu daná akcia.

Pre ukážku si necháme v zozname nájsť 3. položku a priradíme jej triedu green.

$(“#orderedList li:eq(2)”).addClass(“green”);

Ak sa niekto pýta, prečo má prvý prvok číslo nula a tretí číslo 2, tak je to preto, lebo číslovanie začína od nuly. Dávajte si na to teda pozor. Pre predstavenie ďalších selektorov tentokrát využijeme náš druhý zoznam. Ukážeme si, ako vyberieme daný zoznam, keďže nemá triedu orderedlist, a ako vyberieme niekoľko prvkov naraz.

$(“ul:not(#orderedList) li:lt(3)”).addClass(“green”);

Selektor :lt(3) vyberie prvky od 1 do 2. Pre lepšie pochopenie by sme :lt(3) mohli zapísať ako position() < 3. Opakom k :lt je :gt, ktorý vyberie prvky nad daným číslom.

Ak vám dané príklady neprišli príliš praktické, teraz si ukážeme, ako rozlíšiť odkazy na našich stránkach. Najprv si však musíme rozšíriť našu testovaciu stránku o zopár odkazov. Doplňte si preto do vášho html súboru nasledujúce:

Lokalny odkaz v ramci jednej stranky
Lokalny odkaz v ramci nasho webu
Externy odkaz
Odkaz na PDF subor
Odkaz na XLS subor

Na mnohých stránkach je možné vidieť, že odkazy smerujúce mimo vlastný web sú nejakým spôsobom odlíšené. Taktiež odkazy na súbory na stiahnutie bývajú iné. Majú pri sebe napríklad ikonku daného súborového typu. Teraz si teda ukážeme ako na to pomocou jQuery.

$('a[@href*=#]').addClass('red');
$('a[@href*=http://]').addClass('green');
$('a[@href$=pdf]').after(' – PDF subor');
$('a[@href$=xls]').after(' – XLS subor');

Pomocou Xpath selektoru @href* prehľadáme atribút href a ak sa v ňom nachádza na akejkoľvek pozícii reťazec uvedený za = (rovná sa), tak vyhodnotí daný odkaz ako vyhovujúci.

Ak použijeme @href$, jQuery bude hľadať na konci reťazca a tak docielime to, že nám nájde súbory podľa ich koncovky.

Funkciu addClass už poznáme z predošlých príkladov, no funkcia .after() je nová. Tá zabezpečuje pridanie textu v zátvorke za vybraný reťazec.

Aby toho nebolo málo, pomocou XPath selektorov môžeme vyberať aj prvky formulára a mnoho iného. Pre popis všetkých podporovaných XPath selektorov jQuery si prečítajte prosím dokumentáciu.

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

4 názory  —  4 nové  
Hlasování bylo ukončeno    
0 hlasů
Google
(fotka) Martin PuškáčMartin sa venuje prevažne webovej grafike, taktiež aj webovému programovaniu. Vo voľnom čase sa zaujíma o jQuery, HTML5, PHP, framework Laravel a interaktívne aplikácie a nové trendy v oblasti webu.
Web     Twitter     LinkedIn    

Nové články

Obrázek ke článku Open source neznamená „zdarma“

Open source neznamená „zdarma“

Mnoho společností po celém světě, univerzity, vládní organizace a jim podobné dnes používají open source technologie k vytvoření vlastních webových stránek. Tyto technologie se používají čím dál tím více. Jednoduše proto, že je řada poskytovatelů nabízí zcela zdarma. Je to ale opravdu to správné řešení pro všechny? 

Reklama
Reklama
Obrázek ke článku Rádi sledujete obsah streamovacích služeb? Dejte si pozor na pirátské verze Mandaloriana a Netflixu

Rádi sledujete obsah streamovacích služeb? Dejte si pozor na pirátské verze Mandaloriana a Netflixu

Streamovací služby a jejich obsah se v uplynulých měsících těšily velkému zájmu uživatelů, kteří se při pobytu v karanténě chtěli zabavit sledováním filmů a seriálů. Toho bleskově zneužili hackeři, kteří pod názvy oblíbených streamovacích platforem a jejich obsahu maskovali škodlivé soubory. Nejčastěji používali jako návnadu Netflix a seriál The Mandalorian. 

Obrázek ke článku Bionické ruce mění lidem životy. Konference INSPO ukázala nejnovější technologie

Bionické ruce mění lidem životy. Konference INSPO ukázala nejnovější technologie

Bionické myoprotézy rukou jsou ukázkou pokroku, který udělaly za posledních dvacet let technologie pro lidi se zdravotním postižením. Dnešní protézy, které fungují na principu snímání svalových vzorců, umožňují uživatelům operovat s křehkými předměty či provádět úkony složité na kooperaci různých částí těla – ať už jde o hru na hudební nástroje, zavazování tkaniček, nebo třeba pití ze skleničky. Na 20. ročníku konference INSPO se budou zájemci moci naživo seznámit nejen s takzvanou myorukou, ale rovněž s jedním z jejích uživatelů. 

Obrázek ke článku Využití .htaccess na malém webu

Využití .htaccess na malém webu

V dnešní době existuje spoustu cms, které mnohdy ale vůbec nepotřebujeme a stačila by nám pouze základní funkčnost k úpravě url, přesměrování. K tomuto účelu je ideální .htaccess soubor, který nám se všemi těmato úpravami umí pomoct.

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032020 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý