După ce a devenit familiarizat cu această secțiune a documentației jQuery puteți manipula cu ușurință elementele de Document Object Model. Astăzi vom învăța cum să insereze, înfășurați, înlocuiți, copia și șterge elemente DOM.
.html (): string
Returnează html conținut al elementului selectat.
Dacă există mai multe elemente, valoarea va fi preluată din prima.
.html (string): Object jQuery
Acesta înlocuiește conținutul tuturor elementelor de pe șirul selectat.
.html (jQuery Object | DOM Object): Obiect jQuery
Mută elementele de pagină selectate în elementele (conținutul lor anterioare vor eliminat apoi).
Puteți seta de DOM-elemente sau supuse jQuery.
Deschideți exemplul în noua fereastră și uita-te la codul sursă
.html (funcție (index, valoare)): Object jQuery
Înlocuiește conținutul elementelor selectate pe valoarea returnată de funcția de utilizator.
Funcția se numește separat pentru fiecare dintre elementele selectate.
Când apelați următorii parametri sunt trecute să-l:
indice - poziția elementului din set,
Valoarea - curent HTML-conținut. În acest exemplu, făcând clic pe mouse-ul pe secțiunea, convertește sale HTML-cod în text.
Deschideți exemplul în noua fereastră și uita-te la codul sursă
În acest exemplu, vom adăuga unele cod html în fiecare element al div.
Deschideți exemplul în noua fereastră și uita-te la codul sursă
.text (): string
Returnează textul conținut în elementul selectat.
.text (string): obiect jQuery
Înlocuiește întregul conținut al elementelor selectate în șirul de text.
.text (funcție (index, valoare)): Obiect jQuery
Înlocuiește întregul conținut al elementelor selectate pe funcția definită de utilizator a revenit text.
Dacă încercați să utilizați metoda de text () pentru a pune într-un alt element folosind HTML-text, jQuery ar scăpa de orice tag-uri.
.append (conținut)
Adaugă tot conținutul în interiorul elementului selectat după conținutul existent. Această operațiune este similară cu utilizarea appendChild.
În acest exemplu, vom adăuga un HTML cod la sfârșitul paragrafe.
Deschideți exemplul în noua fereastră și uita-te la codul sursă
.appendTo (conținut)
Adaugă toate elementele selectate în alt set de elemente, după conținutul existent.
Această operațiune este inversul utilizării $ expresie (A) .append (B). care se adaugă B la A.
Aici, A este adăugat la B.
Doar compara cu exemplul append ().
Deschideți exemplul în noua fereastră și uita-te la codul sursă
.Prepend (conținut)
Adaugă tot conținutul în interiorul elementelor selectate pentru conținutul existent.
Aceasta este cea mai bună soluție pentru a introduce elemente de la bun început.
În acest exemplu, vom adăuga un HTML cod la începutul alin.
Deschideți exemplul în noua fereastră și uita-te la codul sursă
.prependTo (conținut)
Adaugă toate elementele selectate în alt set de elemente de conținut existent.
Această operațiune este inversul utilizării $ expresie (A) .prepend (B). care se adaugă B la A. Aici, A este adăugat B.
Doar compara cu exemplul prefixului ().
Deschideți exemplul în noua fereastră și uita-te la codul sursă
.după (conținut)
Inserturi kontentPOSLE fiecare element selectat.
În exemplul vom insera unele HTML cod după toate punctele.
Deschideți exemplul în noua fereastră și uita-te la codul sursă
.insertAfter (conținut)
Introduceți toate celelalte elementyPOSLE selectate sunt definite în insertAfter.
Această operațiune este inversul utilizării .Dupa expresiei $ (A) (B). în cazul în care se introduce B după A.
Aici A se introduce după V.
Doar compara cu exemplul după ().
Deschideți exemplul în noua fereastră și uita-te la codul sursă
.înainte de a (conținut)
Inserturi kontentPERED fiecare element selectat.
În exemplul vom insera unele HTML-cod în fața tuturor punctelor.
Deschideți exemplul în noua fereastră și uita-te la codul sursă
.insertBefore (conținut)
Introduceți toate celelalte elementyPERED selectate sunt definite în insertBefore.
Această operațiune este inversul utilizării $ expresie (A) .before (B). în cazul în care se introduce B după A.
Aici A se introduce după V.
Doar compara cu exemplul anterior ().
În acest exemplu, am pus toate punctele înaintea unui element, care are un „foo“ id atribut. Același lucru se poate face prin scris: $ ( "# foo") înainte ( "p").
Deschideți exemplul în noua fereastră și uita-te la codul sursă
.înfășurați (html | element DOM | element de jQuery)
Se învelește fiecare element element stabilit într-un înveliș.
Acest lucru poate fi util pentru injectarea unei structuri suplimentare la document, fără a deranja documentul de calitate semantică originală.
În acest exemplu, div care înfășurați noul element în jurul fiecărei secțiuni. Codul HTML acționează ca un argument.
Deschideți exemplul în noua fereastră și uita-te la codul sursă
Deschideți exemplul în noua fereastră și uita-te la codul sursă
Deschideți exemplul în noua fereastră și uita-te la codul sursă
.wrapAll (html | element DOM | element de jQuery)
Se înfășoară toate elementele unui set într-un singur element de înfășurare.
Acest lucru poate fi util pentru injectarea unei structuri suplimentare la document, fără a deranja documentul de calitate semantică originală.
În acest exemplu, vom încheia un nou div în jurul valorii de toate punctele. Codul HTML acționează ca un argument.
Deschideți exemplul în noua fereastră și uita-te la codul sursă
.wrapInner (html | element DOM | element de jQuery)
Interioară împachetări fiecare set de elemente de conținut (inclusiv noduri text) în structura HTML.
Acest lucru poate fi util pentru injectarea unei structuri suplimentare la document, fără a deranja documentul de calitate semantică originală.
În acest exemplu, vom selecta toate punctele, și înveliți în tag-ul b conținutul lor interne. Codul HTML acționează ca un argument.
Deschideți exemplul în noua fereastră și uita-te la codul sursă
.replaceWith (conținut)
Înlocuiește toate elementele setului de elemente HTML sau DOM.
În acest exemplu, făcând clic pe butonul se înlocuiește cu un element div cu același text, care a fost pe buton.
Deschideți exemplul în noua fereastră și uita-te la codul sursă
.replaceAll (selector)
Înlocuiesc toate elementele definite în selectorul, menționat (i) elemente.
Această caracteristică completează replaceWith (). care rezolvă aceeași problemă în sens invers.
În acest exemplu, vom înlocui toate punctele din textul din tag-uri b.
Deschideți exemplul în noua fereastră și uita-te la codul sursă
Înlătură toate nodurile copil (inclusiv nodurile text) dintr-un set de elemente.
De asemenea, elimină toate manipulare eveniment și datele stocate în memoria cache interne.
În acest exemplu, un clic pe butonul de a șterge toate nodurile copil din toate punctele.
Deschideți exemplul în noua fereastră și uita-te la codul sursă
.îndepărtați (expr)
Șterge toate elementele selectate ale DOM.
Cu toate acestea, ele nu vor fi eliminate din obiect jQuery, permițându-vă să le utilizeze în viitor.
Opțional, se poate utiliza filtrul expr expresie.
În acest exemplu, făcând clic pe butonul, vom șterge toate punctele din DOM.
Deschideți exemplul în noua fereastră și uita-te la codul sursă
Elimină elementele mamă ale elementelor selectate în același timp, conținutul lor va rămâne în vigoare. Luați în considerare pagina care conține următorul text: După pagina cererii va funcționa după cum urmează:
.clona ([withDataAndEvents]): obiect jQuery
withDataAndEvents - determină dacă pentru a copia date manipulatorii și evenimente care sunt instalate pe elementele copiate sunt necesare. În mod implicit, acest parametru este fals.
În acest exemplu, vom clona toate elementele b (și selectați clonată) și lipiți-le înainte de paragrafe.
Deschideți exemplul în noua fereastră și uita-te la codul sursă
În acest exemplu, vom crea un buton care se poate clona și au clonele ele însele sunt, de asemenea capabile de aceeași clonă. Um, încercați cele mai bune dvs. ponazhimat acest buton.
Deschideți exemplul în noua fereastră și uita-te la codul sursă
.add (selector)
Adaugă elementele specificate la setul existent de elemente.
Elementele adăugate sunt căutate pe pagină folosind selectorul selectorului specificat.
.add (elemente)
Elementele adăugate sunt definite de către unul sau mai multe elemente DOM-(matrice).
.add (html)
Elementele adăugate set html text.
add (selector, context)
Elementele adăugate sunt căutate pe pagină folosind selectorul selectorul specificat, în zona definită de context.
Zona de căutare poate fi setată DOM-Element, jQuery-obiect sau a unui obiect de document.
.Conținutul ()
Returnează toți copiii din membrii selectați, precum și conținutul de text.
Spre deosebire de .children metodă similară (). În această metodă, rezultatul va fi inclus în blocurile de text situate direct în elementele selectate.
De exemplu, o pagină care conține următorul HTML text a acestor două metode vor returna rezultate diferite:
Se întoarce elementele stabilite anterior în lanțul actual de metode.
Exemplu: Dar cum poate fi folosit: