DOM -manipulasjon med jQuery

DOM -treDe DOM -tre er den hierarkiske organisasjonen av innholdet i dokumentet vårt HTMLDette er veldig nyttig når vi skal identifisere de forskjellige elementene i dokumentet, siden vi med unike identifikatorer kan tildele forskjellige navn til strukturer som, til tross for lignende etiketter, har et annet mål.
Problemet tidligere var at det ikke var lett å gå gjennom DOM -tre i sanntid, ettersom vanskelige rutiner og funksjoner måtte opprettes i Javascript, men alt dette endret seg med utseendet på jQuery. Dette rammeverket bidro til å gi en tilnærming til bruken av Javascript for ikke-eksperter fikk det hans popularitet til å stige igjen.
En av de mest interessante tingene som kan virke veldig kompliserte å gjøre, er å velge barn av et elementNår vi snakker om en hierarkisk struktur, kan vi snakke om en familie, der faren er det høyeste elementet og barna hans er elementer som styres under hans kappe eller beskyttelse.
La oss si at vi for eksempel har en uordnet liste eller element , det er logisk å tro at barna deres er elementene som den kan inneholde, hvis vi vil velge et element En bestemt liste kan virke som en veldig kompleks oppgave, men med jQuery vi kan oppnå det på en veldig enkel og ren måte.
MetoderFor å gjøre dette trenger vi bare å gi en unik identifikator til overordnet element og deretter kalle metoden på velgeren barn (), med dette vil vi få den posisjonen vi kan gå til med metoden Hver () hvert av barna hans.
La oss se i den følgende koden et lite eksempel på det vi snakker om:

 DOM -manipulasjon med JQuery

Sønn 1
Sønn 2
Sønn 3

Prøve 

Først av alt begynner vi med å inkludere jQuery fra CDN offisiell, med dette trenger vi ikke å lagre filen med kildekoden på datamaskinen vår, så med en nettleser og tilkobling til Internett vi kan bruke dette eksemplet.
Deretter lager vi et lite skript der vi indikerer at når du klikker på elementet med id Start koden inne kjøres.
Koden som skal kjøres uttrykker ganske enkelt at elementet med id må søkes pappa og på denne velgeren bruker vi metoden barn () å finne barna sine og til slutt med metoden Hver () Vi går gjennom hver enkelt av dem, i tilfelle av koden er det tre som lar oss gjøre reisen, og dette bør vise oss teksten som hver enkelt inneholder. La oss se hvordan koden ovenfor fungerer i nettleseren vår:

Etter å ha klikket på knappen prøve vi kan se den første Varsling:

FORSTØRRE

Hvis vi fortsetter å lukke varslene, ser vi alle de underordnede elementene i den hierarkiske strukturen:

FORSTØRRE

Som vi kunne se, er håndteringen av elementene i strukturen på siden vår ikke komplisert i det hele tatt, dette er bare et lite eksempel som gir oss en åpen munn på hva vi vil fortsette å se i denne opplæringen.
Selv om det å finne barnelementer er ganske nyttig, er det en metode som lar oss gjøre et mer direkte søk gjennom gå, bølger leksjoner. Vi viser til metoden finne (), vil denne metoden finne alle treffene til barnelementene i velgeren som påberoper den.
Med dette kan vi ha en flott og ring a finne () på den for å finne klasser eller ID spesielt, som vi kommer til neste punkt.
Injiser stilerNår vi har funnet ønsket element i SOL, mange ganger ønsker vi ikke å skrive ut innholdet hvis vi ikke markerer det på en eller annen måte, en interessant måte er å legge til en stil til elementet, dette vil tillate oss å manipulere CSS på siden vår indirekte og for å kunne markere viktige elementer i den, og dermed kan vi se noe mer dynamisk i dokumentet vårt HTML.
La oss se i følgende kode hvordan vi skal implementere bruken av metoden finne () og deretter stil injeksjon på elementene som er funnet, på denne måten kan vi komme nærmere noe som vi kan gi nyttig i det virkelige liv:

 DOM -manipulasjon med JQuery

