DOM-manipulatie met jQuery

DOM-boomDe DOM-boom is de hiërarchische organisatie van de inhoud van ons document HTMLDit is erg handig bij het identificeren van de verschillende elementen die in het document zijn opgenomen, omdat we met unieke identifiers verschillende namen kunnen toekennen aan structuren die, ondanks het feit dat ze vergelijkbare labels hebben, een ander doel hebben.
Het probleem in het verleden was dat het niet mogelijk was om gemakkelijk door de DOM-boom in realtime, omdat omslachtige routines en functies moesten worden gemaakt in Javascript, maar dit veranderde allemaal met het verschijnen van jQuery. Dit raamwerk hielp bij het bieden van een benadering voor het gebruik van Javascript voor niet-experts deed het zijn populariteit opnieuw stijgen.
Een van de meest interessante dingen die erg ingewikkeld lijken om te doen, is het selecteren van de kinderen van een elementAls we spreken van een hiërarchische structuur, kunnen we spreken van een gezin, waar de vader het hoogste element is en zijn kinderen elementen zijn die onder zijn mantel of bescherming worden geregeerd.
Laten we zeggen dat we bijvoorbeeld een ongeordende lijst of element hebben , is het logisch om te denken dat hun kinderen de elementen zijn die het kan bevatten, als we een element willen selecteren Een bepaalde lijst lijkt misschien een zeer complexe taak, maar met: jQuery we kunnen dit op een zeer eenvoudige en schone manier bereiken.
Methoden:Om dit te doen, hoeven we alleen een unieke identifier aan ons bovenliggende element te geven en vervolgens de methode op zijn selector aan te roepen kinderen (), hiermee zullen we de positie krijgen waarop we met de methode kunnen gaan elk () elk van zijn kinderen.
Laten we in de volgende code een klein voorbeeld bekijken van waar we het over hebben:

 DOM-manipulatie met JQuery

zoon 1
zoon 2
zoon 3

Proberen 

Allereerst beginnen we met het opnemen van: jQuery van CDN officieel, hiermee hoeven we het bestand met de broncode niet op onze computer op te slaan, dus met een browser en verbinding met internet we kunnen dit voorbeeld gebruiken.
Vervolgens maken we een klein scriptje waarin we aangeven dat wanneer je op het element met de id . klikt Begin de code binnen wordt uitgevoerd.
De uit te voeren code drukt eenvoudig uit dat het element met de id moet worden doorzocht pa en op deze selector passen we de methode toe kinderen () om zijn kinderen te lokaliseren en ten slotte met de methode elk () We gaan door elk van hen, in het geval van de code zijn er drie die ons in staat zullen stellen de reis te maken en dit zou ons de tekst moeten laten zien die elk bevat. Laten we eens kijken hoe de bovenstaande code werkt in onze browser:

Na het klikken op de knop proberen we kunnen de eerste zien Waarschuwing:

VERGROTEN

Als we doorgaan met het sluiten van de waarschuwingen, zien we alle onderliggende elementen in de hiërarchische structuur:

VERGROTEN

Zoals we konden zien, is het omgaan met de elementen in de structuur van onze pagina helemaal niet ingewikkeld, dit is slechts een klein voorbeeld dat ons een open mond geeft van wat we in deze tutorial zullen blijven zien.
Hoewel het vinden van onderliggende elementen best handig is, is er een methode waarmee we directer kunnen zoeken via de Gaan, golven lessen. We verwijzen naar de methode: vinden (), vindt deze methode alle overeenkomsten van de onderliggende elementen van de selector die deze oproept.
Hiermee kunnen we een geweldige en bel een vinden () erop om klassen of id in het bijzonder te lokaliseren, waarmee we bij het volgende punt komen.
Stijlen injecterenZodra we het gewenste item hebben gevonden in de ZON, vaak willen we de inhoud ervan niet afdrukken als we het niet op de een of andere manier markeren, een interessante manier is om een ​​stijl aan het element toe te voegen, dit zal ons in staat stellen om de CSS van onze pagina indirect en om belangrijke elementen erin te kunnen benadrukken en zo kunnen we iets dynamischers in ons document zien HTML.
Laten we in de volgende code kijken hoe we het gebruik van de methode gaan implementeren vinden () en dan de stijl injectie op de gevonden elementen, op deze manier kunnen we dichter bij iets komen dat we in het echte leven nuttig kunnen geven:

 DOM-manipulatie met JQuery

