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

jQuery - XPath selektoryjQuery - XPath selektory

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno

jQuery - XPath selektory

Google       Google       20. 5. 2008       19 264×

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 Jak správně sedět u notebooku, aby nebolela záda

Jak správně sedět u notebooku, aby nebolela záda

Lidé často ke své práci nebo ve volném čase používají notebooky. Aby si při práci s nimi nezničili záda, je důležité se naučit správně sedět. MUDr. Michaela Tomanová primářka Infinity Clinic a Rehabilitačního ústavu Brandýs nad Orlicí radí, jak na to.

Reklama
Reklama
Obrázek ke článku Blockchain a tokenizace mají potenciál i ve světě tradičních investic.

Blockchain a tokenizace mají potenciál i ve světě tradičních investic.

Fenomén tokenizace, který učaroval světu kryptoměn, má potenciál prorazit i v investicích klasického střihu. Jde jen o to, jak překonat riziko podvodů fungujících v kryptosvětě, kdy až 93 % projektů končí fiaskem. Experti v tomto směru však vidí budoucnost. Hovoří se dokonce o zrodu nového ekonomického řádu.

Obrázek ke článku Datafesťak 2018 bude o datech, byznyse a ženách v IT

Datafesťak 2018 bude o datech, byznyse a ženách v IT

Na Univerzitě v Hradci Králové se 23. a 24. listopadu potkají všichni, které zajímá práce s daty. 

Reálné zkušenosti se zpracováním dat budou v prostorách univerzity prezentovat zástupci obchodních i výrobních firem. Potkat tak bude možné představitelé například z Kiwi.com, Crocodille, Dáme Jídlo nebo společnosti Adler. 

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