jQuery – Práce s DOM

JavaScript

POZOR! Článek jsem napsal před více jak rokem, a tudíž už nemusí reflektovat můj nynější názor nebo může být zastaralý.

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:

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();

    Znáte někoho, komu by článek mohl pomoct? Zasdílejte mu ho :)

    Komentáře