DOM -manipulation med jQuery

DOM -trädDe DOM -träd är den hierarkiska organisationen av innehållet i vårt dokument HTMLDetta är mycket användbart när vi identifierar de olika elementen som finns i nämnda dokument, eftersom vi med unika identifierare kan tilldela olika namn till strukturer som, trots att de har liknande etiketter, har ett annat mål.
Problemet tidigare var att det inte var möjligt att enkelt gå igenom DOM -träd i realtid, eftersom krångliga rutiner och funktioner måste skapas i Javascript, men allt detta förändrades med utseendet på jQuery. Denna ram hjälpte till att ge en metod för användning av Javascript för icke-experter fick det hans popularitet att stiga igen.
En av de mest intressanta sakerna som kan verka mycket komplicerade att göra är att välja barn till ett elementNär vi talar om en hierarkisk struktur kan vi tala om en familj, där fadern är det högsta elementet och hans barn är element som styrs under hans mantel eller skydd.
Låt oss säga att vi till exempel har en orörd lista eller element , det är logiskt att tro att deras barn är elementen som den kan innehålla, om vi vill välja ett element En viss lista kan verka som en mycket komplex uppgif.webpt, men med jQuery vi kan uppnå det på ett mycket enkelt och rent sätt.
MetoderFör att göra detta behöver vi bara ge vårt unika element en unik identifierare och sedan anropa metoden på dess väljare barn (), med detta kommer vi att få den position som vi kan gå vidare med metoden varje () vart och ett av hans barn.
Låt oss se i följande kod ett litet exempel på vad vi pratar om:

 DOM -manipulation med JQuery

Son 1
Son 2
Son 3

Prova 

Först och främst börjar vi med att inkludera jQuery från CDN officiell, med detta behöver vi inte lagra filen med källkoden på vår dator, så med en webbläsare och anslutning till Internet vi kan använda detta exempel.
Sedan skapar vi ett litet skript där vi anger det när du klickar på elementet med id Start koden inuti körs.
Koden som ska köras uttrycker helt enkelt att elementet med id måste sökas pappa och på denna väljare använder vi metoden barn () att hitta sina barn och slutligen med metoden varje () Vi går igenom var och en av dem, när det gäller koden finns det tre som gör att vi kan göra resan och detta bör visa oss texten som var och en innehåller. Låt oss se hur koden ovan fungerar i vår webbläsare:

Efter att ha klickat på knappen Prova vi kan se det första Varna:

FÖRSTORA

Om vi ​​fortsätter att stänga varningarna ser vi alla underordnade element i den hierarkiska strukturen:

FÖRSTORA

Som vi kunde se är hanteringen av elementen i strukturen på vår sida inte alls komplicerad, detta är bara ett litet exempel som ger oss en öppen mun om vad vi kommer att fortsätta se i den här självstudien.
Även om det är ganska användbart att hitta barnelement, finns det en metod som gör att vi kan göra en mer direkt sökning genom gå, vågor lektioner. Vi hänvisar till metoden hitta (), kommer denna metod att hitta alla matchningar för de barnselement i väljaren som åberopar den.
Med detta kan vi ha en stor och ring a hitta () på den för att hitta klasser eller id i synnerhet, som vi kommer till nästa punkt.
Injicera stilarNär vi har hittat önskat objekt i SOL, många gånger vill vi inte skriva ut dess innehåll om vi inte markerar det på något sätt, ett intressant sätt är att lägga till en stil till nämnda element, detta gör att vi kan manipulera CSS på vår sida indirekt och för att kunna lyfta fram viktiga element i den och därmed kan vi se något mer dynamiskt i vårt dokument HTML.
Låt oss se i följande kod hur vi ska implementera användningen av metoden hitta () och sedan stilinjektion på de hittade elementen, på så sätt kan vi komma närmare något som vi kan ge användbart i verkliga livet:

 DOM -manipulation med JQuery

Son 1
Son 2
Son 3

Prova 

I den här koden om vi tittar har vi något som liknar det tidigare tricket, det vi har ändrat är att i första hand innehållet i etiketten här istället för att korsa barnen till ett element, använder vi metoden hitta () för att hitta ett element med klassen markera och till det elementet med metoden css () Vi kommer att injicera stilar i den, i det här fallet kommer vi att ställa in den som en röd bakgrundsfärg.
Låt oss se hur det ser ut i vår webbläsare när vi klickar på knappen Prova:

Precis som vi kunde lokalisera ett barn till ett element kan vi uppnå effekten i hierarkins motsatta bemärkelse, det vill säga från en son vi kan hitta fadern. Detta är mycket användbart i långa listor som genereras dynamiskt, eftersom vi på så sätt kan markera eller använda föräldrarna efter våra behov.
Föräldrar () metodFör detta har vi metoden föräldrar () det på ett liknande sätt barn () lokaliserar föräldern till väljaren som åberopas. Om vi ​​lägger till metoden each () till detta kommer vi att ta med alla elementets arv, till exempel om det är en vi tar med elementet och om vi går längre upp i hierarkin till elementet och så vidare tills vi når elementet, eftersom de genom hierarki alla är föräldrar på det sättet de innehåller.
Låt oss se i följande kod hur vi kan skapa ett skript med jQuery som gör att vi kan uppnå detta mål att visa alla föräldrar till vårt valda element:

 DOM -manipulation med JQuery

Son 1
Son 2
Son 3

Prova 

Strukturen liknar de tidigare exemplen, men här gör vi en förändring, den här gången använder vi klassen markera som väljare och vi tillämpar metoden föräldrar () och sedan med varje () kan vi gå igenom hierarkin från insidan till utsidan.
Låt oss se hur koden ovan ser ut när vi kör den i vår webbläsare:

FÖRSTORA

Som det föregående exemplet så länge vi fortsätter att stänga Varningar vi kommer att se alla föräldrar till elementet tills vi kommer till HTML.
Det föregående tricket hjälper oss att upprätta ett elements genealogiska träd, kanske hjälper det oss att felsöka vårt HTML, men vad händer om vi vill skaffa en specifik förälder, till exempel om vi har flera listor men vi vill att föräldern till en viss ska markeras.
Vi ska inte oroa oss, för det här fallet har vi metoden föräldrarUnder (), med detta kan vi ange en ankomstpunkt och vi kan göra en HTML -injektion För att markera hela blocket, låt oss se följande kod där vi har tillämpat denna kunskap:

 DOM -manipulation med JQuery

Son 1
Son 2
Son 3

Prova 

Om vi ​​märker att den här koden är en liten variation av den föregående, sker den viktigaste ändringen i samtalet till metoden som vi just har förklarat föräldrarUnder () som vi passerade div, det är där sökandet efter överordnade element i väljaren vi påverkar kommer att sluta.
För att visa att allt fungerar har vi injicerat lite HTML För att färga det markerade avsnittet i rött, låt oss se hur det ser ut i vår webbläsare när vi klickar på Prova:

Vi ser då att endast sektionen med div är den som är rödfärgad, vilket visar att vi har stoppat sökningen efter föräldern i det specifika elementet, till och med en direkt förälder som elementet som visar oss kraften att söka igenom DOM -träd.
Med detta har vi avslutat vår handledning, det är bara en liten demonstration av all kraft hos jQuery att manipulera SOL från vår HTML, det viktiga är att vi måste träna mycket och läsa dokumentationen mycket bra eftersom vi med den kommer att kunna få ytterligare kunskap och resurser för att kunna öka vår utvecklingsnivå.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng