Naučite se ustvariti element v jQueryju

Ustvarjanje novega elementa je ena najosnovnejših nalog, ki jih lahko opravite s knjižnico jQuery JavaScript. Z uporabo jQuery je naloga veliko enostavnejša od enakovrednega pristopa z modelom objektov dokumenta (DOM). Prav tako se vam bo zdel bolj prilagodljiv in izrazen, bolj ko boste uporabljali jQuery.

Če želite služiti namenu, boste morali imeti možnost dodati svoj element na spletno stran. Naučite se dodati nov element seznama ali zamenjati odstavek z novo vsebino z uporabo jQuery.

Kaj je jQuery?

Knjižnica jQuery je zbirka JavaScript koda z dvema primarnima ciljema:

• Poenostavlja običajne operacije JavaScript.
• Rešuje težave z navzkrižno združljivostjo JavaScript med različnimi brskalniki.

Drugi cilj skrbi za hrošče, obravnava pa tudi razlike pri implementaciji med brskalniki. Oba cilja sta manj potrebna kot nekoč, saj se brskalniki sčasoma izboljšujejo. Toda jQuery je lahko še vedno dragoceno orodje.

Kaj je element?

Element se včasih imenuje oznaka. Čeprav se oba pogosto uporabljata zamenljivo, obstaja subtilna razlika. Oznaka se nanaša na dobesedno oz

 vključite v datoteko HTML, da označite vsebino besedila. Element je predmet zakulisja, ki predstavlja označeno besedilo. Pomislite na element kot DOM nasprotje oznakam HTML.

Kako ustvariti nov element z uporabo jQuery

Kot večina operacij jQuery se ustvarjanje elementa začne s funkcijo dolar, $(). To je bližnjica do jedra jQuery() funkcijo. Ta funkcija ima tri različne namene, in sicer:

• Ujema elemente, običajno tiste, ki že obstajajo v dokumentu
• Ustvarja nove elemente
• Zažene funkcijo povratnega klica, ko je DOM pripravljen

Ko podate niz, ki vsebuje HTML kot prvi parameter, bo ta funkcija ustvarila nov element:

$("")

To vrne poseben objekt jQuery, ki vsebuje zbirko elementov. V tem primeru obstaja en sam objekt, ki predstavlja element "a", ki smo ga pravkar ustvarili.

Niz mora izgledati kot HTML, da se to dejanje razlikuje od ujemajočih se elementov. V praksi to pomeni, da se mora niz začeti z a <. S to metodo v dokument ne morete dodati golega besedila.

Pomembno je razumeti, da to ne doda elementa v vaš dokument, ampak ustvari samo nov element, ki je pripravljen, da ga dodate. Element je 'nevezan', zaseda pomnilnik, vendar dejansko še ni del končne strani.

Dodajanje bolj zapletenega HTML-ja

Funkcija dolar lahko dejansko ustvari več kot en element. Pravzaprav lahko zgradi katero koli drevo elementov HTML, ki ga želite:

$("

eno
dve
trije
")

To obliko lahko uporabite tudi za ustvarjanje elementa z atributi:

$('')

Kako nastaviti atribute na nov element

Ustvarite lahko nov element jQuery in nastavite njegove atribute, ne da bi morali sami sestaviti celoten niz HTML. To je uporabno, če dinamično generirate vrednosti atributov. Na primer:

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

Kako dodati element

Ko ustvarite nov element, ga lahko dodate v dokument na več različnih načinov. Dokumentacija jQuery združuje te metode skupaj pod kategorijo "manipulacije"..

Dodaj kot podrejeni element obstoječega elementa

$("body").append($("
Pozdravljen, svet
"));
$(document.body).append($el);

To metodo lahko uporabite na primer za dodajanje novega elementa seznama na koncu seznama.

Dodajte ga kot brata obstoječega elementa

$("p.zadnji").after("
Nov odstavek
")
$("ul li: first").before("
nov predmet
")

To je dobra izbira, če želite na primer dodati nov odstavek sredi dveh drugih.

Zamenjajte obstoječi element

Obstoječi element lahko zamenjate z na novo ustvarjenim z uporabo zamenjaj z () metoda:

$('#old').replaceWith("
Nov odstavek
");

Ovijte okoli obstoječega elementa

To je precej redek primer uporabe, vendar boste morda želeli obstoječega elementa priložiti novemu. Na primer, morda imate a Koda element, ki ga želite zaviti v a pred:

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

Dostop do elementa, ki ste ga ustvarili

The $() funkcija vrne predmet jQuery. To je uporabno za nadaljnje operacije:

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

Upoštevajte, da programerji jQuery po dogovoru spremenljivke jQuery pogosto imenujejo z vodilnim predznakom za dolar. To je preprosto shema poimenovanja in ni neposredno povezana z $() funkcijo.

Ustvarjanje elementov z uporabo jQuery

Čeprav lahko DOM manipulirate z uporabo domačih funkcij JavaScript, jQuery to veliko olajša. Še vedno je zelo koristno dobro razumeti DOM, vendar jQuery naredi delo z njim veliko prijetnejše.

Skriti junak spletnih mest: razumevanje DOM-a

Učite se spletnega oblikovanja in želite izvedeti več o objektnem modelu dokumenta? Tukaj je tisto, kar morate vedeti o DOM.

Preberite Naprej

O avtorju