DOM -manipulation med jQuery

DOM træDet DOM træ er den hierarkiske organisering af indholdet af vores dokument HTMLDette er meget nyttigt, når man identificerer de forskellige elementer, der er indeholdt i dokumentet, da vi med unikke identifikatorer kan tildele forskellige navne til strukturer, der på trods af lignende etiketter har et andet formål.
Problemet tidligere var, at det ikke var let at gå gennem DOM træ i realtid, da besværlige rutiner og funktioner skulle oprettes i Javascript, men alt dette ændrede sig med udseendet af jQuery. Denne ramme hjalp med at give en tilgang til brugen af Javascript for ikke-eksperter fik det hans popularitet til at stige igen.
En af de mest interessante ting, der kan virke meget komplicerede at gøre, er at vælge børn af et elementNår vi taler om en hierarkisk struktur, kan vi tale om en familie, hvor faderen er det højeste element, og hans børn er elementer, der styres under hans kappe eller beskyttelse.
Lad os f.eks. Sige, at vi har en uordnet liste eller element , det er logisk at tro, at deres børn er elementerne at den kan indeholde, hvis vi vil vælge et element En bestemt liste kan virke som en meget kompleks opgave, men med jQuery vi kan opnå det på en meget enkel og ren måde.
MetoderFor at gøre dette behøver vi kun at give vores forældrelement en unik identifikator og derefter kalde metoden på dens vælger børn (), med dette vil vi opnå den position, som vi kan gå til med metoden hver () hver af hans børn.
Lad os i den følgende kode se et lille eksempel på, hvad vi taler om:

 DOM -manipulation med JQuery

Søn 1
Søn 2
Søn 3

Prøv 

Først og fremmest starter vi med at inkludere jQuery fra CDN officiel, med dette har vi ikke behovet for at gemme filen med kildekoden på vores computer, så med en browser og forbindelse til Internet vi kan bruge dette eksempel.
Derefter opretter vi et lille script, hvor vi angiver det, når du klikker på elementet med id'et Start koden indeni udføres.
Koden, der skal eksekveres, udtrykker ganske enkelt, at elementet med id'et skal søges far og på denne vælger anvender vi metoden børn () at lokalisere sine børn og endelig med metoden hver () Vi gennemgår hver enkelt af dem, i tilfælde af koden er der tre, som giver os mulighed for at foretage rejsen, og dette bør vise os den tekst, som hver enkelt indeholder. Lad os se, hvordan ovenstående kode fungerer i vores browser:

Efter at have klikket på knappen prøv vi kan se det første Alert:

FORSTØRRE

Hvis vi fortsætter med at lukke advarslerne, ser vi alle de underordnede elementer i den hierarkiske struktur:

FORSTØRRE

Som vi kunne se, er håndteringen af ​​elementerne i strukturen på vores side slet ikke kompliceret, dette er bare et lille eksempel, der giver os en åben mund på, hvad vi fortsat vil se i denne vejledning.
Selvom det er ganske nyttigt at finde børneelementer, er der en metode, der giver os mulighed for at foretage en mere direkte søgning gennem gå, bølger lektioner. Vi henviser til metoden Find (), finder denne metode alle matches af de barnelementer i vælgeren, der påberåber den.
Med dette kan vi have en stor og ring til a Find () på den for at lokalisere klasser eller id især, hvormed vi kommer til det næste punkt.
Indsprøjt stilarterNår vi har fundet det ønskede element i SOL, mange gange ønsker vi ikke at udskrive dets indhold, hvis vi ikke fremhæver det på en eller anden måde, en interessant måde er at tilføje en stil til elementet, dette vil tillade os at manipulere CSS af vores side indirekte og for at kunne fremhæve vigtige elementer i den, og dermed kan vi se noget mere dynamisk i vores dokument HTML.
Lad os se i den følgende kode, hvordan vi skal implementere brugen af ​​metoden Find () og derefter stil injektion på de fundne elementer, på denne måde kan vi komme tættere på noget, som vi kan give nyttigt i det virkelige liv:

 DOM -manipulation med JQuery

