Manipularea DOM cu jQuery

Copac DOM Copac DOM este organizarea ierarhică a conținutului documentului nostru HTMLAcest lucru este foarte util atunci când identificăm diferitele elemente care sunt conținute în documentul menționat, deoarece cu identificatori unici putem atribui nume diferite structurilor care, în ciuda etichetelor similare, au un obiectiv diferit.
Problema în trecut a fost că nu era posibil să mergi cu ușurință prin Copac DOM în timp real, deoarece rutinele și funcțiile greoaie trebuiau create în Javascript, cu toate acestea, toate acestea s-au schimbat odată cu apariția lui jQuery. Acest cadru a contribuit la furnizarea unei abordări a utilizării Javascript pentru non-experți, popularitatea sa a crescut din nou.
Unul dintre cele mai interesante lucruri care pot părea foarte complicate de făcut este să selectați copii ai unui elementCând vorbim despre o structură ierarhică, putem vorbi despre o familie, în care tatăl este elementul cel mai înalt și copiii săi sunt elemente care sunt conduse sub mantia sau protecția sa.
Să presupunem, de exemplu, că avem o listă sau un element neordonat , este logic să credem că copiii lor sunt elementele că poate conține, dacă dorim să selectăm un element O anumită listă poate părea o sarcină foarte complexă, dar cu jQuery o putem realiza într-un mod foarte simplu și curat.
MetodePentru a face acest lucru, trebuie doar să dăm un identificator unic elementului nostru părinte și apoi să apelăm metoda la selectorul său copii (), cu aceasta vom obține poziția pe care putem merge cu metoda fiecare () fiecare dintre copiii săi.
Să vedem în următorul cod un mic exemplu despre ceea ce vorbim:

 Manipularea DOM cu JQuery

Fiul 1
Fiul 2
Fiul 3

Încercați 

În primul rând începem prin a include jQuery din CDN oficial, cu aceasta nu avem nevoie să stocăm fișierul cu codul sursă pe computerul nostru, deci cu un browser și conexiune la Internet putem folosi acest exemplu.
Apoi creăm un mic script în care îl indicăm atunci când faceți clic pe elementul cu id-ul start codul din interior este executat.
Codul de executat exprimă pur și simplu că trebuie căutat elementul cu ID-ul tata iar acestui selector aplicăm metoda copii () pentru a-și localiza copiii și în cele din urmă cu metoda fiecare () Parcurgem fiecare dintre ele, în cazul codului sunt trei care ne vor permite să facem călătoria și acest lucru ar trebui să ne arate textul pe care îl conține fiecare. Să vedem cum funcționează codul de mai sus în browserul nostru:

După ce faceți clic pe buton încercați îl putem vedea pe primul Alerta:

MARI

Dacă continuăm să închidem alertele, vom vedea toate elementele secundare conținute în structura ierarhică:

MARI

După cum am putut vedea, manipularea elementelor din structura paginii noastre nu este deloc complicată, acesta este doar un mic exemplu care ne oferă o gură deschisă a ceea ce vom vedea în continuare în acest tutorial.
Deși găsirea elementelor copil este destul de utilă, există o metodă care ne permite să facem o căutare mai directă prin merge, valuri lecții. Ne referim la metodă găsi (), această metodă va găsi toate potrivirile elementelor copil ale selectorului care o invocă.
Cu aceasta putem avea o mare și sunați la a găsi () pe el pentru a localiza clase sau id în special, cu care ajungem la punctul următor.
Injectați stiluriOdată ce am găsit elementul dorit în SOARE, de multe ori nu dorim să imprimăm conținutul său dacă nu îl evidențiem într-un fel, un mod interesant este să adăugăm un stil elementului menționat, acest lucru ne va permite să manipulăm CSS ale paginii noastre în mod indirect și să putem evidenția elemente importante din ea și astfel putem vedea ceva mai dinamic în documentul nostru HTML.
Să vedem în următorul cod cum vom implementa utilizarea metodei găsi () și apoi injectare stil pe elementele găsite, în acest fel ne putem apropia de ceva pe care îl putem oferi util în viața reală:

 Manipularea DOM cu JQuery