Sønn 1
Sønn 2
Sønn 3

Prøve 

I denne koden, hvis vi ser, har vi noe som ligner det forrige trikset, det vi har endret er at i utgangspunktet innholdet i etiketten her i stedet for å krysse barna til et element, bruker vi metoden finne () for å finne et element med klassen fremheve og til det elementet med metoden css () Vi skal injisere stiler i den, i dette tilfellet vil vi sette den som en rød bakgrunnsfarge.
La oss se hvordan det ser ut i nettleseren vår når vi klikker på knappen prøve:

Akkurat som vi klarte å finne et barn av et element, kan vi oppnå effekten i motsatt forstand av hierarkiet, det vil si fra en sønn kan vi finne faren. Dette er veldig nyttig i lange lister som genereres dynamisk, siden vi på denne måten kan markere eller bruke foreldrene i henhold til våre behov.
Foreldre () metodeFor dette har vi metoden foreldre () det på en lignende måte barn () lokaliserer forelderen til velgeren som påkalles. Hvis vi legger til hver () -metoden til dette, tar vi med all arv av elementet, for eksempel hvis det er en vi tar med elementet og hvis vi går videre opp i hierarkiet til elementet og så videre til vi når elementet siden alle er foreldre etter hierarki på den måten de er inneholdt.
La oss se i følgende kode hvordan vi kan lage et skript med jQuery som lar oss nå dette målet om å vise alle foreldrene til vårt valgte element:

 DOM -manipulasjon med JQuery

Sønn 1
Sønn 2
Sønn 3

Prøve 

Strukturen er veldig lik de tidligere eksemplene, men her gjør vi en endring, denne gangen bruker vi klassen fremheve som velger, og vi bruker metoden foreldre () og deretter med hver () kan vi gå gjennom hierarkiet fra innsiden til utsiden.
La oss se hvordan koden ovenfor ser ut når vi kjører den i nettleseren vår:

FORSTØRRE

Som forrige eksempel så lenge vi fortsetter å lukke Varsler vi vil se alle foreldrene til elementet til vi kommer til HTML.
Det forrige trikset hjelper oss med å etablere et slektstre av et element, kanskje det vil hjelpe oss å feilsøke vårt HTML, men hva skjer hvis vi ønsker å skaffe en spesifikk forelder, for eksempel hvis vi har flere oppføringer, men vi vil at forelderen til en bestemt skal fremheves.
Vi skal ikke bekymre deg, for denne saken har vi metoden foreldre Inntil (), med dette kan vi spesifisere et ankomstpunkt, og vi kan lage en HTML -injeksjon For å markere hele blokken, la oss se følgende kode der vi har brukt denne kunnskapen:

 DOM -manipulasjon med JQuery

Sønn 1
Sønn 2
Sønn 3

Prøve 

Hvis vi merker at denne koden er en liten variasjon av den forrige, skjer hovedendringen i samtalen til metoden som vi nettopp har forklart foreldre Inntil () som vi passerte div, det er der søket etter overordnede elementer i velgeren vi påvirker vil stoppe.
For å vise at alt fungerer, har vi injisert litt HTML For å farge den markerte delen i rødt, la oss se hvordan dette ser ut i nettleseren vår når vi klikker på prøve:

Vi ser da at bare seksjonen med div er den farget i rødt, og viser dermed at vi har stoppet søket etter forelder i det spesifikke elementet, til og med å ha en direkte forelder som elementet som viser oss kraften til å søke gjennom DOM -tre.
Med dette har vi fullført opplæringen vår, det er bare en liten demonstrasjon av all kraften i jQuery å manipulere SOL fra vår HTML, det viktige er at vi må øve oss mye og lese dokumentasjonen veldig godt siden vi med den vil kunne skaffe ytterligere kunnskap og ressurser for å kunne øke utviklingsnivået vårt.Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng