Siit saate teada, kuidas jQuerys elementi luua

Uue elemendi loomine on üks lihtsamaid ülesandeid, mida saate jQuery JavaScripti teegiga täita. JQuery abil on ülesanne palju lihtsam kui samaväärne lähenemisviis dokumendiobjekti mudeliga (DOM). Samuti on see paindlikum ja väljendusrikkam, mida rohkem jQueryt kasutate.

Eesmärgi täitmiseks peate saama oma elemendi veebilehele lisada. Siit saate teada, kuidas jQuery abil lisada uut loendiüksust või asendada lõik uue sisuga.

Mis on jQuery?

jQuery teek on kogumik JavaScript kood kahe peamise eesmärgiga:

• See lihtsustab tavalisi JavaScripti toiminguid.
• See käsitleb erinevate brauserite ristühilduvuse JavaScripti probleeme.

Teine eesmärk käsitleb vigu, kuid käsitleb ka brauserite erinevusi. Mõlemad eesmärgid on vähem vajalikud kui varem, kuna brauserid aja jooksul paranevad. Kuid jQuery võib siiski olla väärtuslik tööriist.

Mis on element?

Elementi nimetatakse mõnikord sildiks. Kuigi neid kahte kasutatakse sageli vaheldumisi, on nende vahel väike erinevus. Silt viitab sõnasõnale või

 lisate tekstisisu märgistamiseks HTML-faili. Element on telgitagune objekt, mis esindab märgitud teksti. Mõelge elemendile kui  DOM vaste HTML-i siltidele.

Kuidas jQuery abil uut elementi luua

Nagu enamik jQuery toiminguid, algab elemendi loomine dollari funktsiooniga, $(). See on otsetee tuumani jQuery() funktsiooni. Sellel funktsioonil on kolm erinevat eesmärki:

• Sobitab elementidega, tavaliselt nendega, mis dokumendis juba olemas on
• Loob uusi elemente
• Käitab tagasihelistamisfunktsiooni, kui DOM on valmis

Kui edastate stringi, mis sisaldab esimese parameetrina HTML-i, loob see funktsioon uue elemendi:

$("")

See tagastab spetsiaalse jQuery objekti, mis sisaldab elementide kogumit. Sel juhul on üks objekt, mis esindab "a" elementi, mille me just lõime.

String peab nägema välja nagu HTML, et eristada seda tegevust sobivatest elementidest. Praktikas tähendab see, et string peab algama tähega a <. Seda meetodit kasutades ei saa dokumendile lihtteksti lisada.

Oluline on mõista, et see ei lisa elementi teie dokumenti, vaid loob ainult uue elemendi, mis on teie jaoks valmis lisamiseks. Element on "kinnitamata", võtab mälu, kuid ei ole tegelikult veel viimase lehe osa.

Keerulisema HTML-i lisamine

Dollari funktsioon võib tegelikult luua rohkem kui ühe elemendi. Tegelikult saab see luua mis tahes soovitud HTML-elementide puu:

$("

üks
kaks
kolm
")

Seda vormingut saate kasutada ka atribuutidega elemendi loomiseks:

$('')

Kuidas määrata uue elemendi atribuute

Saate luua uue jQuery elemendi ja määrata selle atribuudid, ilma et peaksite kogu HTML-stringi ise koostama. See on kasulik, kui genereerite atribuutide väärtusi dünaamiliselt. Näiteks:

foto = uus Kuupäev().getHours() > 12? "afternoon.jpg": "hommik.jpg";
$("", { src: foto });

Kuidas elementi lisada

Kui olete uue elemendi loonud, saate selle dokumendile mitmel erineval viisil lisada. jQuery dokumentatsioon koondab need meetodid alla kategooria "manipulatsioon"..

Lisage olemasoleva elemendi lapsena

$("keha").append($("
Tere, Maailm
"));
$(document.body).append($el);

Seda meetodit saate kasutada näiteks uue loendiüksuse lisamiseks loendi lõppu.

Lisage see olemasoleva elemendi vennana

$("p.last").after("
Uus lõik
")
$("ul li: esimene").before("
uus ese
")

See on hea valik, kui soovite näiteks kahe teise lõigu keskele lisada uue lõigu.

Asendage olemasolev element

Saate vahetada olemasoleva elemendi vastloodud elemendi vastu, kasutades nuppu asenda() meetod:

$('#vana').replaceWith("
Uus lõik
");

Mähkige olemasoleva elemendi ümber

See on üsna haruldane kasutusjuht, kuid võiksite lisada olemasoleva elemendi uude. Näiteks võib teil olla a kood element, mille soovite mähkida a eel:

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

Juurdepääs teie loodud elemendile

The $() funktsioon tagastab jQuery objekti. See on kasulik järeltoimingute jaoks:

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

Pange tähele, et kokkuleppeliselt nimetavad jQuery programmeerijad sageli jQuery muutujaid juhtiva dollarimärgiga. See on lihtsalt nimetamisskeem ega ole otseselt seotud $() funktsiooni.

Elementide loomine jQuery abil

Kuigi saate DOM-i manipuleerida JavaScripti natiivsete funktsioonide abil, muudab jQuery selle palju lihtsamaks. DOM-i hea mõistmine on endiselt väga kasulik, kuid jQuery muudab sellega töötamise palju meeldivamaks.

Veebisaitide varjatud kangelane: DOM-i mõistmine

Kas õpite veebidisaini ja soovite dokumendiobjekti mudeli kohta rohkem teada saada? Siin on see, mida peate DOM-i kohta teadma.

Loe edasi

Autori kohta