Leer hoe u een element in jQuery maakt

Leer hoe u een element in jQuery maakt

Het maken van een nieuw element is een van de meest elementaire taken die u kunt uitvoeren met de jQuery JavaScript-bibliotheek. Met jQuery is de taak een stuk eenvoudiger dan de equivalente aanpak met het Document Object Model (DOM). Je zult het ook flexibeler en expressiever vinden, hoe meer je jQuery gebruikt.





Om een ​​doel te dienen, moet u uw element aan een webpagina kunnen toevoegen. Leer hoe u een nieuw lijstitem toevoegt of een alinea vervangt door nieuwe inhoud met jQuery.



Wat is jQuery?

De jQuery-bibliotheek is een verzameling van: JavaScript code met twee hoofddoelen:





  • Het vereenvoudigt algemene JavaScript-bewerkingen.
  • Het behandelt JavaScript-problemen met cross-compatibiliteit tussen verschillende browsers.

Het tweede doel is gericht op bugs, maar het pakt ook implementatieverschillen tussen browsers aan. Beide doelen zijn minder noodzakelijk dan vroeger, omdat browsers in de loop van de tijd verbeteren. Maar jQuery kan nog steeds een waardevol hulpmiddel zijn.

Wat is een element?

Een element wordt soms een tag genoemd. Hoewel de twee vaak door elkaar worden gebruikt, is er een subtiel verschil. Een tag verwijst naar de letterlijke

of



u opneemt in een HTML-bestand om de tekstinhoud te markeren. Een element is het object achter de schermen dat de gemarkeerde tekst vertegenwoordigt. Zie een element als de DOM-tegenhanger van de HTML-tags.

Een nieuw element maken met jQuery

Zoals de meeste jQuery-bewerkingen, begint het maken van een element met de dollarfunctie, $ () . Dit is een snelkoppeling naar de kern jQuery() functie. Deze functie heeft drie verschillende doelen, namelijk:



  • Komt overeen met elementen, meestal degene die al in het document bestaan
  • Creëert nieuwe elementen
  • Voert een callback-functie uit wanneer de DOM gereed is

Wanneer u een string met HTML doorgeeft als de eerste parameter, zal deze functie een nieuw element creëren:

$(' ')

Dit retourneert een speciaal jQuery-object dat een verzameling elementen bevat. In dit geval is er een enkel object dat een 'a'-element vertegenwoordigt dat we zojuist hebben gemaakt.



download elke video van elke site gratis online

De tekenreeks moet op HTML lijken om deze actie te onderscheiden van overeenkomende elementen. In de praktijk betekent dit dat de string moet beginnen met a < . U kunt met deze methode geen platte tekst aan het document toevoegen.

Het is belangrijk om te begrijpen dat dit het element niet aan uw document toevoegt, maar alleen een nieuw element maakt dat u kunt toevoegen. Het element is 'los', neemt geheugen in beslag, maar maakt nog geen deel uit van de laatste pagina.

Complexere HTML toevoegen

De dollarfunctie kan in feite meer dan één element creëren. In feite kan het elke gewenste structuur van HTML-elementen bouwen:

$('
  • one
  • two
  • three
')

U kunt dit formaat ook gebruiken om een ​​element met attributen te maken:

$(' my hometown')

Attributen instellen op een nieuw element

U kunt een nieuw jQuery-element maken en de kenmerken ervan instellen zonder dat u zelf de volledige HTML-string hoeft te bouwen. Dit is handig als u attribuutwaarden dynamisch genereert. Bijvoorbeeld:

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

Een element toevoegen

Nadat u een nieuw element hebt gemaakt, kunt u dit op verschillende manieren aan het document toevoegen. De jQuery-documentatie verzamelt deze methoden onder de categorie ‘manipulatie’ .

Toevoegen als het onderliggende element van een bestaand element

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

Hello, world

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

U kunt deze methode bijvoorbeeld gebruiken om een ​​nieuw lijstitem aan het einde van een lijst toe te voegen.

Voeg het toe als de broer of zus van een bestaand element

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

A new paragraph

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

    Dit is een goede keuze als u bijvoorbeeld tussen twee andere alinea's een nieuwe alinea wilt toevoegen.

    Een bestaand element vervangen

    U kunt een bestaand element omwisselen voor een nieuw gemaakt element met behulp van de vervangen door() methode:

    $('#old').replaceWith('

    New paragraph

    ');

    Wikkel rond een bestaand element

    Dit is een vrij zeldzame use-case, maar misschien wilt u een bestaand element insluiten in een nieuw element. U heeft bijvoorbeeld een code element dat u wilt omwikkelen in een voor :

    $('code#n1').wrap('
    ')
    Toegang tot het element dat u hebt gemaakt
     
    De $ () functie retourneert een jQuery-object. Dit is handig voor vervolgoperaties:
    $el = $('p');  
    $('body').append($el);
    Merk op dat jQuery-programmeurs volgens afspraak jQuery-variabelen vaak een leidend dollarteken geven. Dit is gewoon een naamgevingsschema en is niet direct gerelateerd aan de $ () functie.
     
    Elementen maken met jQuery
     
    Hoewel u de DOM kunt manipuleren met behulp van native JavaScript-functies, maakt jQuery het veel gemakkelijker om dit te doen. Het is nog steeds erg handig om de DOM goed te begrijpen, maar jQuery maakt het werken ermee een stuk prettiger.
      Deel    Deel      Tweeten      E-mail      De verborgen held van websites: de DOM begrijpen  
    Webdesign leren en meer weten over het Document Object Model? Dit is wat u moet weten over de DOM.
    Lees volgende       Gerelateerde onderwerpen  
       
    • Programmeren
      •  
    • Webontwikkeling
      •  
    • jQuery
      •  
      Over de auteur   Bobby Jack(58 artikelen gepubliceerd)      
    Bobby is een technologie-enthousiasteling die bijna twee decennia als softwareontwikkelaar heeft gewerkt. Hij is gepassioneerd door gaming, werkt als recensie-editor bij Switch Player Magazine en is ondergedompeld in alle aspecten van online publiceren en webontwikkeling.
    Meer van Bobby Jack
    Abonneer op onze nieuwsbrief
     
    Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!
    Klik hier om je te abonneren