Sužinokite, kaip sukurti elementą „jQuery“

Sužinokite, kaip sukurti elementą „jQuery“

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





Kad atliktumėte tikslą, turėsite sugebėti pridėti savo elementą prie tinklalapio. 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 skirtas klaidoms, tačiau taip pat sprendžiami naršyklių įgyvendinimo skirtumai. 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 vertinga priemonė.

Kas yra Elementas?

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

arba



įtraukiate į HTML failą, kad pažymėtumėte teksto turinį. Elementas yra užkulisinis objektas, žymintis pažymėtą tekstą. Pagalvokite apie elementą kaip apie DOM atitikmenį HTML žymėms.

Kaip sukurti naują elementą naudojant „jQuery“

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



  • Atitinka elementus, dažniausiai tuos, kurie jau yra dokumente
  • Sukuria naujus elementus
  • Paleidžia atgalinio ryšio funkciją, kai DOM yra paruoštas

Kai perduosite 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, atstovaujantis ką tik sukurtam „a“ elementui.



ką reiškia pirkimas programoje

Eilutė turi atrodyti kaip HTML, kad būtų galima atskirti šį veiksmą nuo atitinkančių elementų. Praktiškai tai reiškia, kad eilutė turi prasidėti a < . Šiuo metodu į dokumentą negalite pridėti paprasto teksto.

Svarbu suprasti, kad tai neprideda elemento prie jūsų dokumento, o tik sukuria naują elementą, paruoštą jums pridėti. Elementas yra „neprijungtas“, užima atmintį, bet iš tikrųjų nėra paskutinio 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į:

$('
  • one
  • two
  • three
')

Taip pat galite naudoti šį formatą, kad sukurtumėte elementą su atributais:

$(' my hometown')

Kaip nustatyti naujo elemento atributus

Galite sukurti naują „jQuery“ elementą ir nustatyti jo atributus patys nesukurdami visos HTML eilutės. Tai naudinga, jei atributų reikšmes kuriate dinamiškai. Pavyzdžiui:

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

Kaip pridėti elementą

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

Pridėti kaip esamo elemento vaiką

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

Hello, world

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

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

Pridėkite jį kaip esamo elemento brolį

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

A new paragraph

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

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

    Pakeiskite esamą elementą

    Galite pakeisti esamą elementą naujai sukurtu elementu naudodami pakeisti() metodas:

    $('#old').replaceWith('

    New paragraph

    ');

    Apvyniokite aplink esamą elementą

    Tai gana retas naudojimo atvejis, tačiau galbūt norėsite įtraukti esamą elementą į naują. Pavyzdžiui, galite turėti a kodą elementą, kurį norite įvynioti į dėl :

    $('code#n1').wrap('
    ')
    Prieiga prie jūsų sukurto elemento
     
    The $ () funkcija grąžina „jQuery“ objektą. Tai naudinga tolesnėms operacijoms:
    $el = $('p');  
    $('body').append($el);
    Atminkite, kad pagal susitarimą „jQuery“ programuotojai dažnai įvardija „jQuery“ kintamuosius pagrindiniu dolerio ženklu. Tai tiesiog pavadinimo 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 su juo daug malonesnį.
      Dalintis    Dalintis      „Tweet“      Paštu      Paslėptas svetainių herojus: DOM supratimas  
    Mokotės interneto dizaino ir norite daugiau sužinoti apie dokumento objekto modelį? Štai ką reikia žinoti apie DOM.
    Skaityti toliau       Susijusios temos  
       
    • Programavimas
      •  
    • Interneto svetainių kūrimas
      •  
    • „jQuery“
      •  
      Apie autorių   Bobis Džekas(Paskelbti 58 straipsniai)      
    Bobby yra technologijų entuziastas, kuris beveik du dešimtmečius dirbo programinės įrangos kūrėju. Jis aistringai žaidžia, dirba „Switch Player Magazine“ apžvalgų redaktoriumi ir yra pasinėręs į visus internetinės publikacijos ir žiniatinklio kūrimo aspektus.
    Daugiau iš Bobby Jack
    Prenumeruokite mūsų naujienlaiškį
     
    Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!
    Norėdami užsiprenumeruoti, spustelėkite čia