Lær, hvordan du opretter et element i jQuery

Lær, hvordan du opretter et element i jQuery

Oprettelse af et nyt element er en af ​​de mest grundlæggende opgaver, du kan udføre med jQuery JavaScript -biblioteket. Ved hjælp af jQuery er opgaven meget enklere end den tilsvarende tilgang med Document Object Model (DOM). Du finder det også mere fleksibelt og udtryksfuldt, jo mere du bruger jQuery.





For at tjene et formål skal du kunne føje dit element til en webside. Lær, hvordan du tilføjer et nyt listeelement eller erstatter et afsnit med nyt indhold ved hjælp af jQuery.



Hvad er jQuery?

JQuery -biblioteket er en samling af JavaScript kode med to primære formål:





  • Det forenkler almindelige JavaScript -operationer.
  • Det håndterer krydskompatibilitet JavaScript-problemer mellem forskellige browsere.

Det andet mål henvender sig til fejl, men det adresserer også implementeringsforskelle mellem browsere. Begge mål er mindre nødvendige end de plejer at være, da browsere forbedres med tiden. Men jQuery kan stadig være et værdifuldt værktøj.

Hvad er et element?

Et element kaldes undertiden som et tag. Selvom de to ofte bruges i flæng, er der en subtil forskel. Et mærke refererer til det bogstavelige

eller



du inkluderer i en HTML -fil for at markere tekstindholdet. Et element er objektet bag kulisserne, der repræsenterer den markerede tekst. Tænk på et element som DOM -modstykke til HTML -tags.

Sådan oprettes et nyt element ved hjælp af jQuery

Som med de fleste jQuery -operationer starter oprettelse af et element med dollarfunktionen, $ () . Dette er en genvej til kernen jQuery () fungere. Denne funktion har tre forskellige formål: den:



  • Matcher elementer, normalt dem der allerede findes i dokumentet
  • Opretter nye elementer
  • Kører en tilbagekaldsfunktion, når DOM er klar

Når du sender en streng, der indeholder HTML som den første parameter, opretter denne funktion et nyt element:

$(' ')

Dette returnerer et specielt jQuery -objekt, der indeholder en samling af elementer. I dette tilfælde er der et enkelt objekt, der repræsenterer et 'a' element, som vi lige har oprettet.



hvordan man skærmoptager med lyd

Strengen skal ligne HTML for at skelne denne handling fra matchende elementer. I praksis betyder det, at strengen skal begynde med et < . Du kan ikke tilføje almindelig tekst til dokumentet ved hjælp af denne metode.

Det er vigtigt at forstå, at dette ikke tilføjer elementet til dit dokument, det skaber kun et nyt element, der er klar til at tilføjes. Elementet er 'uforbundet' og optager hukommelse, men er faktisk ikke en del af den sidste side - endnu.

Tilføjelse af mere kompleks HTML

Dollarfunktionen kan faktisk skabe mere end et element. Faktisk kan det bygge ethvert træ af HTML -elementer, du ønsker:

$('
  • one
  • two
  • three
')

Du kan også bruge dette format til at oprette et element med attributter:

$(' my hometown')

Sådan indstilles attributter til et nyt element

Du kan oprette et nyt jQuery -element og angive dets attributter uden at skulle bygge den fulde HTML -streng selv. Dette er nyttigt, hvis du genererer attributværdier dynamisk. For eksempel:

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

Sådan tilføjes et element

Når du har oprettet et nyt element, kan du føje det til dokumentet på flere forskellige måder. JQuery -dokumentationen samler disse metoder sammen under Kategori 'manipulation' .

Tilføj som barnet til et eksisterende element

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

Hello, world

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

Du kan f.eks. Bruge denne metode til at tilføje et nyt listeelement i slutningen af ​​en liste.

Tilføj det som søskende til et eksisterende element

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

A new paragraph

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

    Dette er et godt valg, hvis du f.eks. Vil tilføje et nyt afsnit midt i to andre.

    Udskift et eksisterende element

    Du kan bytte et eksisterende element til et nyoprettet element ved hjælp af Erstat med() metode:

    $('#old').replaceWith('

    New paragraph

    ');

    Wrap omkring et eksisterende element

    Dette er en ganske sjælden brugstilfælde, men du vil måske vedlægge et eksisterende element i et nyt. For eksempel kan du have en kode element, som du vil pakke ind i et til :

    $('code#n1').wrap('
    ')
    Adgang til det element, du har oprettet
     
    Det $ () funktion returnerer et jQuery -objekt. Dette er nyttigt til opfølgende operationer:
    $el = $('p');  
    $('body').append($el);
    Bemærk, at jQuery -programmører ifølge konventionen ofte navngiver jQuery -variabler med et førende dollartegn. Dette er simpelthen et navngivningsskema og er ikke direkte relateret til $ () fungere.
     
    Oprettelse af elementer ved hjælp af jQuery
     
    Selvom du kan manipulere DOM ved hjælp af native JavaScript -funktioner, gør jQuery det meget lettere at gøre det. Det er stadig meget nyttigt at have en god forståelse af DOM, men jQuery gør arbejdet med det meget mere behageligt.
      Del    Del      Tweet      E -mail      Den skjulte helt på websteder: Forståelse af DOM  
    Lærer du webdesign og har du brug for at vide mere om dokumentobjektmodellen? Her er hvad du behøver at vide om DOM.
    Læs Næste       Relaterede emner  
       
    • Programmering
      •  
    • Web-udvikling
      •  
    • jQuery
      •  
      Om forfatteren   Bobby Jack(58 artikler udgivet)      
    Bobby er en teknologientusiast, der arbejdede som softwareudvikler i det meste af to årtier. Han brænder for spil, arbejder som Reviews Editor hos Switch Player Magazine og er nedsænket i alle aspekter af onlineudgivelse og webudvikling.
    Mere fra Bobby Jack
    Abonner på vores nyhedsbrev
     
    Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!
    Klik her for at abonnere