jQuery - užitečný a mocný javascriptový framework
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.
Pokud se vám líbil tento článek můžete Profi magazín odebírat pomocí RSS.
Možné související články:
Komentáře
gee
2. srpen 2008, 08: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.
