Zistite, ako vytvoriť prvok v jQuery

Vytvorenie nového prvku je jednou z najzákladnejších úloh, ktoré môžete vykonať pomocou knižnice JavaScript jQuery. Pomocou jQuery je úloha oveľa jednoduchšia ako ekvivalentný prístup s modelom objektu dokumentu (DOM). Čím viac budete jQuery používať, zistíte to tiež flexibilnejšie a výraznejšie.

Aby ste splnili svoj účel, musíte mať možnosť pridať svoj prvok na webovú stránku. Zistite, ako pridať novú položku zoznamu alebo nahradiť odsek novým obsahom pomocou jQuery.

Čo je jQuery?

Knižnica jQuery je zbierka JavaScript kód s dvoma hlavnými cieľmi:

• Zjednodušuje bežné operácie JavaScriptu.
• Zaoberá sa krížovou kompatibilitou JavaScriptu medzi rôznymi prehliadačmi.

Druhý cieľ sa zaoberá chybami, ale rieši aj rozdiely v implementácii medzi prehliadačmi. Oba ciele sú menej potrebné ako kedysi, pretože prehliadače sa postupom času zlepšujú. Ale jQuery môže byť stále cenným nástrojom.

Čo je prvok?

Prvok sa niekedy označuje ako značka. Hoci sa tieto dva často používajú zameniteľne, existuje jemný rozdiel. Značka odkazuje na doslovný alebo

 zahrniete do súboru HTML na označenie textového obsahu. Prvok je zákulisný objekt, ktorý predstavuje označený text. Predstavte si prvok ako DOM náprotivok HTML tagov.

Ako vytvoriť nový prvok pomocou jQuery

Ako väčšina operácií jQuery, vytváranie prvku začína funkciou dolára, $(). Toto je skratka k jadru jQuery() funkciu. Táto funkcia má tri odlišné účely:

• Zodpovedá prvkom, zvyčajne tým, ktoré už v dokumente existujú
• Vytvára nové prvky
• Keď je DOM pripravený, spustí funkciu spätného volania

Keď zadáte reťazec obsahujúci HTML ako prvý parameter, táto funkcia vytvorí nový prvok:

$("")

Toto vráti špeciálny objekt jQuery, ktorý obsahuje kolekciu prvkov. V tomto prípade existuje jeden objekt predstavujúci prvok „a“, ktorý sme práve vytvorili.

Reťazec musí vyzerať ako HTML, aby sa táto akcia odlíšila od zodpovedajúcich prvkov. V praxi to znamená, že reťazec musí začínať a <. Pomocou tejto metódy nemôžete do dokumentu pridať obyčajný text.

Je dôležité pochopiť, že to nepridá prvok do vášho dokumentu, ale iba vytvorí nový prvok pripravený na pridanie. Prvok je „nepripojený“, zaberá pamäť, ale v skutočnosti nie je súčasťou poslednej stránky – zatiaľ.

Pridanie zložitejšieho HTML

Funkcia dolára môže v skutočnosti vytvoriť viac ako jeden prvok. V skutočnosti dokáže vytvoriť ľubovoľný strom prvkov HTML, ktorý chcete:

$("

jeden
dva
tri
")

Tento formát môžete použiť aj na vytvorenie prvku s atribútmi:

$('')

Ako nastaviť atribúty pre nový prvok

Môžete vytvoriť nový prvok jQuery a nastaviť jeho atribúty bez toho, aby ste museli sami zostavovať celý reťazec HTML. Je to užitočné, ak hodnoty atribútov generujete dynamicky. Napríklad:

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

Ako pridať prvok

Po vytvorení nového prvku ho môžete pridať do dokumentu niekoľkými rôznymi spôsobmi. Dokumentácia jQuery zhromažďuje tieto metódy spolu pod kategórii „manipulácia“..

Pridať ako dieťa existujúceho prvku

$("body").append($("
Ahoj svet
"));
$(document.body).append($el);

Túto metódu môžete použiť napríklad na pridanie novej položky zoznamu na koniec zoznamu.

Pridajte ho ako súrodenca existujúceho prvku

$("p.last").after("
Nový odsek
")
$("ul li: first").before("
Nová vec
")

Je to dobrá voľba, ak napríklad chcete pridať nový odsek do stredu dvoch ďalších.

Vymeňte existujúci prvok

Existujúci prvok môžete vymeniť za novovytvorený pomocou nahradiť s() metóda:

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

Obtočte existujúci prvok

Toto je pomerne zriedkavý prípad použitia, ale možno budete chcieť vložiť existujúci prvok do nového. Môžete mať napríklad a kód prvok, ktorý chcete zabaliť do a pre:

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

Prístup k prvku, ktorý ste vytvorili

The $() funkcia vracia objekt jQuery. Je to užitočné pre následné operácie:

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

Všimnite si, že podľa konvencie programátori jQuery často pomenúvajú premenné jQuery s počiatočným znakom dolára. Toto je jednoducho schéma pomenovania a nesúvisí priamo s $() funkciu.

Vytváranie prvkov pomocou jQuery

Hoci môžete s DOM manipulovať pomocou natívnych funkcií JavaScriptu, jQuery to značne uľahčuje. Stále je veľmi užitočné dobre porozumieť DOM, ale jQuery robí prácu s ním oveľa príjemnejšou.

Skrytý hrdina webových stránok: Pochopenie DOM

Učíte sa webový dizajn a potrebujete vedieť viac o objektovom modeli dokumentu? Tu je to, čo potrebujete vedieť o DOM.

Prečítajte si ďalej

O autorovi