Pomohl Vám můj web?
Podpořte psaní dalších článků!

jQuery-návod.cz - vše okolo jQuery - jQuery UI, pluginy a další




(11) Utility

Utility

Do této kategorie spadají funkce a vlastnosti, které jsou nějakým způsobem užitečné a nepatří do žádné konkrétní skupiny. První užitečná funkce je delay(), která zastaví provádění kódu na určitou dobu. Čas, o který se má průběh zpomalit, se předává jako parametr v milisekundách (1 sekunda = 1000 milisekund).

$("#nejaky_prvek")
  .css("color", "blue")
  .delay(2000)
  .css("color", "red");
  // vybraný prvek nabarví nejdříve na modro,
  // za 2 sekundy na červeno

Další je funkce na vyčištění fronty, která se skládá ze všech zatím nespuštěných jQuery funkcí. Jmenuje se clearQueue(). Opakem je funkce dequeue(), která naopak spustí další funkci ve frontě pro vybraný element. Frontu si také můžeme nechat vypsat, a to funkcí queue(). Jako parametr předáváme jméno fronty, standartně fx.

var fronta = queue("fx");
$("#sem_vypiseme").text(fronta + "<br>Je dlouhá "+fronta.length);

Následují funkce, kterou uvedu, je funkce each(), která slouží k zjišťování indexu (pořadí) prvku. Index se počítá od nuly!

// Očíslování položek seznamu
// HTML část
<ul>
     <li>Pes</li> 
     <li>Kočka</li> 
     <li>Kráva</li>
     <li>Slepice</li> 
</ul>

// jQuery část
$('li').each(function(index) {
    // index - pořadí aktuálně vybraného objektu
    $(this).text(index + ': ' + $(this).text());
    // vypíše do aktuálního řádku číslo
    // indexu, dvojtečku, mezeru a původní text
});        

Další je funkce extend(), která slouží ke kopírování vlastností jednoho objektu do druhého. Má několik parametrů, vše vysvětlím na ukázce. Objekty jsme už vytvářeli v kapitole o cookies, takže se s nimi nebudu blíže zabývat.

var objekt1 = {
     banany: 100,
     hrusky: 200,
     pomerance: {pocet:150,   kvalita: 1}
};

var objekt2 = {
     hrusky: 500,
     pomerance: {kvalita: 2}
};          

// tyto 2 objekty budu v této ukázce používat
// při každém voláním funkce extend() v 
// tomto stavu, nikoliv po změně funkcí

// nejjednoduší varianta:
// data z druhého objektu se překopírují do 
// prvního a nahradí původní vlastnosti

$.extend(objekt1, objekt2);

// výsledek bude vypadat takto:
// objekt1:
// {
// banany: 100,
// hrusky: 500,
// pomerance: (kvalita: 2)
// };
// objekt 2 se nezmění

// Objekt také můžeme měnit rekruzivně 
// (opakovaně zavoláme stejnou funkci),
// a to přidání parametru true

$.extend(true, objekt1, objekt2);

Následuje funkce globalEval(), která spustí kód, který předáme jako parametr. Využívá se třeba při načítání a náseldném spuštění extérních skriptů.

$.globalEval("var newVar = true;");
// Vytvoří novou proměnnou a nastaví
// její hodnotu na true (pravda).

Funkce isEmptyObject() zjistí, jestli má objekt nějaké vlastnosti. Když ano, vrátí true, jinak false.

var objekt =                              
{
banany: 100,
hrusky: 200,
pomerance: {pocet:150,   kvalita: 1}
};
var vysledek = $.isEmptyObject(objekt);
// v proměnné bude false, objekt obsahuje                
// banany, hrusky a pomerance

Další funkcí, kterou nevyužijete, pokud neumíte javascript, je funkce isFunction(), která zjistí, jestli se jedná o základní funkci javascriptu. Takže např. funkce alert()touto funkcí je, ale třeba samotná funkce isFunction() není. Další funkce, která patří do utilit, je isXMLDoc(), která zjistí, jestli je předávaný parametr platný XML dokument. Jestli ano, vrací true, jinak vrací false. JQuery také nabízí funkci která nedělá vůbec nic. Jmenuje se noop() a bližší popis asi nebude potřeba. Další utilitkou je funkce na tvorbu dat, data(). Má 3 paramtry, první je selektor, druhý klíč a poslední, nepovinný, nová data.

$("#neco").data("test", { first: 16, last: "pizza!" });    
$("#odstavec:first").text($("div").data("test").first);
$("#odstavec:last").text($("div").data("test").last);
$("#dalsi_text:last").text($("div").data("test").last);
// Výsledek kódu bude vypadat takhle:
// V #neco bude 16 a na konci bude pizza!
// v #odstavec bude na začátku 16 a
// na konci bude mít pizza!
// a v #dalsi_text bude na konci pizza!

Opakem této funkce je removeData(), která data odstraní. Používá se podobně jak funkce data(), ale má pouze jeden parametr, a to jméno již vytvořených dat.

$("#neco").data("text", "text, který se vypíše").
$("#neco").removeData("text");
// Smaže data vytvořená pomocí funkce data()

Další funkce slouží na práci s textovýmy řetězci. Jmenuje se trim() a z textu odstraní mezery, které jsou před a za jinými znaky.

var text = "      te xt...     ";
var text_bez_mezer = $.trim(text);
// původní proměnná text se nezmění
// a v text_bez_mezer bude "te xt..."

Následuje funkce param(), která upraví text do podoby URL adresy. Má jeden parametr, kde předáváme objekt, který chceme upravit.

var objekt = { width:1680, height:1050 };
var text = $.param(objekt);
$("#vysledek").text(text);
// vypíše: width=1680&&height=1050

Také nahrazuje znaky, které v adrese být nemohou, jako je třeba mezera a plus. Pokud využíváte jiné knihovny, které využívají stejný jmenný prostor ($) jako jQuery, mohou nastat problémy. JQuery má tuto možnost ošetřeno funkcí noConflict().

$.noConflict();
  $(document).ready(function($) {
    // tady bude jQuery kód
  });
  // tady bude kód používající
  // jinou knihovnu

Nebo pomocí této funkce můžeme změnit znak, který vyjadřuje jmenný prostor. V základním nastavení, jak už víte, je to znak $ nebo jQuery.

var j = $.noConflict();
// místo $ budeme používat znak "j"
j("#text").hide();

Zobrazit diskuzi