Ismerje meg, hogyan hozhat létre elemet a jQuery -ben

Ismerje meg, hogyan hozhat létre elemet a jQuery -ben

Az új elem létrehozása az egyik legalapvetőbb feladat, amelyet a jQuery JavaScript könyvtár segítségével el tud végezni. A jQuery használatával a feladat sokkal egyszerűbb, mint a dokumentumobjektum -modell (DOM) ekvivalens megközelítése. Ezenkívül rugalmasabbnak és kifejezőbbnek fogja találni, minél többet használja a jQuery -t.





A cél eléréséhez képesnek kell lennie arra, hogy hozzáadja az elemet egy weboldalhoz. Ismerje meg, hogyan adhat hozzá új listaelemet vagy cserélhet egy bekezdést új tartalommal a jQuery használatával.



Mi a jQuery?

A jQuery könyvtár a JavaScript kód két elsődleges céllal:



  • Egyszerűsíti a gyakori JavaScript műveleteket.
  • A különböző böngészők közötti keresztkompatibilitási JavaScript-problémákat kezeli.

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

Mi az elem?

Az elemeket néha címkének is nevezik. Bár a kettőt gyakran felcserélve használják, van egy finom különbség. A címke a literálra utal

vagy



HTML -fájlba foglalja a szöveg tartalmának jelölésére. Az elem a kulisszák mögötti objektum, amely a megjelölt szöveget képviseli. Gondoljon egy elemre a HTML -címkék DOM megfelelőjeként.

Új elem létrehozása a jQuery használatával

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



  • Egyezik azokkal az elemekkel, amelyek általában megtalálhatók a dokumentumban
  • Új elemeket hoz létre
  • Visszahívási funkciót futtat, ha a DOM készen áll

Ha átad egy HTML -t tartalmazó karakterláncot első paraméterként, ez a függvény ú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 jeleníti meg az „a” elemet, amelyet most hoztunk létre.



legjobb alkalmazások az Android TV dobozhoz 2018

A karakterláncnak HTML -nek kell lennie, hogy megkülönböztesse ezt a műveletet az egyező elemektől. A gyakorlatban ez azt jelenti, hogy a karakterláncnak a -val kell kezdődnie < . Ezzel a módszerrel nem adhat hozzá egyszerű szöveget a dokumentumhoz.

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

Bonyolultabb HTML hozzáadása

A dollár függvény valójában több elemet is létrehozhat. Valójában a kívánt HTML elemek fáját felépítheti:

$('
  • one
  • two
  • three
')

Ezzel a formátummal attribútumokkal rendelkező elemeket is létrehozhat:

$(' my hometown')

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 saját maga kellene létrehoznia. Ez akkor hasznos, ha az attribútumértékeket dinamikusan generálja. Például:

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

Elem hozzáadása

Miután létrehozott egy új elemet, többféle módon is hozzáadhatja a dokumentumhoz. A jQuery dokumentáció ezeket a módszereket a 'Manipuláció' kategória .

Hozzáadás egy meglévő elem gyermekeként

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

Hello, world

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

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

Add hozzá, mint egy meglévő elem testvérét

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

A new paragraph

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

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

    Cserélje ki a meglévő elemet

    A meglévő elemet lecserélheti újonnan létrehozott elemre a cserélje() módszer:

    $('#old').replaceWith('

    New paragraph

    ');

    Tekerje körbe a meglévő elemet

    Ez meglehetősen ritka használati eset, de érdemes meglévő elemet egy újba zárni. Például rendelkezhet a kód elemet, amelyet becsomagolni szeretne a számára :

    $('code#n1').wrap('
    ')
    Hozzáférés az Ön által létrehozott elemhez
     
    Az $ () függvény egy jQuery objektumot ad vissza. Ez a következő műveleteknél hasznos:
    $el = $('p');  
    $('body').append($el);
    Ne feledje, hogy a jQuery programozói megegyezés szerint gyakran neveznek jQuery változókat vezető dollárjellel. Ez egyszerűen egy elnevezési séma, és nem közvetlenül kapcsolódik a $ () funkció.
     
    Elemek létrehozása a jQuery használatával
     
    Bár a DOM -ot manipulálhatja natív JavaScript függvényekkel, 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.
      Részvény    Részvény      Csipog      Email      A webhelyek rejtett hőse: A DOM megértése  
    Tanulja a webtervezést, és többet szeretne tudni a dokumentumobjektum -modellről? Itt van, amit a DOM -ról tudni kell.
    Olvassa tovább       Kapcsolódó témák  
       
    • Programozás
      •  
    • Webfejlesztés
      •  
    • jQuery
      •  
      A szerzőről   Bobby Jack(58 cikk megjelent)      
    Bobby technológiai rajongó, aki két évtized nagy részében szoftverfejlesztőként dolgozott. Szenvedélyesen szereti a játékot, a Switch Player Magazin Vélemények szerkesztőjeként dolgozik, és elmerül az online közzététel és webfejlesztés minden területén.
    Továbbiak Bobby Jack -től
    Iratkozzon fel hírlevelünkre
     
    Csatlakozz hírlevelünkhöz, ahol technikai tippeket, értékeléseket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!
    Feliratkozáshoz kattintson ide