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

jQuery - XPath selektoryjQuery - XPath selektory

 

jQuery - XPath selektory

Google       Google       20. 5. 2008       18 573×

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 První český hackathon ve vlaku inspirovaly služby jako  Tinder, Airbnb nebo Uber

První český hackathon ve vlaku inspirovaly služby jako Tinder, Airbnb nebo Uber

Patnáct set kilometrů, cesta přes dva státy, šestnáct hodin programování a přísun
energy drinků, tak by se dal shrnout unikátní hackathon ve vlaku pořádaný Kiwi.com.
Z Prahy do Košic a zpět se svezlo celkem 13 týmů, každý s originálním nápadem. Hlavní
výhru, voucher na letenky v hodnotě 2 500 EUR, si v Praze převzal tým až z Ukrajiny.
Společně naprogramovali aplikaci Fly2event, která vytváří cestovatelské balíčky ušité
uživatelům na míru podle toho, co si „olajkovali“ na Facebooku. Projekt má i podle
organizátorů budoucnost a jeho tvůrci ho v současnosti už spouští na webové stránce
fly2event.com.

Reklama
Reklama
Obrázek ke článku Gamifikace nakupování dorazila i do České republiky

Gamifikace nakupování dorazila i do České republiky

Zákazníci zejména retailových společností jsou často znuděni klasickými věrnostními či motivačními programy. Většinou z toho důvodu, že jsou jeden jako druhý a nepřináší nic nového. Ale i v České republice se projevují zahraniční trendy, nedávno zde totiž vstoupila na trh a rychle se uchytila nová platforma kombinující to nejlepší z věrnostních a motivačních programů, která navíc využívá prvky gamifikace – Rondo.cz. Na hlavní milníky vývoje nálad a motivace zákazníků a nejnovější trendy se zaměřil Jan Hřebabecký, spoluzakladatel Rondo.cz

Obrázek ke článku NopCommerce – datová vrstva a přístup k datům – 2. díl

NopCommerce – datová vrstva a přístup k datům – 2. díl

V minulém článku jsme si představili platformu NopCommerce z globálního pohledu. V dnešním díle se již zaměříme na konkrétní část systému, a to datovou vrstvu. Představíme si základní stavební kameny systému v podobě doménových objektů. Ukážeme si, jakým způsobem rozšířit doménové objekty a jakým způsobem přistupuje NopCommerce k nastavení systému a modulů.

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