jQuery - užitečný a mocný javascriptový framework | Profi Magazín - webdesign, ikony, jquery, Textpattern


jQuery - užitečný a mocný javascriptový framework

Jiří Melčák | 2. srpna 2008 | 20 973× zobrazeno | 2 komentáře
Hodnocení: 4.8 (11 hlasů)

Věřím, že každý tvůrce webu či webové aplikace, ať už online nebo offline, již minimálně slyšel o javascriptových knihovnách, které neskutečným způsobem dokáží zjednodušit, zeefktivnit a zrychlit jejich tvorbu. Na českém internetu je nejpoužívanějším javascriptovým frameworkem jQuery, který získává den za dnem větší pozornost. Nesmíme však zapomenout i na ostatní jako je např. Prototype, Script.aculo.us (což je nádstavba Prototype), MooTools, Dojo a desítky dalších. Je to více než rok, co jsem poprvé přičichl k jQuery a musím uznat, že je to opravdu elegantní a mocný framework. Pokud jej ještě neznáte, prosím, seznamte se.

Co umí jQuery?

Lepší otázka by spíše byla, co jQuery neumí. Pomocí jQuery snadno najdete jakýkoliv element v DOMu (Document Object Model), můžete tvořit nové elementy nebo měnit stávající. Pro nalezení elementů můžete využít buď selektory a třídy stejně jako v CSS, a pro zkušenější uživatelé tu je také XPath. Framework jQuery si s AJAXem samozřejmě také tyká, takže možností pro nasazení je nepřeberné. A co víc, pro jQuery existují stovky pluginů, které rozšiřují jeho funkce, animace a vlastnosti. Velmi přehledně je sepsána také dokumentace. S jQuery tedy můžete:

  • přistupovat k jednotlivým částem stránky,
  • měnit vzhled stránky,
  • rozšiřovat a měnit obsah stránky,
  • reagovat na reakce uživatele na stránce,
  • přidávat animace a efekty,
  • získávat informace ze serveru bez nutnosti načtení celé stránky,
  • a zjednodušit si běžné javascriptové úkoly.


Díky jQuery můžete abstrahovat od určitých rozmanitostí jednotlivých prohlížečů, kde každý má/může mít svou vlastní interpretaci standardů, které se tak stávají odchylkami od běžně doporučených standardů. jQuery tak přídává jakousi abstraktní vrstvu, s níž můžete překonat jednotlivé rozdíly, snižuje objem kódu a nesmírně ho zjednoduší a to také díky tzv. řetěžení, kdy můžete určitému elementu přiřadit na sebe navazující akce.

Podívejme se na následující kód:

<html>                                                                  
<head>                                                                  
  <script type="text/javascript" src="jquery.js"></script>          
  <script type="text/javascript">                                         
    // zde bude kód javascriptu                                    
  </script>                                                               
</head>                                                                 
<body>                                                                  
  <!-- zde je obsah stránky -->                                        
</body>                                                                 
</html>

Tato stránka načte jen jquery.js knihovnu. Ujistěte se, že máte správné URL, kde je uložena vaše kopie jQuery. Tento příklad předpokládá, že jej uživatel má ve stejném adresáři jako tento příklad.

Vzhledem k tomu, že většinu věcí, které chcete pomocí jQuery provádět bude mít vliv na DOM, potřebujeme se ubezpečit, že náš skript se začne provádět až poté, co je DOM připraven:

$(document).ready(function() {
  // skript, který se provede až je DOM připraven
});

Nyní se už jen v rychlosti podívejte na několik drobných příkladů s komentářem, co daný kus kódu udělá.