Fiul 1
Fiul 2
Fiul 3

Încercați 

În acest cod, dacă ne uităm, avem ceva foarte similar cu trucul anterior, ceea ce am schimbat este că, în primul rând, conținutul etichetei aici, în loc să traversăm copiii unui element, folosim metoda găsi () pentru a localiza un element cu clasa a scoate in evidenta și la acel element cu metoda css () Vom injecta stiluri în el, în acest caz îl vom seta ca o culoare de fundal roșie.
Să vedem cum arată în browserul nostru după ce facem clic pe buton încercați:

Așa cum am reușit să localizăm un copil al unui element, putem obține efectul în sensul opus al ierarhiei, adică dintr-un fiule, îl putem localiza pe tată. Acest lucru este foarte util în listele lungi care sunt generate dinamic, deoarece în acest fel putem evidenția sau folosi părinții în funcție de nevoile noastre.
Metoda Parents ()Pentru aceasta avem metoda parinti () că într-un mod similar cu copii () localizează părintele selectorului invocat. Dacă adăugăm metoda each () la aceasta, vom aduce toată moștenirea elementului, de exemplu dacă este o vom aduce elementul și dacă mergem mai sus ierarhia la element și așa mai departe până când ajungem la element, deoarece prin ierarhie toți sunt părinți prin modul în care sunt conținuți.
Să vedem în următorul cod cum putem crea un script cu jQuery care ne permite să atingem acest obiectiv de a arăta tuturor părinților elementului ales:

 Manipularea DOM cu JQuery

Fiul 1
Fiul 2
Fiul 3

Încercați 

Structura este foarte asemănătoare cu exemplele anterioare, totuși aici facem o schimbare, de data aceasta folosim clasa a scoate in evidenta ca selector și aplicăm metoda parinti () și apoi cu câte un () putem parcurge ierarhia de la interior la exterior.
Să vedem cum arată codul de mai sus când îl rulăm în browserul nostru:

MARI

Ca și exemplul anterior, atâta timp cât continuăm să închidem Alerte vom vedea toți părinții elementului până vom ajunge la HTML.
Trucul anterior ne ajută să stabilim arborele genealogic al unui element, poate că ne va ajuta să-l depanăm HTML, dar ce se întâmplă dacă dorim să obținem un anumit părinte, de exemplu dacă avem mai multe listări, dar vrem să fie evidențiat părintele unui anume.
Nu ar trebui să ne facem griji, pentru acest caz avem metoda părinți Până la (), cu aceasta putem specifica un punct de sosire și putem face un Injecție HTML Pentru a evidenția întregul bloc, să vedem următorul cod în care am aplicat aceste cunoștințe:

 Manipularea DOM cu JQuery

Fiul 1
Fiul 2
Fiul 3

Încercați 

Dacă observăm că acest cod este o ușoară variație a celui anterior, schimbarea principală se întâmplă în apelul la metoda pe care tocmai am explicat-o părinți Până la () la care am trecut div, unde se va opri căutarea elementelor părinte ale selectorului pe care îl afectăm.
Pentru a arăta că totul funcționează, am injectat puțin HTML Pentru a colora secțiunea marcată în roșu, să vedem cum arată acest lucru în browserul nostru atunci când facem clic pe încercați:

Vedem apoi că doar secțiunea cu div este cea colorată în roșu, arătând astfel că am oprit căutarea părintelui în elementul specific, chiar având un părinte direct, cum ar fi elementul ceea ce ne arată puterea căutării prin Copac DOM.
Cu aceasta ne-am terminat tutorialul, este doar o mică demonstrație a întregii puteri a jQuery pentru a manipula SOARE de la noi HTML, important este că trebuie să exersăm foarte mult și să citim foarte bine documentația, deoarece odată cu aceasta vom putea obține cunoștințe și resurse suplimentare pentru a ne putea crește nivelul de dezvoltare.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv