Ismerje meg, hogyan hozhat létre elemet a jQuery alkalmazásban

Egy új elem létrehozása az egyik legalapvetőbb feladat, amelyet a jQuery JavaScript-könyvtárral elvégezhet. A jQuery használatával a feladat sokkal egyszerűbb, mint a Document Object Model (DOM) megfelelő megközelítése. Minél többet használja a jQuery-t, annál rugalmasabbnak és kifejezőbbnek fogja találni.

A cél eléréséhez hozzá kell tudnia adni az elemet egy weboldalhoz. Ismerje meg, hogyan adhat hozzá új listaelemet vagy cserélhet le egy bekezdést új tartalommal a jQuery használatával.

Mi az a jQuery?

A jQuery könyvtár a következők gyűjteménye JavaScript kód két elsődleges céllal:

• Leegyszerűsíti a gyakori JavaScript műveleteket.
• Kezeli a JavaScript-problémákat a különböző böngészők között.

A második cél a hibákkal foglalkozik, de foglalkozik a böngészők közötti megvalósítási különbségekkel is. Mindkét cél kevésbé szükséges, mint korábban, mivel a böngészők idővel fejlődnek. De a jQuery továbbra is értékes eszköz lehet.

Mi az az elem?

Egy elemet néha címkének is neveznek. Bár a kettőt gyakran felcserélhetően használják, van egy finom különbség. A címke a literálra utal vagy

 be kell helyeznie egy HTML-fájlba a szöveges tartalom megjelöléséhez. Egy elem a színfalak mögötti objektum, amely a megjelölt szöveget képviseli. Gondoljon egy elemre a DOM megfelelője a HTML címkéknek.

Új elem létrehozása a jQuery segítségével

A legtöbb jQuery művelethez hasonlóan egy elem létrehozása a dollár függvénnyel kezdődik, $(). Ez egy parancsikon a maghoz jQuery() funkció. Ennek a funkciónak három különböző célja van:

• Megfelel az elemeknek, általában olyanoknak, amelyek már léteznek a dokumentumban
• Új elemeket hoz létre
• Visszahívási funkciót futtat, amikor a DOM készen áll

Amikor első paraméterként HTML-t tartalmazó karakterláncot ad át, ez a függvény egy új elemet hoz létre:

$("")

Ez egy speciális jQuery objektumot ad vissza, amely elemek gyűjteményét tartalmazza. Ebben az esetben egyetlen objektum képvisel egy „egy” elemet, amelyet most hoztunk létre.

A karakterláncnak HTML-ként kell kinéznie, hogy megkülönböztesse ezt a műveletet a megfelelő elemektől. A gyakorlatban ez azt jelenti, hogy a karakterláncnak a-val kell kezdődnie <. Ezzel a módszerrel nem lehet egyszerű szöveget hozzáadni a dokumentumhoz.

Fontos megérteni, hogy ez nem adja hozzá az elemet a dokumentumhoz, csak egy új elemet hoz létre, amely készen áll a hozzáadásra. Az elem „csatolatlan”, memóriát foglal, de valójában még nem része az utolsó oldalnak.

Összetettebb HTML hozzáadása

A dollárfüggvény valójában több elemet is létrehozhat. Valójában bármilyen kívánt HTML-elemfát fel tud építeni:

$("

egy
kettő
három
")

Ezt a formátumot használhatja attribútumokkal rendelkező elem létrehozására is:

$('')

Attribútumok beállítása új elemen

Létrehozhat egy új jQuery-elemet, és beállíthatja annak attribútumait anélkül, hogy a teljes HTML-karakterláncot magának kellene elkészítenie. Ez akkor hasznos, ha dinamikusan állít elő attribútumértékeket. Például:

fotó = new Date().getHours() > 12? "afternoon.jpg": "reggel.jpg";
$("", { src: fotó });

Hogyan adjunk hozzá egy elemet

Miután létrehozott egy új elemet, többféleképpen is hozzáadhatja a dokumentumhoz. A jQuery dokumentációja ezeket a módszereket a „manipuláció” kategória.

Hozzáadás egy létező elem gyermekeként

$("test").append($("
Helló Világ
"));
$(document.body).append($el);

Ezzel a módszerrel például új listaelemet adhat a lista végére.

Adja hozzá egy létező elem testvéreként

$("p.last").after("
Új bekezdés
")
$("ul li: első").before("
új elem
")

Ez akkor jó választás, ha például egy új bekezdést szeretne hozzáadni a másik két bekezdés közepéhez.

Cseréljen ki egy meglévő elemet

Egy meglévő elemet egy újonnan létrehozott elemre cserélhet a segítségével cserélje() módszer:

$('#régi').replaceWith("
Új bekezdés
");

Tekerje körbe egy meglévő elemet

Ez meglehetősen ritka felhasználási eset, de érdemes egy meglévő elemet egy újba zárni. Például lehet, hogy a kód elemet, amelyet be szeretne csomagolni a elő:

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

Az Ön által létrehozott elem elérése

Az $() függvény egy jQuery objektumot ad vissza. Ez hasznos a nyomon követési műveleteknél:

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

Megjegyzendő, hogy a jQuery programozók a jQuery-változókat gyakran egy vezető dollárjellel nevezik el. Ez egyszerűen egy elnevezési séma, és nem kapcsolódik közvetlenül a $() funkció.

Elemek létrehozása jQuery használatával

Bár a DOM-ot natív JavaScript-függvényekkel is lehet manipulálni, a jQuery sokkal könnyebbé teszi ezt. Még mindig nagyon hasznos, ha jól ismerjük a DOM-ot, de a jQuery sokkal kellemesebbé teszi a vele való munkát.

A webhelyek rejtett hőse: A DOM megértése

Webtervezést tanul, és többet szeretne tudni a dokumentumobjektum-modellről? Íme, amit a DOM-ról tudnia kell.

Olvassa el a következőt

A szerzőről