Zjistěte, jak vytvořit prvek v jQuery

Zjistěte, jak vytvořit prvek v jQuery

Vytvoření nového prvku je jedním z nejzákladnějších úkolů, které můžete s knihovnou JavaScript jQuery provést. Pomocí jQuery je úkol mnohem jednodušší než ekvivalentní přístup s Document Object Model (DOM). Zjistíte také, že je flexibilnější a výraznější, čím více jQuery používáte.





Aby to splnilo svůj účel, budete muset umět 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 primárními cíli:





  • Zjednodušuje běžné operace JavaScriptu.
  • Řeší problémy s 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ž bývaly, 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 je někdy označován jako tag. Ačkoli se tyto dva často používají zaměnitelně, existuje drobný rozdíl. Značka odkazuje na doslovný

nebo



vložíte do souboru HTML k označení textového obsahu. Prvek je objekt ze zákulisí, který představuje označený text. Představte si prvek jako protějšek DOM pro značky HTML.

Jak vytvořit nový prvek pomocí jQuery

Jako většina operací jQuery, vytváření elementu začíná 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:

$(' ')

Tím se 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.



obnovit heslo místního správce Windows 10

Řetězec musí vypadat jako HTML, aby odlišil tuto akci od odpovídajících prvků. V praxi to znamená, že řetězec musí začínat a < . Pomocí této metody nelze do dokumentu přidat čistý 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 může vytvořit libovolný strom prvků HTML, které chcete:

$('
  • one
  • two
  • three
')

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

$(' my hometown')

Jak nastavit atributy na nový prvek

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

photo = new Date().getHours() > 12 ? 'afternoon.jpg' : 'morning.jpg';
$(' ', { src: photo });

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 společně pod Kategorie „manipulace“ .

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

$('body').append($('

Hello, world

'));
$(document.body).append($el);

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

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

$('p.last').after('

A new paragraph

')
$('ul li:first').before('
  • new item
    • ')

    Je to dobrá volba, pokud například chcete přidat nový odstavec uprostřed dvou dalších.

    Nahradit existující prvek

    Stávající prvek můžete vyměnit za nově vytvořený pomocí nahraditWith () metoda:

    $('#old').replaceWith('

    New paragraph

    ');

    Obtočte existující prvek

    Jedná se o velmi 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 souboru pro :

    $('code#n1').wrap('
    ')
    Přístup k prvku, který jste vytvořili
     
    The $ () funkce vrací objekt jQuery. To je užitečné pro navazující operace:
    $el = $('p');  
    $('body').append($el);
    Všimněte si, že podle konvence programátoři jQuery často pojmenovávají proměnné jQuery s předním znakem dolaru. Toto je jednoduše schéma pojmenování a nesouvisí přímo s $ () funkce.
     
    Vytváření prvků pomocí jQuery
     
    Ačkoli můžete s DOM manipulovat pomocí nativních funkcí JavaScriptu, jQuery to dělá mnohem jednodušší. Je stále velmi užitečné dobře porozumět DOM, ale jQuery práci s ním dělá mnohem příjemnější.
      Podíl    Podíl      tweet      E-mailem      The Hidden Hero of Websites: Understanding the DOM  
    Učíte se webdesignu a potřebujete vědět více o objektovém modelu dokumentu? Zde je to, co potřebujete vědět o DOM.
    Číst dále       Související témata  
       
    • Programování
      •  
    • Vývoj webu
      •  
    • jQuery
      •  
      O autorovi   Bobby Jack(58 článků zveřejněno)      
    Bobby je technologický nadšenec, který pracoval jako vývojář softwaru po téměř dvě desetiletí. Je zapálený pro hraní her, pracuje jako editor recenzí časopisu Switch Player Magazine a je ponořen do všech aspektů online publikování a webového vývoje.
    Více od Bobbyho Jacka
    Přihlaste se k odběru našeho zpravodaje
     
    Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!
    Kliknutím sem se přihlásíte k odběru