Lær hvordan du oppretter et element i jQuery

Lær hvordan du oppretter et element i jQuery

Å lage et nytt element er en av de mest grunnleggende oppgavene du kan utføre med jQuery JavaScript -biblioteket. Ved å bruke jQuery er oppgaven mye enklere enn den tilsvarende tilnærmingen med Document Object Model (DOM). Du vil også synes det er mer fleksibelt og uttrykksfullt, jo mer du bruker jQuery.





For å tjene en hensikt må du kunne legge elementet ditt til en webside. Lær hvordan du legger til et nytt listeelement eller erstatter et avsnitt med nytt innhold ved hjelp av jQuery.



Hva er jQuery?

JQuery -biblioteket er en samling av JavaScript kode med to hovedmål:





  • Det forenkler vanlige JavaScript -operasjoner.
  • Den håndterer krysskompatibilitet med JavaScript-problemer mellom forskjellige nettlesere.

Det andre målet tar for seg feil, men det tar også opp implementeringsforskjeller mellom nettlesere. Begge målene er mindre nødvendige enn de pleide å være, ettersom nettlesere forbedres over tid. Men jQuery kan fortsatt være et verdifullt verktøy.

Hva er et element?

Et element blir noen ganger referert til som en tag. Selv om de to ofte brukes om hverandre, er det en subtil forskjell. En tag refererer til det bokstavelige

eller



du inkluderer i en HTML -fil for å merke tekstinnholdet. Et element er objektet bak kulissene som representerer den merkede teksten. Tenk på et element som DOM -motstykket til HTML -taggene.

Hvordan lage et nytt element ved hjelp av jQuery

Som med de fleste jQuery -operasjoner starter opprettelsen av et element med dollarfunksjonen, $ () . Dette er en snarvei til kjernen jQuery () funksjon. Denne funksjonen har tre forskjellige formål: den:



  • Matcher elementer, vanligvis de som allerede finnes i dokumentet
  • Skaper nye elementer
  • Kjører en tilbakeringingsfunksjon når DOM er klar

Når du sender en streng som inneholder HTML som den første parameteren, vil denne funksjonen opprette et nytt element:

$(' ')

Dette returnerer et spesielt jQuery -objekt som inneholder en samling elementer. I dette tilfellet er det et enkelt objekt som representerer et 'a' element som vi nettopp har opprettet.



hvordan finne imei på iphone

Strengen må se ut som HTML for å skille denne handlingen fra matchende elementer. I praksis betyr dette at strengen må begynne med a < . Du kan ikke legge til ren tekst i dokumentet med denne metoden.

Det er viktig å forstå at dette ikke legger til elementet i dokumentet ditt, det lager bare et nytt element som du kan legge til. Elementet er 'ufestet', tar opp minne, men er faktisk ikke en del av den siste siden - ennå.

Legger til mer kompleks HTML

Dollarfunksjonen kan faktisk lage mer enn ett element. Faktisk kan den bygge et hvilket som helst tre med HTML -elementer du vil ha:

$('
  • one
  • two
  • three
')

Du kan også bruke dette formatet til å lage et element med attributter:

$(' my hometown')

Slik setter du attributter på et nytt element

Du kan opprette et nytt jQuery -element og angi attributtene uten å måtte bygge hele HTML -strengen selv. Dette er nyttig hvis du genererer attributtverdier dynamisk. For eksempel:

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

Slik legger du til et element

Når du har opprettet et nytt element, kan du legge det til i dokumentet på flere forskjellige måter. JQuery -dokumentasjonen samler disse metodene under Kategorien 'manipulasjon' .

Legg til som barnet til et eksisterende element

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

Hello, world

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

Du kan for eksempel bruke denne metoden til å legge til et nytt listeelement på slutten av en liste.

Legg det til som et søsken til et eksisterende element

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

A new paragraph

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

    Dette er et godt valg hvis du for eksempel vil legge til et nytt avsnitt midt i to andre.

    Bytt ut et eksisterende element

    Du kan bytte et eksisterende element til et nyopprettet element ved å bruke Erstatt med() metode:

    $('#old').replaceWith('

    New paragraph

    ');

    Vikle rundt et eksisterende element

    Dette er en ganske sjelden brukstilfelle, men du vil kanskje legge ved et eksisterende element i et nytt. For eksempel kan du ha en kode elementet du vil pakke inn i til :

    $('code#n1').wrap('
    ')
    Få tilgang til elementet du har opprettet
     
    De $ () funksjon returnerer et jQuery -objekt. Dette er nyttig for oppfølgingsoperasjoner:
    $el = $('p');  
    $('body').append($el);
    Vær oppmerksom på at jQuery -programmerere etter konvensjon ofte navngir jQuery -variabler med et ledende dollartegn. Dette er ganske enkelt et navneopplegg og er ikke direkte relatert til $ () funksjon.
     
    Opprette elementer ved hjelp av jQuery
     
    Selv om du kan manipulere DOM ved hjelp av native JavaScript -funksjoner, gjør jQuery det mye lettere å gjøre det. Det er fortsatt veldig nyttig å ha en god forståelse av DOM, men jQuery gjør arbeidet med det mye mer behagelig.
      Dele    Dele      kvitring      E -post      Den skjulte helten på nettsteder: Forstå DOM  
    Lærer du webdesign og trenger å vite mer om dokumentobjektmodellen? Her er hva du trenger å vite om DOM.
    Les neste       Relaterte temaer  
       
    • Programmering
      •  
    • Webutvikling
      •  
    • jQuery
      •  
      Om forfatteren   Bobby Jack(58 artikler publisert)      
    Bobby er en teknologientusiast som jobbet som programvareutvikler i de fleste to tiårene. Han brenner for spill, jobber som Reviews Editor i Switch Player Magazine, og er fordypet i alle aspekter av online publisering og webutvikling.
    Mer fra Bobby Jack
    Abonner på vårt nyhetsbrev
     
    Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!
    Klikk her for å abonnere