jQuery - XPath selektory
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
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       18 878×

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 Konference: Kvalitní informační systém roste spolu se svými uživateli

Konference: Kvalitní informační systém roste spolu se svými uživateli

Informační systémy, které rostou spolu s požadavky svých uživatelů, efektivní uchování důležitých dokumentů nebo moderní uživatelská rozhraní, která maximálně zjednodušují práci s informacemi - to je jen několik z řady aktuálních trendů v oblasti podnikových informačních systémů, kterým se bude věnovat konference Firemní informační systémy, která se koná 31.5.2018 v pražském Kongresovém centru Vavruška na Karlově náměstí.

Reklama
Reklama
Obrázek ke článku Bezrealitky.cz na novém webu rychleji propojí vážné zájemce s majiteli nemovitostí

Bezrealitky.cz na novém webu rychleji propojí vážné zájemce s majiteli nemovitostí

Největší platforma pro přímý prodej a pronájem domů a bytů Bezrealitky.cz představila novou podobu svého portálu. Redesign zásadně zjednodušuje všechny transakce, mění způsob, jakým zájemci o bydlení komunikují s majiteli nemovitostí, přináší nejpřesnější filtrování nabídek na trhu, ale také umožňuje prověřovat důvěryhodnost zájemců. 

Obrázek ke článku Samba.ai: Personalizační nástroje hlásí připravenost na GDPR

Samba.ai: Personalizační nástroje hlásí připravenost na GDPR

Do ostrého nasazení nařízení GDPR, které upravuje nakládání s osobními údaji, zbývá pár dní, a vzbuzuje vrásky u řady provozovatelů služeb, které pracují s profilací návštěvníků na stránkách a personalizací obsahu. Český personalizační nástroj Samba.ai(dříve Yottly) zajišťující personalizaci webu a prediktivní automatizaci email marketingu je však slovy svého CEO Davida Vyskočila na GDPR plně připraveno. 

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