Poznámky k jQuery

Právě jsem dočet skvělou knihu o jQuery: Jonathan Chaffer, Karl Swedberg: Learning jQuery 1.3. Recenze tu bude co nevidět, zatím jsem alespoň přepsal pár poznámek, které jsem si při čtení udělal. Kdo nezná jQuery, nechť si o této skvělé knihovně přečte tady a nebo taky tady.

Všchny uváděné ukázky si můžete rovnou vyzkoušet díky geniální jQuery zkoušečce. Nemusíte tak nic opisovat a ukládat.

Obsluha je velmi prostá: do jednoho políčka vložíte html, do dalšího kód JavaScriptu a pak to celé spustíte tlačítkem Spustit!. Pokud si budete chtít něco uložit, či poslat kamarádovi, stačí uložit nebo poslat adresu, která se neustále mění (a uchovává aktuální stav zkoušečky).

Selektory

Operátor not

$("#menu li:not(.selected)")

Ukázka

Vybere takové <li> potomky prvku s id=menu, které nemají přiřazenou třídu selected.

Operátor eq

$("#menu li:eq(2)").css('color','green');

Ukázka

Vybere třetí <li> položku seznamu menu (indexuje se od nuly).

Filtrování

$("a").filter(function(){
  return this.hostname && this.hostname != location.hostname;
}).css('color','yellow');

Ukázka

Vybere pouze externí odkazy – ukázka použití vlastní filtrovací funkce.

Průchod prvky

$("#menu li.selected").next().css('color','blue');

Ukázka

Najde značky s třídou selected a vybere vždy následující prvek stránky.

$("#menu li.selected").nextAll().andSelf().css('color','blue');

Ukázka

Najde značky s třídou selected a vybere všechny následující prvky ve stejné úrovni, včetně toho s třídou selected.

Přepínače

Přepínače se v jQuery dělají opravdu jednoduše. Nejjednodušší je asi volání funkce toggleClass(Clas­sName) která pouze přidává / odstraňuje třídu ClassName. Složitější a mocnější je toggle(f1, f2), která má za parametry „zapínací“ a „vypínací“ funkci – viz ukázka.

$(document).ready(function(){
  $("#switcher").toggle(function(){
    $("#menu").hide();
    $("#switcher").text("Zobraz menu");
  }, function(){
    $("#menu").show();
    $("#switcher").text("Schovej menu");
  });
});

Ukázka

Přímé zavolání obsluhy události

Občas by se hodilo zavolat kód, který je navázán na nějakou událost – právě k tomu slouží funkce trigger(), která tu událost na zvoleném objektu simuluje.

$("#switcher").trigger('click');

Ukázka

Nastavení více vlastností CSS naráz

Pokud potřebuji nastavit více css vlastností naráz, použije se trochu jiný zápis:

$("li.selected").css({"color":"white","background-color":"black"});

Ukázka

Řetězení funkcí

Řetězení je další skvělou vlastností – pomocí selektoru vyberete množinu prvků, na tu zavoláte několik funkcí, pak tyto prvky ještě přefiltrujete a na ty, co projdou filtrem zavoláte další funkci. Pokud se chcete vrátit k původní skupině vybraných prvků, zavoláte funkci end().

$(document).ready(function(){
  $("#menu li").css("border","1px solid black")
    .filter(':odd').css("background-color","silver")
    .end()
    .filter('.selected').css("background-color","red");
});

Ukázka

Dobrá konvence pro jQuery proměnné

Pokud si chcete uložit odkaz na jQuery objekt, pak je dobrým zvykem dát znak $ na začátek názvu proměnné obsahující odkaz na jQuery objekt. Snadno si tak při další manipulaci s touto proměnnou uvědomíte, že obsahuje jQuery objekt.

var $selected = $("#menu li.selected");
$selected.css("background-color","red");

Ukázka

Manipulace s DOM

V jQuery je vytvoření kusu kódu velmi snadné, prostě ho jen napíšete jako parametr funkce $(). To ale nestačí, musíte jej pak ještě někam do stránky umístit, jinak se nezobrazí. K tomu lze využít několikero funkcí.

$("<ul><li>Podpoložka</li></ul>").appendTo("#menu li.selected")

Ukázka

To je pro tentokráte vše, další zajímavé selektory a funkce najdete v referenci jQuery.

$("#menu li").eq(2).css('color','green');

$("#switcher").click();

$("a:external").css('color','yellow');

jQuery.expr[':'].external = function(el){   return el.hostname && el.hostname != location.hostname; };