Hello, world!

Každý programovací tutoriál bude začínat ukázkou "Ahoj, světe!" Tento tutoriál není výjimkou. V předchozí kapitole jsme se naučili, připojit jQuery do naší stránky, abychom mohli začít využívat všechny jeho skvělé funkce. Než začnete psát svůj vlastní kód, musíte vědět trochu více o tom, jak jQuery funguje. Ale abyste se ujistili, že vše funguje, a abyste viděli, jak jednoduché je jQuery, začněme malým příkladem:

<div id="divTest1"></div>
<script type="text/javascript">
$("#divTest1").text("Hello, world!");
</script>

Dobře, takže máme tag div s id "divTest1". V tagu script (JavaScript) použijeme pro přístup k jQuery zkratku $, pak vybereme všechny prvky s id „divTest1“ (je tu jen jeden) a nastavíme jeho text na „Hello, world!“. Možná nevíte dost o jQuery, abyste pochopili, proč a jak to funguje, ale jak budete postupovat tímto tutoriálem, budou všechny prvky podrobně vysvětleny.

Dokonce i tak jednoduchý úkol, jako je tento, by ve skutečnosti vyžadoval napsání několik dalších znaků, pokud byste to museli udělat v prostém JavaScriptu bez pomoci jQuery:

<div id="divTest2"></div>
<script type="text/javascript">
document.getElementById("divTest2").innerHTML = "Hello, world!";
</script>

A bylo by to ještě delší, kdyby náš HTML element neměl ID, ale třeba element class.

Normálně byste všakměli počkat, až dokument přejde do stavu PŘIPRAVENO, než začnete jeho obsah upravovat. Výše uvedené příklady budou fungovat ve většině prohlížečů a pravděpodobně budou fungovat i při provádění pokročilejších věcí, ale některé úlohy mohou selhat, pokud se o ně pokusíte dříve, než je dokument načten a připraven. Naštěstí to jQuery také velmi usnadňuje, jak uvidíme v další kapitole. Poté se začneme zabývat jedním z nejdůležitějších prvků jQuery, které již byly použity ve výše uvedeném příkladu, jsou to: Selektory.