jQuery - $(document).ready() a Selektory
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

jQuery - $(document).ready() a SelektoryjQuery - $(document).ready() a Selektory

 
Hledat
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Pergoly a střechy Brno

jQuery - $(document).ready() a Selektory

Google       Google       20. 4. 2008       26 348×

Naposledy sme si ukázali prvé kódy s jQuery. Ako ste si mohli všimnúť, používali sme vec menom selektory. Dnes sa na ne pozrieme bližšie.

Reklama
Reklama

$(document).ready()

Na úvod si však ešte ozrejmíme pár vecí ohľadom $(document).ready().

$(document).ready(function() {
// jQuery kód
});

Dovnútra tohto kódu budeme zapisovať všetky naše jQuery akcie. Prečo je takéto riešenie výhodnejšie oproti štandardným volaniam JavaScriptu? Kód, ktorý sem zapíšeme sa vykoná okamžite, ako je načítaný DOM element a to ešte pred načítaním samotného obsahu stránok. Oproti window.load sa kód vykonáva neporovnateľne skôr a efekty pre jednotlivé elementy sa budú spúšťať okamžite ako sa daný element načíta a nebude musieť čakať na načítanie kompletnej stránky.

Ďalšou nespornou výhodou oproti klasickému volaniu JavaScriptu je odstránenie potreby používať na elementoch, napríklad odkazoch, veci ako javascript:void(0);. Odpadá tak množstvo kódu, ktoré je potrebné zapísať priamo do stránky, čo napomáha aj sémantike a prístupnosti (menej kódu, viac obsahu).

Vďaka $(document).ready() sa vyhnete aj potrebe pridávať do tagu body časť onload. Nevýhodou onload je, že naraz môžete spravidla zavolať len jednu funkciu. A takisto, funkcie volané týmto spôsobom sa vykonajú až po načítaní kompletnej stránky. $(document).ready() teda prináša nesporne mnoho výhod oproti klasickému spúšťaniu javascriptovských funkcií.

Viacnásobné použitie $(document).ready()

Medzi ďalšie výhody $(document).ready() funkcie patrí to, že je možné ju volať viackrát v jednom dokumente. Vďaka tomuto tak môžete rozdeliť svoj kód do viacerých blokov. Kód môžete rozdeliť aj do viacerých samostatných súborov. Napríklad, ak viete, že niektoré efekty sa budú vykonávať iba na úvodnej stránke, ale iné na všetkých, tak si môžete vytvoriť dva samostatné .js súbory, pričom jeden budete volať iba na úvodnej stránke a druhý na všetkých zvyšných.

<script src="/ja/vsade.js" type="text/javascript"></script>
<script src="/js/uvodnastranka.js" type="text/javascript"></script>

Skrátený zápis $(document).ready()

Tak ako všetko v jQuery, aj $(document).ready() sa dá zapísať ešte kratšie a to pomocou:

$(function() {
// jQuery kód
});

V našich príkladoch však budeme používať štandardný zápis.

Selektory v jQuery

jQuery je obľúbené práve vďaka jeho používaniu CSS a XPath selektorov. Čo to v praxi znamená?

Ak poznáte a pracujete s CSS, používate takisto selektory. Sú to elementy ako a, a:hover, pre, h1, h2 a takisto #oznacenie-div alebo .span-nazov. Ako to teda vyzerá v praxi?

$("a").click(function(){
   alert("Thanks for visiting!");
   return false;
 });

Áno, je to príklad z predošlého tutoriálu. Týmto kódom jQuery vyhľadá všetky odkazy v HTML dokumente a aplikuje na ne funkcie. Takže, ako povieme jQuery, aký selektor má hľadať?

$(“nazov selektoru”) – pomocou tohto zápisu jQuery povieme, čo má hľadať. Ak chceme teda vyhľadať všetky odkazy v dokumente, zapíšeme $(“a”). Ak chceme vybrať konkrétny link s priradenou triedou napríklad „mojaLinka“, zapíšeme $(“a .mojaLinka”). Taktiež môžme vyhľadávať iba id-čka $(“#nazovID”).

Pre tých, čo majú skúsenosti s JavaScriptom, je tento zápis podobný funkcii document.getElementById. Nevýhoda tejto funkcie oproti jQuery je tá, že pomocou nej nemôžete vybrať všetky elementy s rovnakým id. Nemôžete napríklad vybrať všetky odkazy na stránke.

Praktická ukážka selektorov

Aby sme si prakticky ukázali, čo a ako využívať selektory, vytvoríme si HTML súbor, v ktorom vytvoríme nečíslovaný zoznam, ktorému priradíme id #orderedList. Taktiež si vytvoríme CSS súbor, do ktorého si nadefinujeme štýly, na ktoré sa budeme neskôr odvolávať. CSS súbor si uložte ako jquery_tuts.css.

HTML súbor:
<html>                                                                  
 <head>                  
<link rel="stylesheet" type="text/css" href="jquery_tut.css" media="screen" />
                                                
 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
 <script type="text/javascript">                                         
$(document).ready(function() {
   //Sem pojde vas kod
 });
 </script>                                                               
 </head>                                                                 
 <body>                                                                  
   <ul id=“orderedList“>
	<li>Polozka zoznamu</li>
	<li>Dalsia polozka zoznamu</li>
	<li>Tretia polozka zoznamu</li>
	<li>Este jedna polozka zoznamu</li>
   </ul>     
   <ul>
	<li>Novy zoznam</li>
	<li>Dalsia polozka noveho zoznamu</li>
	<li>Este jedna polozka</li>
   </ul>                          
 </body>                                                                 
 </html>
CSS súbor:
.blue{color:blue}
.red{color:red}
.green{color:green}
.highlight{color:blue;background:blue;font-weigh:bold}

Ako prvé pridáme celému zoznamu novú CSS triedu. Docielime toho pomocou jQuery akcie addClass(). Do nášho HTML súboru do

$(document).ready(function() {
   //Sem pojde vas kod
 });
na miesto //Sem pojde vas kod dopíšete nasledujúce: $("#orderedlist").addClass("red");

Daný kód nájde v HTML dokumente element s id-čkom orderedList a pridá mu triedu red. Môžete si všimnúť, že druhý zoznam zostal nezmenený a to kvôli tomu, že nemal priradené id orderedList.

jQuery dokáže tak ako CSS vyberať aj potomkov jednotlivých prvkov.

$("#orderedlist > li").addClass("blue");

jQuery nájde všetkých potomkov prvku s id orderedlist a priradí im triedu blue.

Teraz si ukážeme komplikovanejší príklad. Vyrobíme hover efekt pri prejdení myšou nad prvkov, avšak aplikujeme tento efekt iba na poslednú položku v našom zozname s id orderedlist.

   $("#orderedlist li:last").hover(function() {
     $(this).addClass("green");
   },function(){
     $(this).removeClass("green");
   });

Kompletný zoznam CSS a Xpath selektorov nájdete na stránkach jQuery.

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

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ý