Søn 1
Søn 2
Søn 3

Prøv 

I denne kode, hvis vi ser, har vi noget, der ligner det tidligere trick, hvad vi har ændret, er, at indholdet af etiketten her i første omgang i stedet for at krydse børn af et element, bruger vi metoden Find () at finde et element med klassen fremhæve og til det element med metoden css () Vi kommer til at injicere stilarter i det, i dette tilfælde vil vi indstille det som en rød baggrundsfarve.
Lad os se, hvordan det ser ud i vores browser, når vi klikker på knappen prøv:

Ligesom vi var i stand til at lokalisere et barn af et element, kan vi opnå effekten i hierarkiets modsatte betydning, det vil sige fra en søn kan vi finde faderen. Dette er meget nyttigt i lange lister, der genereres dynamisk, da vi på denne måde kan fremhæve eller bruge forældrene efter vores behov.
Forældre () metodeTil dette har vi metoden forældre () det på en lignende måde til børn () lokaliserer forælderen til vælgeren, der påberåbes. Hvis vi tilføjer hver () -metoden til dette, bringer vi al arven fra elementet, for eksempel hvis det er en vi vil bringe elementet og hvis vi går længere op i hierarkiet til elementet og så videre, indtil vi når elementet, da alle ved hierarki er forældre ved den måde, de er indeholdt på.
Lad os se i følgende kode, hvordan vi kan lave et script med jQuery der tillader os at nå dette mål om at vise alle forældre til vores valgte element:

 DOM -manipulation med JQuery

Søn 1
Søn 2
Søn 3

Prøv 

Strukturen ligner meget de tidligere eksempler, men her foretager vi en ændring, denne gang bruger vi klassen fremhæve som vælger, og vi anvender metoden forældre () og derefter med en hver () kan vi gå igennem hierarkiet indefra og udad.
Lad os se, hvordan ovenstående kode ser ud, når vi kører den i vores browser:

FORSTØRRE

Ligesom det foregående eksempel, så længe vi bliver ved med at lukke Advarsler vi vil se alle forældrene til elementet, indtil vi når det HTML.
Det forrige trick hjælper os med at etablere et elements genealogiske træ, måske hjælper det os med at fejlsøge vores HTML, men hvad sker der, hvis vi ønsker at få en bestemt forælder, for eksempel hvis vi har flere fortegnelser, men vi vil have forælderen til en bestemt forælder fremhævet.
Vi skal ikke bekymre os, for denne sag har vi metoden forældre Indtil (), med dette kan vi angive et ankomstpunkt, og vi kan lave et HTML -indsprøjtning For at markere hele blokken, lad os se følgende kode, hvor vi har anvendt denne viden:

 DOM -manipulation med JQuery

Søn 1
Søn 2
Søn 3

Prøv 

Hvis vi bemærker, at denne kode er en lille variation af den forrige, sker den største ændring i opkaldet til metoden, som vi lige har forklaret forældre Indtil () hvortil vi passerede div, hvor søgen efter overordnede elementer i vælgeren, vi påvirker, stopper.
For at vise, at alt virker, har vi injiceret lidt HTML For at farve det markerede afsnit i rødt, lad os se, hvordan dette ser ud i vores browser, når vi klikker på prøv:

Vi ser derefter, at kun sektionen med div er den, der er farvet i rødt, og dermed viser, at vi har stoppet søgningen efter forælderen i det specifikke element, selv med en direkte forælder som elementet som viser os kraften ved at søge igennem DOM træ.
Med dette har vi afsluttet vores tutorial, det er bare en lille demonstration af al kraften i jQuery at manipulere SOL fra vores HTML, det vigtige er, at vi skal øve os meget og læse dokumentationen meget godt, da vi med den vil kunne opnå yderligere viden og ressourcer for at kunne øge vores udviklingsniveau.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt