Přečtěte si, jak vytvořit prvek v jQuery

Vytvoření nového prvku je jedním z nejzákladnějších úkolů, které můžete provést pomocí JavaScriptové knihovny jQuery. Pomocí jQuery je úkol mnohem jednodušší než ekvivalentní přístup s modelem objektu dokumentu (DOM). Čím více budete jQuery používat, zjistíte, že je také flexibilnější a výraznější.

Abyste splnili svůj účel, musíte mít možnost přidat svůj prvek na webovou stránku. Naučte se, jak přidat novou položku seznamu nebo nahradit odstavec novým obsahem pomocí jQuery.

Co je jQuery?

Knihovna jQuery je sbírka JavaScript kód se dvěma hlavními cíli:

• Zjednodušuje běžné operace JavaScriptu.
• Řeší problémy s křížovou kompatibilitou JavaScriptu mezi různými prohlížeči.

Druhý cíl řeší chyby, ale také řeší rozdíly v implementaci mezi prohlížeči. Oba cíle jsou méně nutné než dříve, protože prohlížeče se postupem času zlepšují. Ale jQuery může být stále cenným nástrojem.

Co je to prvek?

Prvek se někdy nazývá tag. Ačkoli se tyto dva často používají zaměnitelně, existuje jemný rozdíl. Značka odkazuje na literál nebo

 zahrnete do souboru HTML pro označení textového obsahu. Prvek je zákulisní objekt, který představuje označený text. Představte si prvek jako DOM protějšek HTML tagů.

Jak vytvořit nový prvek pomocí jQuery

Jako většina operací jQuery začíná vytvoření prvku funkcí dolaru, $(). Toto je zkratka k jádru jQuery() funkce. Tato funkce má tři různé účely:

• Odpovídá prvkům, obvykle těm, které již v dokumentu existují
• Vytváří nové prvky
• Spustí funkci zpětného volání, když je DOM připraven

Když předáte řetězec obsahující HTML jako první parametr, tato funkce vytvoří nový prvek:

$("")

To vrátí speciální objekt jQuery, který obsahuje kolekci prvků. V tomto případě existuje jeden objekt představující prvek „a“, který jsme právě vytvořili.

Řetězec musí vypadat jako HTML, aby se tato akce odlišila od odpovídajících prvků. V praxi to znamená, že řetězec musí začínat a <. Pomocí této metody nemůžete do dokumentu přidat prostý text.

Je důležité pochopit, že to nepřidá prvek do vašeho dokumentu, ale pouze vytvoří nový prvek připravený k přidání. Prvek je „nepřipojený“, zabírá paměť, ale ve skutečnosti není součástí poslední stránky – zatím.

Přidání složitějšího HTML

Funkce dolaru může ve skutečnosti vytvořit více než jeden prvek. Ve skutečnosti dokáže vytvořit libovolný strom prvků HTML, který chcete:

$("

jeden
dva
tři
")

Tento formát můžete také použít k vytvoření prvku s atributy:

$('')

Jak nastavit atributy u nového prvku

Můžete vytvořit nový prvek jQuery a nastavit jeho atributy, aniž byste museli sami vytvářet celý řetězec HTML. To je užitečné, pokud hodnoty atributů generujete dynamicky. Například:

photo = new Date().getHours() > 12? "odpoledne.jpg": "rano.jpg";
$("", { zdroj: fotografie });

Jak přidat prvek

Jakmile vytvoříte nový prvek, můžete jej přidat do dokumentu několika různými způsoby. Dokumentace jQuery shromažďuje tyto metody dohromady pod kategorie „manipulace“..

Přidat jako podřízený prvek existujícího prvku

$("body").append($("
Ahoj světe
"));
$(document.body).append($el);

Tuto metodu můžete použít například pro přidání nové položky seznamu na konec seznamu.

Přidejte jej jako sourozence existujícího prvku

$("p.last").after("
Nový odstavec
")
$("ul li: první").before("
nový předmět
")

To je dobrá volba, pokud například chcete přidat nový odstavec doprostřed dvou dalších.

Vyměňte stávající prvek

Existující prvek můžete zaměnit za nově vytvořený pomocí nahraditWith() metoda:

$('#old').replaceWith("
Nový odstavec
");

Obtočte existující prvek

Toto je poměrně vzácný případ použití, ale možná budete chtít uzavřít existující prvek do nového. Můžete mít například a kód prvek, který chcete zabalit do a před:

$('code#n1').wrap("
")

Přístup k prvku, který jste vytvořili

The $() funkce vrací objekt jQuery. To je užitečné pro následné operace:

$el = $("p");
$('body').append($el);

Všimněte si, že podle konvence programátoři jQuery často pojmenovávají proměnné jQuery s počátečním znakem dolaru. Toto je pouze schéma pojmenování a přímo nesouvisí s $() funkce.

Vytváření prvků pomocí jQuery

Ačkoli můžete s DOM manipulovat pomocí nativních funkcí JavaScriptu, jQuery to značně usnadňuje. Stále je velmi užitečné dobře rozumět DOM, ale jQuery dělá práci s ním mnohem příjemnější.

Skrytý hrdina webových stránek: Porozumění DOM

Učíte se webdesign a potřebujete vědět více o Document Object Model? Zde je to, co potřebujete vědět o DOM.

Přečtěte si další

O autorovi