jQuery – Práce s DOM

Tímto článkem bych chtěl začít seriál, který bude zkoumat zákoutí a přednosti jQuery.
jQuery, pro ty co neví, je úžasný JavaScriptový framework. Oproti klasickému JavaScriptu vám neuvěřitelně usnadní život.
V tomto díle předvedu, jak jQuery pracuje s DOM (Document Object Model).

V první řadě je nutné jQuery stáhnout, ale pro testování stačí vložit do stránek tento kód:

Kód, na kterém budu jQuery zkoušet:

    
Text
    
Text
    
Text
    
Text

Výběr elementu

První ukážu výběr elementů podle jména tagu. Následující kód vyhledá všechny <li>, které jsou potomky všech <ul> a obarví je na červeno.

$("ul > li").css("color", "red");

Podle ID:

$("#aktivni").css("color", "red");

Podle třídy:

$(".polozka").css("color", "red");

Zároveň můžete všechny druhy výběru kombinovat.

$("ul#menu > li.polozka").css("color", "red");

Vytvoření elementu

Nyní přidám novou položku do menu, kterou opatřím třídou „polozka“. Kromě třídy lze použít i ostatní atributy elementu (jako třeba ID, name, …).

$("
Nový text
").attr({
    class: 'polozka'
}).appendTo("ul#menu");

Pokud potřebujete vložit element jako prvního potomka, tak místo appendTo() použijte prependTo().

$("
Nový text
").attr({
    class: 'polozka'
}).prependTo("ul#menu");

Dalšími možnostni, kam vložit nový element je buď za (after()) nebo před (before()) jiný element.

$("li#aktivni").after(
    $("
Nový text
").attr({
        class: 'polozka'
    })
);

$("li#aktivni").before(
    $("
Nový text
").attr({
        class: 'polozka'
    })
);

Odstranění elementu

Odstranění lze provést zcela jednoduše pomocí funkce remove()

$("li#aktivni").remove();