Naučite se ustvariti element v jQuery

Naučite se ustvariti element v jQuery

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





Če želite služiti namenu, morate svoj element dodati na spletno stran. Naučite se, kako z jQuery dodati nov element seznama ali zamenjati odstavek z novo vsebino.



Kaj je jQuery?

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





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

Drugi cilj je namenjen odpravljanju napak, obravnava pa tudi implementacijske razlike med brskalniki. Oba cilja sta manj potrebna kot nekoč, saj se brskalniki sčasoma izboljšujejo. Toda jQuery je še vedno lahko dragoceno orodje.

Kaj je element?

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

ali



vključite v datoteko HTML za označevanje besedilne vsebine. Element je predmet v zakulisju, ki predstavlja označeno besedilo. Element si predstavljajte kot DOM, ki je enakovreden oznakam HTML.

Kako ustvariti nov element z jQuery

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



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

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

$(' ')

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



kopirajte mapo google drive v drug račun

Za razlikovanje tega dejanja od ujemajočih se nizov mora biti niz podoben HTML -ju. V praksi to pomeni, da se mora niz začeti z a < . Na ta način v dokument ne morete dodati navadnega besedila.

Pomembno je razumeti, da to ne doda elementa v vaš dokument, ampak ustvari le nov element, ki ga lahko dodate. Element je 'nedotaknjen', zavzema pomnilnik, vendar dejansko še ni del zadnje strani.

Dodajanje bolj zapletenega HTML -ja

Funkcija dolarja lahko ustvari več elementov. Pravzaprav lahko zgradi poljubno drevo elementov HTML:

$('
  • one
  • two
  • three
')

To obliko lahko uporabite tudi za ustvarjanje elementa z atributi:

$(' my hometown')

Kako nastaviti atribute na novem elementu

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

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

Kako dodati element

Ko ustvarite nov element, ga lahko dodate v dokument na več različnih načinov. Dokumentacija jQuery združuje te metode pod Kategorijo 'manipulacija' .

Dodaj kot podrejenega obstoječega elementa

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

Hello, world

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

S to metodo lahko na primer dodate novo postavko seznama na koncu seznama.

Dodajte ga kot sorodnika obstoječega elementa

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

A new paragraph

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

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

    Zamenjajte obstoječi element

    Obstoječi element lahko zamenjate za novo ustvarjenega z uporabo replaceWith () metoda:

    $('#old').replaceWith('

    New paragraph

    ');

    Zavijte okoli obstoječega elementa

    To je precej redek primer uporabe, vendar boste morda želeli obstoječi element vstaviti v novega. Na primer, morda imate Koda element, ki ga želite zaviti v za :

    $('code#n1').wrap('
    ')
    Dostop do elementa, ki ste ga ustvarili
     
    The $ () funkcija vrne objekt jQuery. To je uporabno za nadaljnje operacije:
    $el = $('p');  
    $('body').append($el);
    Upoštevajte, da programerji jQuery po dogovoru pogosto imenujejo spremenljivke jQuery z vodilnim znakom dolarja. To je preprosto shema poimenovanja in ni neposredno povezana z $ () funkcijo.
     
    Ustvarjanje elementov z uporabo jQuery
     
    Čeprav lahko z DOM -om upravljate z izvornimi funkcijami JavaScript, jQuery to olajša. Še vedno je zelo koristno dobro razumeti DOM, vendar je z jQuery delo z njim veliko prijetnejše.
      Deliti    Deliti      Cvrkutati      E-naslov      Skriti junak spletnih mest: Razumevanje DOM -a  
    Se učite spletnega oblikovanja in morate vedeti več o predmetnem modelu dokumenta? Tukaj je tisto, kar morate vedeti o DOM.
    Preberite Naprej       Sorodne teme  
       
    • Programiranje
      •  
    • Spletni razvoj
      •  
    • jQuery
      •  
      O avtorju   Bobby Jack(58 objavljenih člankov)      
    Bobby je tehnološki navdušenec, ki je več kot dve desetletji delal kot razvijalec programske opreme. Navdušen je nad igranjem iger, dela kot urednik recenzij v reviji Switch Player in je potopljen v vse vidike spletnega založništva in spletnega razvoja.
    Več od Bobbyja Jacka
    Naročite se na naše novice
     
    Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!
    Kliknite tukaj, če se želite naročiti