Sužinokite, kaip sukurti elementą „jQuery“.

Naujo elemento kūrimas yra viena iš pagrindinių užduočių, kurias galite atlikti naudodami „jQuery JavaScript“ biblioteką. Naudojant jQuery, užduotis yra daug paprastesnė nei lygiavertis metodas naudojant dokumento objektų modelį (DOM). Be to, kuo daugiau naudosite „jQuery“, jis taps lankstesnis ir išraiškingesnis.

Kad galėtumėte pasiekti tikslą, turėsite turėti galimybę įtraukti savo elementą į tinklalapį. Sužinokite, kaip pridėti naują sąrašo elementą arba pakeisti pastraipą nauju turiniu naudojant jQuery.

Kas yra jQuery?

jQuery biblioteka yra kolekcija JavaScript kodas su dviem pagrindiniais tikslais:

• Tai supaprastina įprastas JavaScript operacijas.
• Jis sprendžia kryžminio suderinamumo JavaScript problemas tarp įvairių naršyklių.

Antrasis tikslas apima klaidas, bet taip pat sprendžia diegimo skirtumus tarp naršyklių. Abu tikslai yra mažiau reikalingi nei anksčiau, nes laikui bėgant naršyklės tobulėja. Tačiau „jQuery“ vis tiek gali būti vertingas įrankis.

Kas yra Elementas?

Elementas kartais vadinamas žyma. Nors abu dažnai naudojami pakaitomis, yra nedidelis skirtumas. Žyma nurodo pažodinį žodį arba

 įtraukite į HTML failą, kad pažymėtumėte teksto turinį. Elementas yra užkulisinis objektas, vaizduojantis pažymėtą tekstą. Pagalvokite apie elementą kaip DOM atitikmuo HTML žymoms.

Kaip sukurti naują elementą naudojant „jQuery“.

Kaip ir dauguma „jQuery“ operacijų, elemento kūrimas prasideda nuo dolerio funkcijos, $(). Tai nuoroda į esmę jQuery() funkcija. Ši funkcija turi tris skirtingus tikslus:

• Atitinka elementus, dažniausiai tuos, kurie jau yra dokumente
• Sukuria naujus elementus
• Vykdo atgalinio skambinimo funkciją, kai DOM yra paruoštas

Kai perduodate eilutę, kurios pirmasis parametras yra HTML, ši funkcija sukurs naują elementą:

$("")

Tai grąžina specialų jQuery objektą, kuriame yra elementų rinkinys. Šiuo atveju yra vienas objektas, vaizduojantis „a“ elementą, kurį ką tik sukūrėme.

Eilutė turi atrodyti kaip HTML, kad šis veiksmas būtų atskirtas nuo atitinkamų elementų. Praktiškai tai reiškia, kad eilutė turi prasidėti raide a <. Naudodami šį metodą prie dokumento negalite pridėti paprasto teksto.

Svarbu suprasti, kad tai neprideda elemento prie dokumento, o tik sukuria naują elementą, kurį galite pridėti. Elementas yra „neprijungtas“, užima atmintį, bet iš tikrųjų dar nėra galutinio puslapio dalis.

Sudėtingesnio HTML pridėjimas

Dolerio funkcija iš tikrųjų gali sukurti daugiau nei vieną elementą. Tiesą sakant, jis gali sukurti bet kokį norimą HTML elementų medį:

$("

vienas
du
trys
")

Šį formatą taip pat galite naudoti norėdami sukurti elementą su atributais:

$('')

Kaip nustatyti atributus naujam elementui

Galite sukurti naują jQuery elementą ir nustatyti jo atributus, patys nesukūrę visos HTML eilutės. Tai naudinga, jei atributų reikšmes generuojate dinamiškai. Pavyzdžiui:

nuotrauka = ​​nauja data().getHours() > 12? "afternoon.jpg": "rytas.jpg";
$("", { src: nuotrauka });

Kaip pridėti elementą

Sukūrę naują elementą, galite jį pridėti prie dokumento keliais skirtingais būdais. „jQuery“ dokumentacijoje šie metodai pateikiami kartu „manipuliavimo“ kategorija.

Pridėti kaip esamo elemento vaiką

$("body").append($("
Labas pasauli
"));
$(document.body).append($el);

Šį metodą galite naudoti, pavyzdžiui, norėdami įtraukti naują sąrašo elementą sąrašo pabaigoje.

Pridėkite jį kaip esamo elemento brolį

$("p.last").after("
Nauja pastraipa
")
$("ul li: pirmas").before("
naujas daiktas
")

Tai geras pasirinkimas, jei, pavyzdžiui, norite pridėti naują pastraipą dviejų kitų pastraipų viduryje.

Pakeiskite esamą elementą

Galite pakeisti esamą elementą į naujai sukurtą naudodami pakeisti() metodas:

$('#old').replaceWith("
Nauja pastraipa
");

Apvyniokite esamą elementą

Tai gana retas atvejis, tačiau galbūt norėsite įtraukti esamą elementą į naują. Pavyzdžiui, galite turėti a kodas elementas, kurį norite apvynioti a išankstinis:

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

Prieiga prie jūsų sukurto elemento

The $() funkcija grąžina jQuery objektą. Tai naudinga atliekant tolesnius veiksmus:

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

Atminkite, kad pagal susitarimą jQuery programuotojai dažnai pavadina jQuery kintamuosius su pirmaujančiu dolerio ženklu. Tai tiesiog pavadinimų schema ir nėra tiesiogiai susijusi su $() funkcija.

Elementų kūrimas naudojant „jQuery“.

Nors galite manipuliuoti DOM naudodami vietines JavaScript funkcijas, jQuery tai padaryti daug lengviau. Vis dar labai naudinga gerai suprasti DOM, tačiau „jQuery“ daro darbą su juo daug malonesnį.

Paslėptas svetainių herojus: DOM supratimas

Mokate interneto dizaino ir norite sužinoti daugiau apie dokumento objekto modelį? Štai ką reikia žinoti apie DOM.

Skaitykite toliau

Apie autorių