ASP.NET MVC - Selectoren

De structuur waar we aan de klantzijde aan gaan werken is de DOM-boom van het document HTML, deze boom is een hiërarchische structuur waarin elk element dat we op internet zien, wordt weergegeven door zijn respectieve label.
Het belang van het kennen van deze structuur is dat het ons in staat zal stellen de verschillende elementen te lokaliseren, hiermee kunnen we de waarde nemen die ze bevatten of tekst, inhoud van andere pagina's, we kunnen een controller van onze applicatie verwerken en een weergave genereren binnen een pagina zonder hem op te laden, enz.
Verwijzen naar een element
Zoals we eerder vermeldden, is de HTML Het heeft een structuur waarin het zijn elementen bevat, om deze elementen te manipuleren, moeten we leren om verwijzingen naar hen te maken, met een verwijzing kunnen we ervoor zorgen dat we het gewenste element of de gewenste elementen gaan nemen en in staat zijn om ze te wijzigen.
Meest effectieve manierEen van de meest populaire en effectieve manieren is met de ID-kiezer, zoals we weten, kunnen de labels unieke identifiers hebben om de elementen van a . te kunnen onderscheiden HTML.
Laten we in de volgende afbeelding een code zien die we kunnen gebruiken dankzij Javascript een element dat de eigenschap id gebruikt:

In de code die we zagen, hebben we een label HTML div, dit heeft een id, deze eigenschap is degene die we noemden die ons zal helpen het element in de . te vinden en te selecteren ZON, binnen een blok Javascript dankzij het object document, We kunnen een van zijn methoden gebruiken om een ​​element met de id te verkrijgen en in dit geval plaatsen we hetzelfde van de div en tenslotte met de methode innerText, kennen we er een nieuwe tekst aan toe.
Zoals we dit zien, is de pagina verrijkt, hoewel het een vrij eenvoudig voorbeeld is, is dit het meest elementaire dat we moeten weten om een ​​solide basis te bouwen.
Verbeteren met jQuery
Zoals we weten Javascript soms kun je zondigen dat je veel code moet schrijven om weinig dingen te doen, voer nu in jQuery het verpakken van genoemde functionaliteiten en codes, waardoor we dezelfde functies kunnen oplossen met snelkoppelingen en minder code, het is nog steeds Javascript maar op een eenvoudigere manier geschreven.
In het volgende voorbeeld zullen we zien hoe we het vorige voorbeeld herschrijven met jQuery:

Zoals we kunnen zien, hebben we het aantal methode-aanroepen samengevat met de .text () methode toegepast op een kiezer $ (), afhankelijk van hoe we ons element noemen jQuery stelt ons in staat om toegang te krijgen tot id, klassen, inclusief per type elementen, hun kinderen, enz.
Als we bijvoorbeeld hetzelfde vorige voorbeeld willen doen, maar in dit geval het labelin plaats van een id heeft het een klasse:

Hallo Wereld!

Hier zien we dat in plaats van de selector aan te roepen met $ ("# Kiezer"), we doen het met $ (". selector"), het probleem hiermee is dat als we meer dan één element met dezelfde klasse hebben, we dit zullen beïnvloeden.
Hiermee sluiten we deze tutorial af, waarin we ons wat meer hebben verdiept in het concept van selectors en hoe je ze beide kunt gebruiken met Javascript normaal als bij jQuery dus het verminderen van de hoeveelheid code die we schrijven.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