Saznajte kako stvoriti element u jQueryju

Saznajte kako stvoriti element u jQueryju

Stvaranje novog elementa jedan je od najosnovnijih zadataka koje možete postići s jQuery JavaScript knjižnicom. Korištenjem jQueryja zadatak je mnogo jednostavniji od ekvivalentnog pristupa s Objektnim modelom dokumenta (DOM). Također ćete ga smatrati fleksibilnijim i izražajnijim, što više koristite jQuery.





Da biste poslužili svrsi, morate moći dodati svoj element na web stranicu. Saznajte kako dodati novu stavku popisa ili zamijeniti odlomak novim sadržajem pomoću jQueryja.



Što je jQuery?

Knjižnica jQuery zbirka je JavaScript kod s dva primarna cilja:





  • Pojednostavljuje uobičajene JavaScript operacije.
  • On rješava probleme JavaScript s unakrsnom kompatibilnošću između različitih preglednika.

Drugi cilj služi greškama, ali također rješava razlike u implementaciji među preglednicima. Oba cilja su manje potrebna nego što su bila, jer se preglednici s vremenom poboljšavaju. Ali jQuery i dalje može biti vrijedan alat.

Što je element?

Element se ponekad naziva oznakom. Iako se to dvoje često koristi naizmjenično, postoji suptilna razlika. Oznaka se odnosi na doslovno

ili



uključite u HTML datoteku za označavanje tekstualnog sadržaja. Element je objekt iza kulisa koji predstavlja označeni tekst. Zamislite element kao DOM pandan HTML oznakama.

Kako stvoriti novi element pomoću jQueryja

Kao i većina jQuery operacija, stvaranje elementa počinje funkcijom dollar, $ () . Ovo je prečica do srži jQuery () funkcija. Ova funkcija ima tri različite svrhe:



  • Podudara se s elementima, obično onima koji već postoje u dokumentu
  • Stvara nove elemente
  • Pokreće funkciju povratnog poziva kada je DOM spreman

Kada proslijedite niz koji sadrži HTML kao prvi parametar, ova funkcija će stvoriti novi element:

$(' ')

Ovo vraća poseban objekt jQuery koji sadrži zbirku elemenata. U ovom slučaju postoji jedan objekt koji predstavlja element 'a' koji smo upravo stvorili.



kako potpuno izbrisati tvrdi disk

Niz mora izgledati poput HTML -a kako bi se ova radnja razlikovala od podudarnih elemenata. U praksi to znači da niz mora početi s a < . Ovom metodom ne možete dodati običan tekst u dokument.

Važno je shvatiti da ovo ne dodaje element u vaš dokument, već samo stvara novi element spreman za dodavanje. Element je 'neoznačen', zauzima memoriju, ali zapravo još nije dio posljednje stranice.

Dodavanje složenijeg HTML -a

Funkcija dolara zapravo može stvoriti više od jednog elementa. Zapravo, može izgraditi bilo koje stablo HTML elemenata koje želite:

$('
  • one
  • two
  • three
')

Ovaj format možete koristiti i za izradu elementa s atributima:

$(' my hometown')

Kako postaviti atribute na novom elementu

Možete stvoriti novi element jQuery i postaviti njegove atribute bez da sami morate izgraditi cijeli niz HTML. Ovo je korisno ako dinamički generirate vrijednosti atributa. Na primjer:

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

Kako dodati element

Nakon što stvorite novi element, možete ga dodati u dokument na nekoliko različitih načina. Dokumentacija jQuery okuplja ove metode zajedno pod 'Manipulacijska' kategorija .

Dodaj kao dijete postojećeg elementa

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

Hello, world

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

Ovu metodu možete koristiti, na primjer, za dodavanje nove stavke popisa na kraj popisa.

Dodajte ga kao brata ili sestru postojećeg elementa

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

A new paragraph

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

    Ovo je dobar izbor ako, na primjer, želite dodati novi odlomak usred dva druga.

    Zamijenite postojeći element

    Možete zamijeniti postojeći element za novostvoreni pomoću zamijeniti s() metoda:

    $('#old').replaceWith('

    New paragraph

    ');

    Omotajte postojeći element

    Ovo je prilično rijedak slučaj uporabe, ali možda biste željeli staviti postojeći element u novi. Na primjer, možda imate kodirati element koji želite umotati u za :

    $('code#n1').wrap('
    ')
    Pristup elementu koji ste stvorili
     
    The $ () funkcija vraća objekt jQuery. Ovo je korisno za naknadne operacije:
    $el = $('p');  
    $('body').append($el);
    Imajte na umu da, prema dogovoru, programeri jQuery često imenuju jQuery varijable s vodećim predznakom dolara. Ovo je jednostavno shema imenovanja i nije izravno povezana sa $ () funkcija.
     
    Stvaranje elemenata pomoću jQueryja
     
    Iako DOM -om možete manipulirati pomoću izvornih JavaScript funkcija, jQuery to čini mnogo lakšim. I dalje je vrlo korisno dobro razumjeti DOM, ali jQuery čini rad s njim mnogo ugodnijim.
      Udio    Udio      Cvrkut      E -pošta      Skriveni junak web stranica: Razumijevanje DOM -a  
    Učite web dizajn i trebate znati više o Objektnom modelu dokumenta? Evo što trebate znati o DOM -u.
    Pročitajte Dalje       Povezane teme  
       
    • Programiranje
      •  
    • Web razvoj
      •  
    • jQuery
      •  
      O autoru   Bobby Jack(Objavljeno 58 članaka)      
    Bobby je entuzijast u tehnologiji koji je skoro dva desetljeća radio kao programer softvera. Oduševljen je igranjem igara, radi kao urednik recenzija u Switch Player Magazinu, a uronjen je u sve aspekte online izdavaštva i web razvoja.
    Više od Bobbyja Jacka
    Pretplatite se na naše obavijesti
     
    Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!
    Kliknite ovdje za pretplatu