Domů › jQuery

jQuery

jQuery je JavaScriptová knihovna, která zjednodušuje použití JavaScriptu v HTML dokumentu.

jQuery umožňuje vytvářet interaktivní webové aplikace. Funkčnost jQuery je možné dále rozšiřovat pomocí tzv. "zásuvných modulů", které nabízejí již hotová řešení nejčastějích požadavků.

Typickým příkladem použítí mohou být např. reakce na události, okamžitá validace formuláře již při jeho vyplňování, nejrůznější animace, bez nutnosti používat technologii Flash, jednoduchá spolupráce s AJAX technologií atd.

Co budeme potřebovat:

  • jQuery zkoušečka – jquery.jslab.net/zkousecka/#ab6
  • editor zdrojového kódu: PhpStorm, PSPad, Notapad++ atd.
  • webový server: XAMPP, MAMP atd.
  • nástroje pro ladění kódu: Firebug+FireQuery (Firefox), Developer Toolbar (Google, Firefox, IE) atd.
    • konzole
    • kontrolní body (krokování)
    • sledování hodnot proměnných

jQuery knihovnu je možné k dokumentu připojit v hlavičce dokumentu interně (jQuery knihovna je součástí webové stránky) nebo externě např. pomocí odkazů na jQuery CDN, Google CDN nebo Miscrosoft CDN.

Zajištění dostupnosti jQuery knihovny (1. z CDN zdroje, 2. z lokálního umístění):

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
  if (!window.jQuery) {
    var jq = document.createElement('script'); jq.type = 'text/javascript';
    jq.src = '/path-to-your/jquery.min.js';
    document.getElementsByTagName('head')[0].appendChild(jq);
  }
</script>

Funkce "Dokument je připraven ke zpracování jQuery" + změna obsahu H1 (příkaz se provede ihned po načtení stromové struktury stránky DOM (Document Object Model) tj. ještě před načtením externího obsahu např. obrázků):

$(document).ready(function() {
  $("h1").text("Nový text tagu H1.");
});
  • výraz $() je zkrácený zápis funkce jQuery()
  • element h1 je prvek, na který se jQuery apikuje (selector)
  • metoda .text vloží požadovaný osah
  • "funkci $() předáme element h1 na který aplikujeme metodu .text"

Vkládání textu před a za:

...
<body>
  <h1>jQuery</h1>
</body>
...
$(document).ready(function() {
  $("h1").prepend("Knihovna ");
  $("h1").append(" je skvělá.");
});

Příklad automatického skrytí prvku:

$(document).ready(function(){
  $(".my-css-class").hide(1000);
});

.my-css-class – CSS selektor

.hide – jQuery metoda

Příklad výpisu proměnné do konzole webového prohlížeče (Developer Toolbar):

$(document).ready(function(){
  var text = "Text vypsaný v konzole.";
  console.log(text);
});

Detekce existence elementu:

if ($("#myID").length) {
  $("#myID").show();
}

Výhody použití Behaviors v Drupalu