Lär dig hur du skapar ett element i jQuery

Lär dig hur du skapar ett element i jQuery

Att skapa ett nytt element är en av de mest grundläggande uppgifterna du kan utföra med jQuery JavaScript -biblioteket. Med jQuery är uppgiften mycket enklare än motsvarande tillvägagångssätt med Document Object Model (DOM). Du kommer också att tycka att det är mer flexibelt och uttrycksfullt, ju mer du använder jQuery.





För att tjäna ett syfte måste du kunna lägga till ditt element på en webbsida. Lär dig hur du lägger till ett nytt listobjekt eller ersätter ett stycke med nytt innehåll med jQuery.



Vad är jQuery?

JQuery -biblioteket är en samling av JavaScript kod med två huvudsyften:





  • Det förenklar vanliga JavaScript -operationer.
  • Den hanterar korskompatibilitet med JavaScript-problem mellan olika webbläsare.

Det andra målet vänder sig till buggar, men det tar också upp implementeringsskillnader mellan webbläsare. Båda målen är mindre nödvändiga än de var, eftersom webbläsare förbättras med tiden. Men jQuery kan fortfarande vara ett värdefullt verktyg.

Vad är ett element?

Ett element kallas ibland som en tagg. Även om de två ofta används omväxlande, finns det en subtil skillnad. En tagg refererar till det bokstavliga

eller



du inkluderar i en HTML -fil för att markera textinnehållet. Ett element är objektet bakom kulisserna som representerar den markerade texten. Tänk på ett element som DOM -motsvarigheten till HTML -taggarna.

Hur man skapar ett nytt element med jQuery

Liksom de flesta jQuery -operationer börjar skapandet av ett element med dollarfunktionen, $ () . Detta är en genväg till kärnan jQuery () fungera. Denna funktion har tre olika syften, den:



  • Matchar element, vanligtvis sådana som redan finns i dokumentet
  • Skapar nya element
  • Kör en återuppringningsfunktion när DOM är klar

När du skickar en sträng som innehåller HTML som den första parametern skapar den här funktionen ett nytt element:

$(' ')

Detta returnerar ett speciellt jQuery -objekt som innehåller en samling element. I det här fallet finns det ett enda objekt som representerar ett 'a' -element som vi just skapat.



varför är min mobildata så långsam

Strängen måste se ut som HTML för att skilja denna åtgärd från matchande element. I praktiken betyder detta att strängen måste börja med a < . Du kan inte lägga till vanlig text i dokumentet med den här metoden.

Det är viktigt att förstå att detta inte lägger till elementet i ditt dokument, det skapar bara ett nytt element redo för dig att lägga till. Elementet är 'okopplat', tar upp minne men är faktiskt inte en del av den sista sidan - ännu.

Lägger till mer komplex HTML

Dollarfunktionen kan faktiskt skapa mer än ett element. Faktum är att den kan bygga alla träd av HTML -element du vill ha:

$('
  • one
  • two
  • three
')

Du kan också använda det här formatet för att skapa ett element med attribut:

$(' my hometown')

Så här ställer du in attribut på ett nytt element

Du kan skapa ett nytt jQuery -element och ange dess attribut utan att behöva bygga hela HTML -strängen själv. Detta är användbart om du genererar attributvärden dynamiskt. Till exempel:

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

Hur man lägger till ett element

När du har skapat ett nytt element kan du lägga till det i dokumentet på flera olika sätt. JQuery -dokumentationen samlar ihop dessa metoder under Kategori 'manipulation' .

Lägg till som barnet till ett befintligt element

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

Hello, world

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

Du kan till exempel använda den här metoden för att lägga till ett nytt listobjekt i slutet av en lista.

Lägg till det som syskon till ett befintligt element

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

A new paragraph

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

    Detta är ett bra val om du till exempel vill lägga till ett nytt stycke i mitten av två andra.

    Byt ut ett befintligt element

    Du kan byta ett befintligt element mot ett nyskapat element med ersätta med() metod:

    $('#old').replaceWith('

    New paragraph

    ');

    Linda runt ett befintligt element

    Detta är ett ganska sällsynt användningsfall, men du kanske vill bifoga ett befintligt element i ett nytt. Till exempel kan du ha en koda element som du vill slå in i ett för :

    $('code#n1').wrap('
    ')
    Få tillgång till elementet du har skapat
     
    De $ () funktion returnerar ett jQuery -objekt. Detta är användbart för uppföljningsoperationer:
    $el = $('p');  
    $('body').append($el);
    Observera att jQuery -programmerare enligt konventionen ofta namnger jQuery -variabler med ett ledande dollarstecken. Detta är helt enkelt ett namngivningsschema och är inte direkt relaterat till $ () fungera.
     
    Skapa element med jQuery
     
    Även om du kan manipulera DOM med inbyggda JavaScript -funktioner, gör jQuery det mycket lättare att göra det. Det är fortfarande mycket användbart att ha en god förståelse för DOM, men jQuery gör arbetet med det mycket trevligare.
      Dela med sig    Dela med sig      Tweet      E-post      Den dolda hjälten på webbplatser: Förstå DOM  
    Lär dig webbdesign och behöver veta mer om dokumentobjektmodellen? Här är vad du behöver veta om DOM.
    Läs Nästa       Relaterade ämnen  
       
    • Programmering
      •  
    • Webbutveckling
      •  
    • jQuery
      •  
      Om författaren   Bobby Jack(58 artiklar publicerade)      
    Bobby är en teknikentusiast som arbetade som mjukvaruutvecklare i de flesta av två decennier. Han brinner för spel, jobbar som recensioner -redaktör på Switch Player Magazine och är fördjupad i alla aspekter av online -publicering och webbutveckling.
    Mer från Bobby Jack
    Prenumerera på vårt nyhetsbrev
     
    Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!
    Klicka här för att prenumerera