Aflați cum să creați un element în jQuery

Aflați cum să creați un element în jQuery

Crearea unui element nou este una dintre cele mai de bază sarcini pe care le puteți realiza cu biblioteca JavaScript jQuery. Folosind jQuery, sarcina este mult mai simplă decât abordarea echivalentă cu Document Object Model (DOM). De asemenea, îl veți găsi mai flexibil și mai expresiv, cu atât mai mult utilizați jQuery.





Pentru a îndeplini un scop, va trebui să vă puteți adăuga elementul pe o pagină web. Aflați cum să adăugați un nou element de listă sau să înlocuiți un paragraf cu conținut nou folosind jQuery.



Ce este jQuery?

Biblioteca jQuery este o colecție de JavaScript cod cu două obiective principale:





  • Simplifică operațiunile JavaScript obișnuite.
  • Se ocupă de probleme de compatibilitate încrucișată JavaScript între diferite browsere.

Al doilea obiectiv se adresează erorilor, dar abordează și diferențele de implementare dintre browsere. Ambele obiective sunt mai puțin necesare decât erau, deoarece browserele se îmbunătățesc în timp. Dar jQuery poate fi în continuare un instrument valoros.

Ce este un element?

Un element este uneori denumit etichetă. Deși cele două sunt adesea folosite interschimbabil, există o diferență subtilă. O etichetă se referă la literal

sau



includeți într-un fișier HTML pentru a marca conținutul textului. Un element este obiectul din culise care reprezintă textul marcat. Gândiți-vă la un element ca la omologul DOM al etichetelor HTML.

Cum se creează un element nou folosind jQuery

La fel ca majoritatea operațiunilor jQuery, crearea unui element începe cu funcția dolar, $ () . Aceasta este o scurtătură către nucleu jQuery () funcţie. Această funcție are trei scopuri distincte:



  • Se potrivește cu elemente, de obicei cu cele care există deja în document
  • Creează elemente noi
  • Rulează o funcție de apel invers când DOM-ul este gata

Când treceți un șir care conține HTML ca prim parametru, această funcție va crea un element nou:

$(' ')

Aceasta returnează un obiect jQuery special care conține o colecție de elemente. În acest caz, există un singur obiect care reprezintă un element „a” pe care tocmai l-am creat.



glisați și plasați gratuit jocul Maker

Șirul trebuie să arate ca HTML pentru a distinge această acțiune de elementele potrivite. În practică, aceasta înseamnă că șirul trebuie să înceapă cu a < . Nu puteți adăuga text simplu la document folosind această metodă.

Este important să înțelegeți că acest lucru nu adaugă elementul în documentul dvs., ci creează doar un element nou gata să îl adăugați. Elementul este „neatasat”, ocupând memorie, dar de fapt nu face parte din pagina finală - încă.

Adăugarea unui HTML mai complex

Funcția dolar poate crea de fapt mai mult de un element. De fapt, poate construi orice arbore de elemente HTML pe care le doriți:

$('
  • one
  • two
  • three
')

De asemenea, puteți utiliza acest format pentru a crea un element cu atribute:

$(' my hometown')

Cum să setați atribute pentru un element nou

Puteți crea un nou element jQuery și setați atributele acestuia fără a fi nevoie să creați singur șirul HTML complet. Acest lucru este util dacă generați valorile atributelor în mod dinamic. De exemplu:

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

Cum se adaugă un element

După ce ați creat un element nou, îl puteți adăuga în document în mai multe moduri diferite. Documentația jQuery reunește aceste metode împreună în Categoria „manipulare” .

Adăugați ca copil al unui element existent

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

Hello, world

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

Puteți utiliza această metodă, de exemplu, pentru a adăuga un nou element de listă la sfârșitul listei.

Adăugați-l ca frate al unui element existent

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

A new paragraph

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

    Aceasta este o alegere bună dacă, de exemplu, doriți să adăugați un nou paragraf în mijlocul altor două.

    Înlocuiți un element existent

    Puteți schimba un element existent cu unul nou creat folosind înlocui cu() metodă:

    $('#old').replaceWith('

    New paragraph

    ');

    Înfășurați un element existent

    Acesta este un caz de utilizare destul de rar, dar poate doriți să includeți un element existent într-unul nou. De exemplu, s-ar putea să aveți un cod element pe care doriți să îl înfășurați într-un pentru :

    $('code#n1').wrap('
    ')
    Accesarea elementului pe care l-ați creat
     
    The $ () funcția returnează un obiect jQuery. Acest lucru este util pentru operațiile de urmărire:
    $el = $('p');  
    $('body').append($el);
    Rețineți că, prin convenție, programatorii jQuery denumesc adesea variabile jQuery cu un semn de dolar principal. Aceasta este pur și simplu o schemă de denumire și nu este direct legată de $ () funcţie.
     
    Crearea de elemente folosind jQuery
     
    Deși puteți manipula DOM utilizând funcții JavaScript native, jQuery face mult mai ușor acest lucru. Este încă foarte util să înțelegeți bine DOM-ul, dar jQuery face mult mai plăcut lucrul cu acesta.
      Acțiune    Acțiune      Tweet      E-mail      Eroul ascuns al site-urilor web: Înțelegerea DOM  
    Învățați designul web și trebuie să aflați mai multe despre modelul de obiect document? Iată ce trebuie să știți despre DOM.
    Citiți în continuare       Subiecte asemănătoare  
       
    • Programare
      •  
    • Dezvoltare web
      •  
    • jQuery
      •  
      Despre autor   Bobby Jack(58 articole publicate)      
    Bobby este un pasionat de tehnologie care a lucrat ca dezvoltator de software timp de aproape două decenii. Este pasionat de jocuri, lucrează ca editor de recenzii la Switch Player Magazine și este cufundat în toate aspectele publicării online și dezvoltării web.
    Mai multe de la Bobby Jack
    Aboneaza-te la newsletter-ul nostru
     
    Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!
    Faceți clic aici pentru a vă abona