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 jQuery JavaScript. Folosind jQuery, sarcina este mult mai simplă decât abordarea echivalentă cu Document Object Model (DOM). De asemenea, veți găsi că este mai flexibil și mai expresiv, cu cât utilizați mai mult jQuery.

Pentru a servi unui scop, va trebui să puteți adăuga elementul pe o pagină web. Aflați cum să adăugați un nou articol 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ă scopuri principale:

• Simplifică operațiunile JavaScript comune.
• Se ocupă de problemele de compatibilitate încrucișată JavaScript între diferite browsere.

Al doilea obiectiv se referă la erori, dar abordează și diferențele de implementare între browsere. Ambele obiective sunt mai puțin necesare decât înainte, deoarece browserele se îmbunătățesc în timp. Dar jQuery poate fi totuși 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 fiind DOM omologul etichetelor HTML.

Cum se creează un element nou folosind jQuery

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

• Potrivește elemente, de obicei 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 nou element:

$("")

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.

Șirul trebuie să arate ca HTML pentru a distinge această acțiune de elementele care se potrivesc. Î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 doar creează un element nou gata pentru a fi adăugat. Elementul este „neatașat”, ocupând memorie, dar nu face parte de fapt 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 doriți:

$("

unu
Două
Trei
")

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

$('')

Cum să setați atribute pe un element nou

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

fotografie = data noua().getHours() > 12? „afternoon.jpg”: „dimineața.jpg”;
$("", { src: fotografie });

Cum să adăugați un element

Odată ce ați creat un element nou, îl puteți adăuga la document în mai multe moduri diferite. Documentația jQuery adună aceste metode împreună sub categoria „manipulare”..

Adăugați ca copil al unui element existent

$("corp").append($("
Salut Lume
"));
$(document.body).append($el);

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

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

$("p.last").după("
Un nou paragraf
")
$("ul li: first").before("
articol nou
")

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ă:

$('#vechi').replaceWith("
Alineat nou
");

Înfășurați în jurul unui element existent

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

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

Accesarea elementului pe care l-ați creat

The $() funcția returnează un obiect jQuery. Acest lucru este util pentru operațiunile de urmărire:

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

Rețineți că, prin convenție, programatorii jQuery numesc adesea variabilele jQuery cu semnul dolar. 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-ul folosind funcții native JavaScript, jQuery face acest lucru mult mai ușor. Este încă foarte util să înțelegeți bine DOM-ul, dar jQuery face lucrul cu acesta mult mai plăcut.

Eroul ascuns al site-urilor web: înțelegerea DOM

Învățați design web și aveți nevoie să aflați mai multe despre Modelul obiect document? Iată ce trebuie să știți despre DOM.

Citiți în continuare

Despre autor