jQuery – Práce s DOM

Publikováno JavaScript

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

    Komentáře