Naučite kako stvoriti element u jQueryju

Izrada novog elementa jedan je od najosnovnijih zadataka koje možete postići s jQuery JavaScript bibliotekom. Koristeći jQuery, zadatak je puno jednostavniji od ekvivalentnog pristupa s modelom objekta dokumenta (DOM). Također ćete ga smatrati fleksibilnijim i izražajnijim, što više koristite jQuery.

Da biste služili svrsi, morat ćete moći dodati svoj element na web stranicu. Naučite 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 osnovna cilja:

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

Drugi cilj se odnosi na greške, ali također se bavi razlikama u implementaciji između preglednika. Oba su cilja manje potrebna nego što su bili, budući da se preglednici s vremenom poboljšavaju. Ali jQuery još uvijek može biti vrijedan alat.

Što je element?

Element se ponekad naziva i oznakom. Iako se to dvoje često koriste naizmjenično, postoji suptilna razlika. Oznaka se odnosi na literal ili

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

Kako stvoriti novi element koristeći jQuery

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

• Odgovara 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 jQuery objekt koji sadrži kolekciju elemenata. U ovom slučaju, postoji jedan objekt koji predstavlja element "a" koji smo upravo stvorili.

Niz mora izgledati kao HTML kako bi se ova radnja razlikovala od odgovarajućih elemenata. U praksi, to znači da niz mora početi s a <. Ne možete dodati običan tekst u dokument pomoću ove metode.

Važno je razumjeti da ovo ne dodaje element vašem dokumentu, već samo stvara novi element spreman za dodavanje. Element je 'nevezan', zauzima memoriju, ali zapravo još nije dio završne 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:

$("

jedan
dva
tri
")

Također možete koristiti ovaj format za stvaranje elementa s atributima:

$('')

Kako postaviti atribute na novi element

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

fotografija = novi datum().getHours() > 12? "poslijepodne.jpg": "jutro.jpg";
$("", { src: fotografija });

Kako dodati element

Nakon što izradite novi element, možete ga dodati u dokument na nekoliko različitih načina. jQuery dokumentacija okuplja ove metode zajedno pod kategoriju 'manipulacije'.

Dodaj kao dijete postojećeg elementa

$("tijelo").append($("
Pozdrav svijete
"));
$(document.body).append($el);

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

Dodajte ga kao brat ili sestru postojećeg elementa

$("str.zadnji").poslije("
Novi paragraf
")
$("ul li: prvi").before("
nova stvar
")

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("
Novi stavak
");

Omotajte postojeći element

Ovo je prilično rijedak slučaj upotrebe, ali možda biste željeli priložiti postojeći element u novi. Na primjer, možda imate a kodirati element koji želite umotati u a prije:

$('code#n1').wrap("
")

Pristup elementu koji ste stvorili

The $() funkcija vraća jQuery objekt. Ovo je korisno za naknadne operacije:

$el = $("p");
$('tijelo').append($el);

Imajte na umu da, prema konvenciji, jQuery programeri često imenuju jQuery varijable s vodećim predznakom dolara. Ovo je jednostavno shema imenovanja i nije izravno povezana s $() funkcija.

Stvaranje elemenata pomoću jQueryja

Iako možete manipulirati DOM-om koristeći izvorne JavaScript funkcije, jQuery to čini mnogo lakšim. Još uvijek je vrlo korisno dobro razumjeti DOM, ali jQuery čini rad s njim mnogo ugodnijim.

Skriveni heroj web stranica: razumijevanje DOM-a

Učite web dizajn i trebate znati više o modelu objekta dokumenta? Evo što trebate znati o DOM-u.

Pročitajte dalje

O autoru