WebDev.wiki > Návody pro webmastery a vývojáře > Základy jQuery

Základy jQuery - JQuery

vydáno: 22.11.2016, seriál: JQuery

Javascriptová knihovna jQuery je pravděpodobně nejpoužívanějším doplňkem k HTML, CSS a JavaScriptu na dnešním internetu. Jednoduše řečeno, používá se především ke:

změnám struktury HTML,
vizuálním efektům,
práci se všelijakými událostmi, které vznikají při uživatelově interakci s webem,
k získávání dat (ze serverů).

Všeho, co umí jQuery, je možné docílit i bez jQuery. Její kouzlo a důvod, proč je tolik rozšířená, je způsob, jakým jQuery zmíněné druhy operací zjednodušuje. Pojďme si dát příklad takového zjednodušení.

Ukázka:

Získání vybrané hodnoty elementu <select> pomocí samotného JavaScriptu

Javascript

var selectBox = document.getElementById('narodnost');
var narodnost = selectBox.options[selectBox.selectedIndex].value;

HTML

<select id="narodnost">
  <option value="1">Čech</option>
  <option value="2">Slovák</option>
  <option value="3">Vietnamec</option>
</select>

Použité tagy: <select>, <option>

Ukázka:

Získání vybrané hodnoty <select> pomocí jQuery

Javascript

var narodnost = $('#narodnost').val();

HTML

<select id="narodnost">
  <option value="1">Čech</option>
  <option value="2">Slovák</option>
  <option value="3">Vietnamec</option>
</select>

Použité tagy: <select>, <option>

Jak přidat jQuery do webové stránky

Stažení jQuery

Instalace jQuery do existující webové stránky je velmi jednoduchá. Je třeba pouze odkázat na samotnou jQuery jako soubor pomocí elementu <script> tak, jak je to v ukázce níže. Poslední vydání jQuery si můžete stáhnout na: http://jquery.com/download/ a uložit si ji do adresáře svého webu, například do pod-adresáře lib/.

CDN

Nebo můžete použít nějaké CDN, například od Googlu:

https://ajax.googleapis.com/ajax/libs/jquery/<verze>/jquery.min.js

Kde verze nahradíte za verzi jQuery, kterou chcete přidat, například 3.1.1

Instalátory

jQuery lze získat také pomocí populárních instalátorů. Nejdříve v příkazové řádce přejděte do adresáře vašeho webu a následně použijte jeden z následujících příkazů.

npm install jquery

bower install jquery

Přidání do webu

Ať už jste se rozhodli pro jakýkoli způsob získání jQuery, budete mít vždy nějakou cestu nebo adresu k souboru jQuery. Pro jQuery verze 3.1.1 by cesty vypadaly následovně:

Stažení: lib/jquery-3.1.1.min.js
CDN: https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js
npm: node_modules/jquery/dist/jquery-3.1.1.min.js
bower: bower_components/jquery/dist/jquery-3.1.1.min.js

Do své stránky vložíte jQuery pomocí <script> elementu:

<script type="text/javascript" src="lib/jquery-3.1.1.min.js"></script>

který vložíte buď před konec elementu <body> (těsně před </body>) a nebo kamkoli dovnitř elementu <head>. Nezapomeňte nahradit cestu za vlastní a i verzi jQuery, kterou jste si stáhli a nebo chcete použít.

Pojďme se tedy podívat na první kategorii, manipulaci s DOM, jinými slovy: jak pracovat s HTML pomocí jQuery.

Téměř v každém případě potřebujeme nejdříve definovat (vybrat), se kterými HTML elementy ve webové stránce / aplikaci chceme pracovat a následně na ten výběr elementů použít nějakou operaci způsobem:

$(výběr).operace()

Výběr je možné provést funkcí s názvem jQuery() a nebo můžeme totéž učinit zkratkovou funkci $(). Obě tyto funkce vrátí jQuery objekt s výběrem elementů, na který pak můžeme aplikovat operace pomocí dalších jQuery funkcí.

Výběr HTML elementů

Pro výběr elementů používá jQuery v první řadě CSS selektory, připomeňme si o co se jedná na několika příkladech:

$('span') - vybere všechny elementy <span>

$('#menu') - vybere element s atributem id="menu"

$('.polozka-menu') - vybere všechny elementy s CSS třídou polozka-menu, tedy elementy, které mají polozka-menu v atributu class class="polozka-menu"

$('input[type="text"]') - vybere všechna textová vstupní pole

$('nav a') - vybere všechny odkazy (elementy <a>) uvnitř elementu <nav>

$('b, i, span') - vybere všechny elementy <b>, <i> a <span>

CSS selektorů je k dispozici mnoho. Více informací naleznete zde.

DOM Manipulace

Máme vybráno. Nyní můžeme s naším výběrem elementů provádět operace. Například:

Ukázka:

Vložení nové položky do menu pomocí jQuery

Javascript

$('nav').append('<a href="https://cs.webdev.wiki/">Super stránka o tvorbě webu</a>');

HTML

<nav>
  <a href="/home">Domů</a>
  <a href="/kontakt">Kontakt</a>
</nav>

Použité tagy: <nav>, <a>

V dalším díle tohoto seriálu se podíváme na jednotlivé operace, které můžeme provádět s HTML provádět pomocí jQuery a uvedeme si příklady.

HTML: návody jak psát html tagy

JavaScript: návody a průvodce

jQuery: návody a průvodce

Seriál JQuery

Přejít na následující kapitolu:Operace s DOM (s HTML) a příklady >

Témata

Seriály

Základy jQuery - JQuery

Jak přidat jQuery do webové stránky

Stažení jQuery

CDN

Instalátory

Přidání do webu

Výběr HTML elementů

DOM Manipulace

Seriál JQuery

Seznam všech článků seriálu: