Skripta OVI

JQuery – Úvod

JQuery

  • není samostatný jazyk, jen knihovna pro javascript
  • nejrozšířenější knihovna (od 2006, v roce 2021 77% stránek na netu mělo jQuery)
  • používá selektory CSS
  • open-source, lightweight (nezpomaluje prohlížeč)
  • dá se rozšířit dalšími pluginy JQueryUI
  • musí se v headu připojit buď přímo na soubor na webu http://jquery.com
  • nebo na stažený soubor ve stejném adresáři
  • soubor se připojí v headu jako link
  • Před prvky, které jQuery ovládá je znak $
  • K jednotlivým objektům přistupujeme přes #

Knihovnu jquery stáhneme z: http://jquery.com/download/

Komprimovaná verze je menší – proměnné jen jednoznakové, vše na jednom řádku.

Připojení knihovny do html:

<!DOCTYPE html>
<html>

<head>
    <script src="jquery-1.10.2.min.js"></script> //tady je připojená knihovna, uvnitř těchto tagů nesmí být žádný obsah
<script>

    /*sem se píše obsah - co se má vykonat*/
</script>

    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>Untitled 1</title>
</head>
<body>

</body>
</html>


JQuery řeší problém sekvence JS pomocí vložení všeho kódu do funkce

$(document).ready(function(){

-> sem píšeme počáteční nastavení, přidání posluchačů, funkce...

})

Funkce

Jquery poznáme tak, že je uvedeno znakem $

<script>
$(document).ready(function(){  //funkce, která se vykoná po spuštění všech elementů stránky, díky tomu je k nim možné přistupovat
/*sem budeme psát veškerý jquery kód*/
$("prvek").funkce("parametry")
});

</script>

Jquery příkazy jdou řetězit – týkají se stejného objektu:

$(document).ready(function(){
/*sem budeme psát veškerý jquery kód*/

$("prvek").funkce("parametry").funkce2("parametry2").funkce3("parametry3");

});

Pokud přistupujeme ke konkrétním objektům, uvádíme jejich ID # (hashem). Např:

$(document).ready(function(){

$("#odstavec").text("Hello!!!");

});

Příklady příkazů jQuery:

// Výpis textu
$("#odstavec").text("Hello!!!");

// Zmizení po 2 vteřinách
$("#odstavec").toggle(2000);

admin

,