zoon 1
zoon 2
zoon 3

Proberen 

Als we in deze code kijken, hebben we iets dat erg lijkt op de vorige truc, wat we hebben veranderd, is dat in de eerste plaats de inhoud van het label hier in plaats van de kinderen van een element te doorlopen, we de methode gebruiken vinden () om een ​​element met de klasse te lokaliseren hoogtepunt en naar dat element met de methode css () We gaan er stijlen in injecteren, in dit geval zullen we het instellen als een rode achtergrondkleur.
Laten we eens kijken hoe het eruit ziet in onze browser zodra we op de knop klikken proberen:

Net zoals we een onderliggend element van een element konden lokaliseren, kunnen we het effect bereiken in de tegenovergestelde zin van de hiërarchie, dat wil zeggen van een zoon, we kunnen de vader vinden. Dit is erg handig in lange lijsten die dynamisch worden gegenereerd, omdat we op deze manier de ouders kunnen markeren of gebruiken volgens onze behoeften.
Ouders () methodeHiervoor hebben we de methode: ouders () dat op een vergelijkbare manier als kinderen () lokaliseert de ouder van de selector die wordt aangeroepen. Als we de methode each () hieraan toevoegen, brengen we alle overerving van het element, bijvoorbeeld als het a . is we zullen het element brengen en als we verder omhoog gaan in de hiërarchie naar het element enzovoort, totdat we het element bereiken, aangezien ze volgens de hiërarchie allemaal ouders zijn door de manier waarop ze zijn ingesloten.
Laten we in de volgende code kijken hoe we een script kunnen maken met jQuery waarmee we dit doel kunnen bereiken om alle ouders van ons gekozen element te laten zien:

 DOM-manipulatie met JQuery

zoon 1
zoon 2
zoon 3

Proberen 

De structuur lijkt erg op de vorige voorbeelden, maar hier maken we een wijziging, deze keer gebruiken we de klasse hoogtepunt als selector en we passen de methode toe ouders () en dan met een each () kunnen we van binnen naar buiten door de hiërarchie gaan.
Laten we eens kijken hoe de bovenstaande code eruitziet wanneer we deze in onze browser uitvoeren:

VERGROTEN

Net als het vorige voorbeeld, zolang we de . blijven sluiten Waarschuwingen we zullen alle ouders van het element zien totdat we bij zijn HTML.
De vorige truc helpt ons om de genealogische boom van een element vast te stellen, misschien helpt het ons bij het debuggen van onze HTML, maar wat gebeurt er als we een specifieke ouder willen verkrijgen, bijvoorbeeld als we meerdere vermeldingen hebben, maar we willen dat de ouder van een bepaalde wordt gemarkeerd.
We hoeven ons geen zorgen te maken, voor dit geval hebben we de methode oudersTot (), hiermee kunnen we een aankomstpunt specificeren en kunnen we een HTML-injectie Laten we, om het hele blok te markeren, de volgende code bekijken waarin we deze kennis hebben toegepast:

 DOM-manipulatie met JQuery

zoon 1
zoon 2
zoon 3

Proberen 

Als we merken dat deze code een kleine variatie is op de vorige, vindt de belangrijkste verandering plaats in de aanroep van de methode die we zojuist hebben uitgelegd oudersTot () waar we naar toe gingen div, waar het zoeken naar bovenliggende elementen van de selector die we beïnvloeden, stopt.
Om te laten zien dat alles werkt, hebben we een beetje geïnjecteerd HTML Om het gemarkeerde gedeelte rood te kleuren, laten we eens kijken hoe dit eruit ziet in onze browser als we op klikken proberen:

We zien dan dat alleen de sectie met de div degene is die rood is gekleurd, wat aangeeft dat we het zoeken naar de ouder in het specifieke element hebben gestopt, zelfs als we een directe ouder hebben, zoals het element die ons de kracht van zoeken door laat zien DOM-boom.
Hiermee hebben we onze tutorial afgerond, het is slechts een kleine demonstratie van alle kracht van jQuery het manipuleren van ZON van onze HTML, het belangrijkste is dat we veel moeten oefenen en de documentatie heel goed moeten lezen, omdat we hiermee extra kennis en middelen kunnen verkrijgen om ons ontwikkelingsniveau te kunnen verhogen.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven