Modificarea conținutului elementelor în jQuery
În acest tutorial, vom încerca să schimbăm conținutul elementelor din jQuery.
Deci, cea mai comună operațiune este de a schimba conținutul elementelor. În afara bibliotecii jQuery, proprietatea innerHTML a obiectului document este utilizată în acest scop. De exemplu, pentru a insera un fragment nou într-un element cu divl identifier, puteți utiliza următorul cod.
Biblioteca jQuery vă permite de asemenea să utilizați această proprietate. Pentru a face acest lucru, găsim elementul folosind funcția $ () și apoi convertim colecția de elemente jQuery într-un set de elemente DOM.
De asemenea, puteți utiliza metoda get () pentru acest scop.
În biblioteca jQuery, următoarele metode sunt folosite pentru a modifica conținutul elementelor.
- text ([3]) - vă permite să obțineți sau să setați textul unui element. Dacă parametrul nu este specificat, atunci metoda returnează o valoare text fără etichete. Dacă există mai multe elemente în colecție, toate valorile vor fi returnate ca un șir. Dacă doriți să preluați numai primul element din colecție, puteți utiliza metoda eq ().
De asemenea, puteți restricționa setul utilizând selectorul:
Dacă specificați un șir ca parametru, acesta înlocuiește conținutul tuturor elementelor din colecție. Dacă în șir există caractere speciale, ele vor fi înlocuite cu echivalente HTML.
În acest exemplu, linia din codul sursă va arăta astfel.
- html ([3nachie]) - vă permite să obțineți sau să setați codul HTML al elementului. Dacă parametrul nu este specificat, atunci metoda returnează o valoare împreună cu etichetele. Dacă în colecție există mai multe elemente, va fi returnată numai valoarea primului element.
Dacă specificați codul HTML ca parametru, acesta va înlocui conținutul tuturor elementelor colecției, iar modelul de obiect de document va fi actualizat. Vom afișa codul HTML în toate etichetele div.
Dacă doriți să modificați valoarea numai primului element din colecție, puteți utiliza metoda eq () sau selectorul. mai întâi.
- append (Expression) - adaugă o expresie la sfârșitul conținutului elementului selectat. Ca parametru, puteți specifica cod HTML, un element DOM sau o colecție de elemente jQuery. De exemplu, adăugați codul HTML la sfârșitul elementului.
Rezultatul va arăta astfel.
Acum adăugați elementul DOM.
- prepend (Expresie) - adaugă o Expresie la începutul conținutului elementului selectat. Ca parametru, puteți specifica cod HTML, un element DOM sau o colecție de elemente jQuery. Metoda este complet identică cu metoda appendO, cu excepția faptului că adaugă o expresie nu la sfârșitul elementului, ci la începutul acestuia. De exemplu, adăugați codul HTML la începutul elementului.
- appendTo (Selector) - adaugă o colecție de elemente jQuery la sfârșitul tuturor elementelor care se potrivesc selectorului specificat. De exemplu, adăugați codul HTML la sfârșitul elementului cu divulatorul de identificare.
După cum puteți vedea din exemplu, am modificat parametrii în locații și am folosit metoda append () în locul metodei appendTo ().
- prependTo (Selector) - adaugă o colecție de elemente jQuery la începutul tuturor elementelor care se potrivesc cu selectorul specificat. De exemplu, adăugați codul HTML la începutul elementului cu identificatorul divl.
Cum să adăugați conținut înainte sau după un element
În secțiunea anterioară, am analizat modificarea conținutului intern al unui element. Biblioteca jQuery oferă, de asemenea, metode care vă permit adăugarea oricărui conținut înainte sau după element. Să luăm în considerare aceste metode.
- ater (Expression) - adaugă o expresie după toate elementele colecției. Ca parametru, puteți specifica cod HTML, un element DOM sau o colecție de elemente jQuery. De exemplu, adăugați codul HTML după element.
Acum adăugați elementul creat al colecției jQuery. $ ("# divl") după ($ ("Text nou„));
- înainte de (Expression) - adaugă o expresie înainte de toate elementele colecției. Ca parametru, puteți specifica cod HTML, un element DOM sau o colecție de elemente jQuery. Metoda este complet identică cu metoda after (), cu excepția faptului că adaugă o expresie nu înaintea elementului, ci înaintea acestuia. De exemplu, adăugați codul HTML înaintea elementului.
Rezultatul va arăta astfel.
Text nou
UTILIZARE Rezultatul descrierii (alt) de sub fotografie
- insertAfter (Selector) - adaugă o colecție de elemente jQuery după toate elementele care se potrivesc cu selectorul specificat. De exemplu, adăugați codul HTML după elementul cu elementul de identificare divl.
Rezultatul va fi același ca și utilizând metoda after ().
$ ("# divl") după ("Text nou„);
- insertBefore (Selector) - adaugă o colecție de elemente jQuery înainte de toate elementele care se potrivesc selectorului specificat. De exemplu, adăugăm codul HTML înaintea elementului cu elementul de identificare divl.
Rezultatul va fi același ca și folosind metoda previous ().
$ ("# divl") înainte de ("Text nou„);
Toate elementele colecției pot fi plasate în orice alt element. Următoarele metode sunt folosite pentru a cuibui elemente.
- wraplnner (element HTML sau element BOM) - include conținutul intern al fiecărui element de colectare dintr-un alt element. De exemplu, selectați conținutul tuturor etichetelor div.
Același efect poate fi obținut prin trecerea unui element DOM ca parametru.
De asemenea, puteți transfera un element creat cu funcția $ ().
- wrap (element HTML sau element BOM) - introduce fiecare element al colecției într-un alt element.
Rezultatul este următorul:
- wrapAll (element HTML sau element POM) - colectează toate elementele colecției într-un singur loc și le pune într-un alt element.
Rezultatul va arăta astfel.
Unele texte 1
După cum puteți vedea din exemplu, toate elementele colecției au fost plasate după primul element și sunt plasate în interiorul etichetei u.
Mutați și clonați elementele
Dacă parametrul înainte de metode (), Prepend (), adăugați () și după () pentru a specifica o colecție de elemente existente jQuery, acestea vor fi mutate. În cazul în care elementele sunt inserate depinde de metoda particulară: înainte de a () (element frontal) rgepend () (la începutul conținutului), adăugați () (conținut în final), după () (după elementul). De exemplu, găsim toate linkurile de pe pagină și le adăugăm la sfârșitul elementului.
Ca rezultat, toate linkurile vor fi mutate la sfârșitul conținutului elementului cu divl identifier și vom obține următorul cod HTML.
Același efect poate fi obținut cu ajutorul metodelor insertBefore (), prependTo (), appendTo () și insertAfter (). În cazul în care sunt inserate elemente depinde de metoda particulară: insertBefore O (elementul frontal), prependTo () (la începutul conținutului), appendTo () (conținut în final), insertAfter () (după elementul). De exemplu, găsim toate link-urile de pe pagină și le adăugăm înaintea elementului.
În consecință, toate linkurile vor fi plasate imediat înaintea elementului cu identificatorul divl și vom obține următorul cod HTML.
Biblioteca jQuery vă permite să creați copii ale elementelor existente (clona). În acest scop, se folosește metoda clonei ([true]). Dacă parametrul este setat la adevărat, procesatorii de evenimente vor fi de asemenea clonați. Să creați o copie a primului link din document și apoi să îl ieșim după elementul cu identificatorul divl. $ ("a"). eq (0) .clone (). introduceAfter ("# divl");
Rezultatul va arăta astfel.
Ștergeți conținutul și ștergeți un element
Următoarele metode sunt utilizate pentru a șterge conținutul și a șterge elementul.
- empty () - șterge toate subelementele elementului curent.
După cum puteți vedea din exemplu, după ștergerea conținutului elementului cu identificatorul divl, elementul în sine este încă accesibil pentru manipulare.
- remove ([Selector]) - elimină complet elementele din modelul de obiect document.
Acest exemplu demonstrează elementul lipsă după ce a făcut clic pe butonul Ștergere. Dacă faceți clic pe butonul Număr elemente pentru prima dată, obținem numărul 1 și dacă faceți clic pe el după eliminarea elementului, obținem numărul 0.
USEFUL Popup Magnific
Dacă colecția conține mai mult de un element, atunci toate elementele vor fi șterse. Metoda remove () vă permite să specificați o condiție suplimentară care trebuie îndeplinită de elementele care trebuie șterse. De exemplu, ștergeți toate legăturile cu extensia. php.
Modificarea conținutului elementelor
Am învățat deja cum să obținem colecția de elemente și accesul la elementul său individual. Acum, să examinăm diferitele metode care vă permit să modificați proprietățile și valorile elementelor din colecție. Unele metode pe care le-am folosit deja în exemplele noastre pentru a scoate rezultatul sau pentru a schimba proprietățile elementelor.
Cea mai obișnuită operațiune este de a schimba conținutul elementelor. În afara bibliotecii jQuery, proprietatea innerHTML a obiectului document este utilizată în acest scop. De exemplu, pentru a insera un fragment nou într-un element cu divl identifier, puteți utiliza următorul cod.
Biblioteca jQuery vă permite de asemenea să utilizați această proprietate. Pentru a face acest lucru, găsim elementul folosind funcția $ () și apoi convertim colecția de elemente jQuery într-un set de elemente DOM.
De asemenea, puteți utiliza metoda get () pentru acest scop.
În biblioteca jQuery, următoarele metode sunt folosite pentru a modifica conținutul elementelor.
- text ([3]) - vă permite să obțineți sau să setați textul unui element. Dacă parametrul nu este specificat, atunci metoda returnează o valoare text fără etichete. Dacă există mai multe elemente în colecție, toate valorile vor fi returnate ca un șir. Dacă doriți să preluați numai primul element din colecție, puteți utiliza metoda eq ().
De asemenea, puteți restricționa setul utilizând selectorul:
Dacă specificați un șir ca parametru, acesta înlocuiește conținutul tuturor elementelor din colecție. Dacă în șir există caractere speciale, ele vor fi înlocuite cu echivalente HTML.
În acest exemplu, linia din codul sursă va arăta astfel.
- html ([3nachie]) - vă permite să obțineți sau să setați codul HTML al elementului. Dacă parametrul nu este specificat, atunci metoda returnează o valoare împreună cu etichetele. Dacă în colecție există mai multe elemente, va fi returnată numai valoarea primului element.
Dacă specificați codul HTML ca parametru, acesta va înlocui conținutul tuturor elementelor colecției, iar modelul de obiect de document va fi actualizat. Vom afișa codul HTML în toate etichetele div.
Dacă doriți să modificați valoarea numai primului element din colecție, puteți utiliza metoda eq () sau selectorul. mai întâi.
- append (Expression) - adaugă o expresie la sfârșitul conținutului elementului selectat. Ca parametru, puteți specifica cod HTML, un element DOM sau o colecție de elemente jQuery. De exemplu, adăugați codul HTML la sfârșitul elementului.
Rezultatul va arăta astfel.
Acum adăugați elementul DOM.
- prepend (Expresie) - adaugă o Expresie la începutul conținutului elementului selectat. Ca parametru, puteți specifica cod HTML, un element DOM sau o colecție de elemente jQuery. Metoda este complet identică cu metoda append (), cu excepția faptului că adaugă o Expresie nu la sfârșitul elementului, ci la începutul acestuia. De exemplu, adăugați codul HTML la începutul elementului.
Rezultatul va arăta astfel.
text
- appendTo (Selector) - adaugă o colecție de elemente jQuery la sfârșitul tuturor elementelor care se potrivesc selectorului specificat. De exemplu, adăugați codul HTML la sfârșitul elementului cu divulatorul de identificare.
Rezultatul va fi același ca și metoda append ().
$ ("# divl") adăugați ("Text nou„);
După cum puteți vedea din exemplu, am modificat parametrii în locații și am folosit metoda append () în locul metodei appendTo ().
- prependTo (Selector) - adaugă o colecție de elemente jQuery la începutul tuturor elementelor care se potrivesc cu selectorul specificat. De exemplu, adăugați codul HTML la începutul elementului cu identificatorul divl.
Rezultatul va fi același ca și metoda metodei prepend ().
$ ("# divl") prepend ("Text nou„);
Scriptarea imaginilor în etichete + excluderea altor clase + eliminarea unor atribute
Trimiteți-le prietenilor: