DOM manipulacija s jQueryjem

DOM stabloThe DOM stablo hijerarhijska je organizacija sadržaja našeg dokumenta HTMLTo je vrlo korisno pri identificiranju različitih elemenata koji su sadržani u spomenutom dokumentu, budući da s jedinstvenim identifikatorima možemo dodijeliti različita imena strukturama koje, unatoč sličnim oznakama, imaju različit cilj.
Problem u prošlosti bio je u tome što nije bilo moguće lako proći kroz DOM stablo u stvarnom vremenu jer su se u njemu morale stvoriti glomazne rutine i funkcije Javascript, međutim sve se to promijenilo pojavom jQuery. Ovaj je okvir pomogao u pružanju pristupa korištenju Javascript za nestručnjake to mu je ponovno podiglo popularnost.
Jedna od najzanimljivijih stvari koje se mogu činiti vrlo kompliciranima je odabir djeca elementaDok govorimo o hijerarhijskoj strukturi, možemo govoriti o obitelji u kojoj je otac najviši element, a njegova djeca elementi kojima se upravlja pod njegovim plaštem ili zaštitom.
Recimo, na primjer, da imamo neuređen popis ili element , logično je misliti da su njihova djeca elementi koju može sadržavati, ako želimo odabrati element Određeni popis može se činiti kao vrlo složen zadatak, ali s jQuery možemo to postići na vrlo jednostavan i čist način.
MetodeDa bismo to učinili, moramo samo dati jedinstveni identifikator našem roditeljskom elementu, a zatim pozvati metodu na njegovom biraču djeca (), ovim ćemo dobiti poziciju na koju možemo ići s metodom svaki () svako njegovo dijete.
Pogledajmo u sljedećem kodu mali primjer onoga o čemu govorimo:

 DOM manipulacija s JQueryjem

Sin 1
Sin 2
Sin 3

Probati 

Prije svega počinjemo uključivanjem jQuery iz CDN službeni, s tim nemamo potrebu pohranjivati ​​datoteku s izvornim kodom na naše računalo, pa s preglednikom i vezom na Internet možemo koristiti ovaj primjer.
Zatim stvaramo malu skriptu gdje to označavamo kada kliknete na element s ID -om Početak kod iznutra se izvršava.
Kôd koji se izvršava jednostavno izražava da se element s id -om mora pretraživati tata i na ovaj selektor primjenjujemo metodu djeca () da locira svoju djecu i na kraju metodom svaki () Prolazimo kroz svaki od njih, u slučaju koda postoje tri koja će nam omogućiti putovanje, a to bi nam trebalo pokazati tekst koji svaki sadrži. Pogledajmo kako gornji kôd radi u našem pregledniku:

Nakon klika na gumb probati možemo vidjeti prvu Upozorenje:

POVEĆAJTE

Ako nastavimo zatvarati upozorenja, vidjet ćemo sve podređene elemente sadržane u hijerarhijskoj strukturi:

POVEĆAJTE

Kao što smo mogli vidjeti, rukovanje elementima u strukturi naše stranice nije nimalo komplicirano, ovo je samo mali primjer koji nam otvara usta onoga što ćemo nastaviti vidjeti u ovom vodiču.
Iako je pronalaženje podređenih elemenata vrlo korisno, postoji metoda koja nam omogućuje izravnije pretraživanje kroz ići, valovi lekcije. Pozivamo se na metodu pronaći (), ova metoda će pronaći sva podudaranja podređenih elemenata birača koji ga doziva.
S ovim možemo biti sjajni i nazovite a pronaći () na njemu za lociranje klasa ili id ​​-a, s čime dolazimo do sljedeće točke.
Stilovi ubrizgavanjaNakon što smo pronašli željenu stavku u SUNCE, mnogo puta ne želimo ispisati njegov sadržaj ako ga na neki način ne istaknemo, zanimljiv je način dodati stil navedenom elementu, što će nam omogućiti manipulaciju CSS naše stranice neizravno i kako bismo mogli istaknuti važne elemente na njoj i tako možemo vidjeti nešto dinamičnije u našem dokumentu HTML.
Pogledajmo u sljedećem kodu kako ćemo implementirati uporabu metode pronaći () a zatim i stilska injekcija na pronađenim elementima, na ovaj način možemo se približiti nečemu što možemo dati korisnim u stvarnom životu:

 DOM manipulacija s JQueryjem

Sin 1
Sin 2
Sin 3

Probati 

U ovom kodu, ako pogledamo, imamo nešto vrlo slično prethodnom triku, ono što smo promijenili je da prije svega sadržaj oznake ovdje umjesto prelaska preko djece elementa koristimo metodu pronaći () za lociranje elementa s klasom istaknuti i na taj element s metodom css () U njega ćemo ubaciti stilove, u ovom slučaju postavit ćemo ga kao crvenu boju pozadine.
Pogledajmo kako to izgleda u našem pregledniku kada kliknemo na gumb probati:

Baš kao što smo uspjeli locirati dijete elementa, možemo postići učinak u suprotnom smislu hijerarhije, tj. sine, možemo locirati oca. To je vrlo korisno na dugim popisima koji se generiraju dinamički, jer na ovaj način možemo istaknuti ili koristiti roditelje prema našim potrebama.
Roditelji () metodaZa to imamo metodu roditelji () da na sličan način kao djeca () locira roditelje birača koji se poziva. Dodamo li ovome svaku () metodu, donijet ćemo svo nasljeđivanje elementa, na primjer ako je donijet ćemo element a ako idemo dalje po hijerarhiji do elementa i tako dalje dok ne dođemo do elementa budući da su po hijerarhiji svi oni roditelji po načinu na koji su sadržani.
Pogledajmo u sljedećem kodu kako možemo napraviti skriptu jQuery što nam omogućuje postizanje ovog cilja prikazivanja svih roditelja odabranog elementa:

 DOM manipulacija s JQueryjem

Sin 1
Sin 2
Sin 3

Probati 

Struktura je vrlo slična prethodnim primjerima, međutim ovdje unosimo promjenu, ovaj put koristimo klasu istaknuti kao selektor i primjenjujemo metodu roditelji () a zatim sa svaki () možemo proći hijerarhiju iznutra prema van.
Pogledajmo kako gornji kod izgleda kada ga pokrenemo u svom pregledniku:

POVEĆAJTE

Kao i prethodni primjer sve dok zatvaramo Upozorenja vidjet ćemo sve roditelje elementa dok ne dođemo do HTML.
Prethodni trik pomaže nam da uspostavimo genealoško stablo elementa, možda će nam pomoći da otklonimo pogreške u svom HTML, ali što se događa ako želimo dobiti određenog roditelja, na primjer ako imamo nekoliko unosa, ali želimo da se istakne roditelj određenog roditelja.
Ne bismo se trebali brinuti, za ovaj slučaj imamo metodu roditelji do (), s ovim možemo odrediti točku dolaska i možemo napraviti a HTML injekcija Kako bismo istaknuli cijeli blok, pogledajmo sljedeći kod u kojem smo primijenili ovo znanje:

 DOM manipulacija s JQueryjem

Sin 1
Sin 2
Sin 3

Probati 

Ako primijetimo da je ovaj kôd mala varijacija prethodnog, glavna promjena događa se u pozivu metode koju smo upravo objasnili roditelji do () do kojih smo prošli div, gdje će prestati traženje roditeljskih elemenata selektora na koji utječemo.
Da bismo pokazali da sve funkcionira, ubrizgali smo malo HTML Da bismo obojeni dio označili crvenom bojom, pogledajmo kako ovo izgleda u našem pregledniku kada kliknemo na probati:

Zatim vidimo da je samo dio s div -om onaj koji je obojen crvenom bojom, pokazujući tako da smo zaustavili traženje roditelja u određenom elementu, čak i ako imamo izravnog roditelja kao što je element što nam pokazuje moć pretraživanja DOM stablo.
Ovim smo završili naš vodič, to je samo mala demonstracija sve snage jQuery manipulirati SUNCE od naših HTML, važno je da moramo puno vježbati i vrlo dobro čitati dokumentaciju jer ćemo s njom moći steći dodatna znanja i resurse kako bismo mogli povećati svoju razinu razvoja.Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod