Siit saate teada, kuidas jQuery'is elementi luua

Siit saate teada, kuidas jQuery'is elementi luua

Uue elemendi loomine on üks põhilisemaid ülesandeid, mida saate jQuery JavaScripti kogu abil täita. JQuery abil on ülesanne palju lihtsam kui dokumendi objekti mudeli (DOM) samaväärne lähenemine. Samuti leiate, et see on paindlikum ja väljendusrikkam, seda rohkem kasutate jQuery.





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



Mis on jQuery?

JQuery raamatukogu on kogu JavaScript kood, millel on kaks peamist eesmärki:





  • See lihtsustab tavalisi JavaScripti toiminguid.
  • See tegeleb ristse ühilduvusega JavaScripti probleemidega erinevate brauserite vahel.

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

Mis on element?

Mõnikord nimetatakse elementi märgendiks. Kuigi neid kahte kasutatakse sageli vaheldumisi, on neil väike erinevus. Silt viitab sõnasõnalisele

või



lisate HTML -faili teksti sisu märgistamiseks. Element on kaadritagune objekt, mis tähistab märgitud teksti. Mõelge elemendile kui HTML -siltide DOM -i vastele.

Kuidas luua uut elementi jQuery abil

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



  • Sobib elementidega, tavaliselt nendega, mis on dokumendis juba olemas
  • Loob uusi elemente
  • Käivitab tagasihelistamise funktsiooni, 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 äsja loodud elementi „a”.



logige netflixist välja roku kaudu

String peab välja nägema nagu HTML, et eristada seda toimingut vastavatest elementidest. Praktikas tähendab see, et string peab algama a -ga < . Selle meetodiga ei saa dokumendile lihtteksti lisada.

Oluline on mõista, et see ei lisa elementi teie dokumenti, vaid loob ainult uue elemendi, mille saate lisada. Element on „kinnitamata”, võtab küll mälu, kuid pole tegelikult osa viimasest lehest - veel.

Keerukama HTML -i lisamine

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

$('
  • one
  • two
  • three
')

Seda vormingut saate kasutada ka atribuutidega elemendi loomiseks:

$(' my hometown')

Kuidas määrata uuele elemendile atribuute

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

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

Kuidas lisada elementi

Kui olete uue elemendi loonud, saate selle dokumendile lisada mitmel erineval viisil. JQuery dokumentatsioon koondab need meetodid kausta 'Manipuleerimise' kategooria .

Lisa olemasoleva elemendi lapsena

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

Hello, world

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

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

Lisage see olemasoleva elemendi õde -venda

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

A new paragraph

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

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

    Asendage olemasolev element

    Saate asendada olemasoleva elemendi äsja loodud elemendiga, kasutades asendama () meetod:

    $('#old').replaceWith('

    New paragraph

    ');

    Keerake ümber olemasoleva elemendi

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

    $('code#n1').wrap('
    ')
    Juurdepääs loodud elemendile
     
    The $ () funktsioon tagastab jQuery objekti. See on kasulik järgnevate toimingute jaoks:
    $el = $('p');  
    $('body').append($el);
    Pange tähele, et kokkuleppe kohaselt 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, kasutades kohalikke JavaScripti funktsioone, muudab jQuery seda palju lihtsamaks. DOM -ist hea arusaamine on endiselt väga kasulik, kuid jQuery muudab sellega töötamise palju meeldivamaks.
      Jaga    Jaga      Piiksuma      E -post      Veebisaitide varjatud kangelane: DOM -i mõistmine  
    Kas õpite veebidisaini ja soovite rohkem teada saada dokumendiobjekti mudeli kohta? Siin on, mida peate teadma DOM -i kohta.
    Loe edasi       Seotud teemad  
       
    • Programmeerimine
      •  
    • Veebiarendus
      •  
    • jQuery
      •  
      Autori kohta   Bobby Jack(58 artiklit avaldatud)      
    Bobby on tehnoloogiahuviline, kes töötas enam kui kaks aastakümmet tarkvaraarendajana. Ta on kirglik mängude vastu, töötab ajakirja Switch Player ülevaadete toimetajana ning on süvenenud kõikidesse veebipõhiste avaldamise ja veebiarenduse aspektidesse.
    Veel Bobby Jackilt
    Telli meie uudiskiri
     
    Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!
    Tellimiseks klõpsake siin