$(document).ready(function() {

  $("a").addClass("cervena");
  // všem odkazům přidá css class s názvem cervena
  
  $("a[@name]").css("background", "#eee" );
  // všem odkazům s atributem name nastavíme barvu pozadí #eee
  // zde je použít XPath
  
  $("p[class]").hide();
  // schová všechny odstavce, které obsahují atribut "class"
  // jak vidíte, je možno kombinovat css a xpath selektory
  
  $("p:eq(0)").show();
  // zobrazí první odstavec na stránce
  // zde je použít vlastní selektor jQuery ":eq"
  
  $("p").after("<hr />");
  // přidá za každý element <p> horizontální čáru 
  
  $("input[@name=jmeno]").val();
  // získá hodnoty (value) z inputů, které mají atribut name a rovnají se hodnotě 'jmeno' 
  
  $("input[@type=radio][@checked]")
  // vybere všechny zatržené radio buttony
  
  $("a.pozor").click(function() {
    alert("Ahoj, já jsem jQuery.");
  });
  // kliknutím na odkaz s class "pozor" se zobrazí alert okno s daným textem 
  
  $("a.navigace").toggle(function(){
    $("#nav").hide('slow');
  },function(){
    $("#nav").show('fast');
  });
  // kliknutím na odkaz s class "navigae" se pomalu schová prvek se selektorem #nav,
  // po dalším kliknutí se rychle zobrazí zpět
  

  $("#list li").hover(function() {
    $(this).addClass("hover");
  },function(){
    $(this).removeClass("hover");
  });
  // při hover nad LI prvek, který je potomkem #list se přidá css class "hover"
  // a při zrušení hoveru se přiřazená css třída odstraní
  
});

Výše jste viděli pár základních věcí, jak napojit jQuery framework, jak je možno nacházet elementy v DOMu a přiřazovat jim CSS třídu nebo ji odstraňovat, případně použít nějakou interní funkci. Určitě závěrem bych měl zmínit odkazy, jaké selektory můžete v jQuery použít. jQuery je opravdý mocný nástroj a jeho sílu si ukážeme na konkrétních případech v dalších článcích v této rubrice.

Komentáře

gee
2. srpna 2008, 09:29

Dik, vyborny clanok. Uz sa tesim na pokracovanie. jQuery pouzivam, ale som rad, ze je tu pekne zhrnutie a system step-by-step. Dufam, ze ti vydrzi entuziazmus.

Pashak #20
2. února 2009, 00:01

…super… díky moc!!!

Komentáře jsou uzavřeny

Pracovní projekty

Bleskovky

Kniha: jQuery Kuchařka programátora

Kniha: jQuery Kuchařka programátora

Rád bych upozornil na zajímavou knihu, o kterou jsem zavadil. Jedná se o knihu s názvem jQuery Kuchařka programátora a je tedy zřejmé, co bude jejím obsahem. Nemá moc smysl cokoliv popisovat. Raději hned mrkněte do obsahu kapitol nebo zkoukněte ukázkovou kapitolu v PDF. Běžná cena je 590 Kč. Momentálně ji můžete online koupit za 502 Kč.

Textpattern.com redesignoval web

Textpattern

Oficiální stránky mého oblíbeného CMS Textpattern prošly redesignem - www.textpattern.com. Ještě je potřeba kompletně redesignovat celý výchozí admin a mohl by se Textpattern lehce vrátit na výsluní. Poslední verze Textpattern 4.2.0 sice podporuje skiny pro admin, ale abych byl upřímný, tak drtivá většina nestojí ani za stažení. Budu muset dodělat tu svou představu o adminu Textpatternu.

Guide to CSS support in e-mail clients

Guide to CSS support in e-mail clients

Tvorba HTML e-mailu rozesíláného především v podobě newsletteru představuje občas nemalé trápení a ladění, aby e-mail vypadal přesně tak, jak chcete nebo jak jste zamýšleli. Na serveru campaignmonitor.com jsou k dispozici tabulky (i ke stažení v PDF, ZIP) s podporou CSS selektorů a vlastností, které lze v nejpoužívanějších e-mailových klientech bezpečně používat.

Fascinující pohled na svět

The Big Picture

Na serveru Boston.com můžete v kategorii The Big Picture vidět fotografie zachycující atmosféru různých zemí, národností, přírodních jevů i katastrof, politiku, válku atd..

Vývoj produktů Apple v letech 1977-2008

Vývoj produktů Apple

Zajímavou podívanou vám nabídne článek, který shrnuje vývoj výrobků Apple, od stolních počítačů přes notebooky, až po jednotlivé periferie jako klávesnice a myš.

Zobrazit další bleskovky »

O všem na internetu