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 330×

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: Moderní informační systémy podporují automatizaci

Konference: Moderní informační systémy podporují automatizaci

Současná situace v šíření onemocnění Covid-19 klade na řadu firem nové nároky a mnohé z nich jsou nyní více než kdy jindy závislé na nejmodernějších informačních technologiích. Proto i v oblasti podnikových informačních systémů vidíme rostoucí důraz na automatizaci nebo na důslednou integraci. Také o těchto trendech se bude mluvit na konferenci Firemní informační systémy, která se koná 24.9.2020 v pražském Kongresovém centru Vavruška na Karlově náměstí.

Reklama
Reklama
Obrázek ke článku Nebezpečí ukrytá v USB: z nuly na škvarek za pět sekund

Nebezpečí ukrytá v USB: z nuly na škvarek za pět sekund

Za cenu šesti dolarů lze celkem bez obtíží koupit nový, líbivě vyhlížející flash disk. Přidaná hodnota, které se vám spolu s ním dostane, už tak moc líbivá není. To, co se před pár sekundami tvářilo jako externí disk, se po připojení k počítači změní v důmyslné elektrické křeslo, které vaše zařízení v onen příslovečný škvarek promění za pár sekund. Cílovou skupinou pro koupi takových zařízení by mohli být záškodníci, kteří by tímto způsobem osnovali pomstu třeba vůči záletnému partnerovi. 

Obrázek ke článku Znalosti, dovednosti i prestižní titul MBA: Jde to i moderně a online

Znalosti, dovednosti i prestižní titul MBA: Jde to i moderně a online

Snad nikdy není špatná příležitost na investici do hodnotného vzdělání. Obzvlášť v případě, že absolvent dovede teoretické poznatky přetavit v praktické dovednosti, využitelné při řešení problémů i v komunikaci. Právě na to se specializuje studijní program MBA Řízení informačních technologií, vyučovaný na Business Institutu.

Obrázek ke článku Coding Bootcamp Praha: Obor IT krize nepoznamenala, žádaní jsou weboví vývojáři

Coding Bootcamp Praha: Obor IT krize nepoznamenala, žádaní jsou weboví vývojáři

Pandemie Covid-19 otřásla trhem práce v základech. Dopady krize pocítilo celkově až 45 % zaměstnanců. Není divu, že čím dál větší jistotu přináší obor IT. Ten zůstal krizí téměř nepoznamenán a při nutnosti začít dělat věci na dálku se ještě více ukázalo, jak moc mnohé firmy kvalitní IT potřebují. Do IT nyní přicházejí začátečníci, kteří v něm vidí lukrativní budoucnost a jistotu, ale i freelanceři a zaměstnanci z oborů zasažených krizí

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