Co všechno lze upravit?

Pomocí jQuery lze upravit v podstatě všechno, co vás napadne. Lze měnit obsah, přidávat a odebírat třídy (class), upravovat atributy (např. barvu, velikost...) a třeba i hodnotu inputu a samotný HTML kód.

Úprava obsahu

Nejdříve uvedu příklad, jak pomocí jednoduché funkce text() získáme obsah divu a nahradíme ho jiným textem.

// HTML část                                                   
<div id="odstavec">
Tady je text, který se bude nahrazovat. Pro jistotu ho uložíme do promenné puvodniText, kdybychom ho chtěli vrátit
</div> 

// jQuery část
var puvodniText = $(#odstavec).text();  // do proměnné puvodniText jsme uložili text z odstavce
// při prvním použití proměnné se před ní píše var, později už ne
var novyText = "Toto je nový text, který vložíme do odstavce"; // do proměnné novyText jsme uložili text
$(#odstavec).text(novyText); // a teď jsme nahradili původní text novým textem

Tady je text, který se bude nahrazovat. Pro jistotu ho uložíme do promenné puvodniText, kdybychom ho chtěli vrátit

Ukázka myslím není potřeba, ale pokud jí chcete, napište mi! Další funkce najdete v přehledu.

• html() - získání HTML obsahu
• html(hodnota) - nastavení HTML obsahu
• append(obsah) - připojení HTML obsahu za každý vybraný prvek
• prepend(obsah) - připojení HTML obsahu před každý vybraný prvek
• appendTo(selektor) - připojí za každý vybraný element obsah prvku, který je v závorce
• prependTo(selektor) - připojí před každý vybraný element obsah prvku, který je v závorce
• after(obsah) - přidá text na konec vybraných prvku
• before(obsah) - přidá text před vybrané prvky
• wrap(HTML) - obalí vybrané prvky HTML obsahem
• wrap(element) - obalí všechny vybrané prvku určeným elementem
• unwrap(element) - odstraní rodiče prvku, samotný prvek a jeho vlastnosti zanechá
• replaceWith(obsah) - nahradí všechny vybrané prvku HTML nebo DOM obsahem
• replaceAll(selektor) - nahradí všechny prvky v závorce obsahem
• clone() - zkopíruje vybrané prvky, používá se třeba s prependTo

Třída - class

Na úpravu třídy poskytuje jQuery dokonce několik funkcí. Co všechno dovedou, uvidíte v následujícím přehledu.

• addClass(class) - přidá třídu
• removeClass(class) - odebere třídu
• hasClass(class) - zjistí, jestli vybraný prvek má určitou třídu
• toggleClass(class) -  pokud prvek určitou třída má, tak jí odebere a naopak
• toggleClass(class, switch) - když je switch lež(false), tak se třída odebere a naopak. Obvykle se využívá v kombinaci s událostmi.

Jak se s těmito funkcemi pracuje, uvidíte v následujícím kódu.

// HTML část
<div id="odstavec">
Text v odstavci             
<span>Text v spanu 1 </span>

<span>Text v spanu 2</span>

</div>

// CSS část
.cervena {
     color: cervena;
}
.italic {
     font-style: italic;
}
.tucne {
     font-weight: bold;                                                   
}
.podtrzena {
     font-decoration: underline;
}

//jQuery část
$("#odstavec").addClass("cervena"); // pridá odstavci trídu cervena, kterou ale musíme, stějne jako všechny ostatní třídy, nadefinovat pomocí CSS
$("#odstavec span:first").addClass("italic"); // přidá prvnímu spanu v odstavci třídu italic
var maTridu = $("span").hasClass("italic");   // do proměnné maTridu uloží informaci o tom, jestli nekterý prvek span má trídu italic
if(maTridu == true)       // jestli některý prvek span má třídu italic
// když proměnná maTridu je pravda, == porovnání dvou prvků, if - podmínka
{
    $("span").removeClass("italic").addClass("tluste"); // tak všem prvkům span odebere třidu italic a přidá jim třídu tluste     
}
if (maTridu == false) // ale když žádný prvek span neobsahuje třídu italic
{
    $("odstavec").addClass("podtrzena");
}

Kód je myslím dostatečně komentovaný, takže si asi dokážete představit, co se stane.

Atributy

Dále lze upravovat atributy. Atributy jsou v podstatě vlastnosti prvků, např. barva, velikost, zdroj obrázku a všechny ostatní CSS vlastnosti. Pro úpravu atributů jQuery nabízí opět několik funkcí, které jsou v tomto přehledu:

• attr(name) - získání hodnoty atributu vybraného prvku, ale pouze jednoho elementu
• attr(properties) - nastavení, popř. získání, hodnoty atributu (popř. i více atributu) všech vybraných prvku
• attr(key, value) - jednoduché nastavení atributu u všech vybraných prvků
• removeAttr(name) - smaže hodnotu atributu u všech vybraných prvků
• attr(key, fn) - první parametr je název a hodnota atributu a druhý je callback funkce

// HTML část
<div id="odstavec" lang="cs"></div>     

// jQuery část
var jazykTextu =  $("#odstavec").attr("lang");
$("#odstavec").text("Jazyk odstavce je " + jazykTextu + ".");
$("#odstavec").attr({lang:cs, name:jmeno});
jazykTextu =  $("#odstavec").attr("lang");  // všimnete si, že var se píše pouze pri prvním použití proměnné a 
// aby hodnota v promenné byla aktuální, musíme znova získat hodnotu

var jmenoTextu = $("#odstavec").attr("name"); 
$("#odstavec").after("Ted je jazyk " + jazykTextu + " a jmeno je " + jmenoTextu + "."); // přidá na konec textu
$("#odstavec").removeAttr("lang"); 
$("#odstavec").after("A ted jsme smazali atribut lang.");
$("#odstavec").attr({lang:cs}, callbackFunkce);  // po zmeně barvy na "cs" se zavolá callback funkce

function callbackFunkce() { // při definování fce se píše function, název funkce a parametry
      $("#odstavec").after("Tento text vypsala callback funkce");   // změna barvy na žlutou
}