Strukturen som vi kommer att arbeta på klientsidan är DOM-trädet i HTML- dokumentet, detta träd är en hierarkisk struktur där varje element vi ser på webben representeras av dess respektive etikett.
Vikten av att känna till denna struktur är att det gör att vi kan hitta de olika elementen, med detta kan vi ta värdet som de innehåller eller inkludera text, innehåll från andra sidor, vi kan behandla en controller för vår applikation och generera en vy på en sida utan måste ladda det, etc.
Hänvisning till en artikel
Som vi nämnde tidigare har HTML en struktur där det innehåller dess element, för att manipulera dessa element måste vi lära oss att skapa referenser till dem, med en referens kan vi se till att vi kommer att ta det önskade elementet eller elementen och kunna ändra dem.
Det mest effektiva sättet
Ett av de mest populära och effektivaste sätten är med ID-väljaren, eftersom vi vet att taggarna kan ha unika identifierare för att skilja elementen i en HTML .
Låt oss se i följande bild en kod där vi kan tacka Javascript ett element med dess ID-egenskap:
I koden vi såg har vi en HTML div-tagg, den här har en id, den här egenskapen är den vi nämnde som hjälper oss att hitta och välja elementet i DOM, inom ett Javascript- block tack vare dokumentobjektet, vi kan använda ett av dess metoder för att få ett element av id och i detta fall lägger vi detsamma av div och slutligen med metoden innerText tilldelar vi en ny text.
Som vi ser detta gör att sidan har berikats, trots att det är ett ganska enkelt exempel är det mest grundläggande som vi borde veta för att kunna bygga en solid grund.
Förbättrar med jQuery
Som vi vet kan Javascript ibland orsaka att du måste skriva mycket kod för att göra några saker, vid denna punkt kommer jQuery in i att förpacka dessa funktioner och koder, så att vi kan lösa samma funktioner med genvägar och mindre kod, det är fortfarande Javascript men skrivet på ett enklare sätt .
I följande exempel ser vi hur vi skriver om det föregående exemplet med jQuery:
Som vi ser har vi sammanfattat antalet metodsamtal helt enkelt med hjälp av .text () -metoden som används på en $ () -väljare, beroende på hur vi kallar vårt element jQuery ger oss tillgång till id, klasser, inklusive efter typ av element, barn av samma, etc.
Till exempel om vi vill göra samma exempel ovan men för detta fall etiketten
istället för att ha en id har den en klass:
Hej världen!
$ (". myDiv"). text ("Hej ASP.NET!");
Här ser vi att istället för att ringa väljaren med $ (“# selector”), gör vi det med $ (“. Selector”), problemet med detta är att om vi har mer än ett element med samma klass kommer vi att påverka det.
Med detta avslutar vi den här tutorialen där vi har djupat lite djupare i begreppet selekterare och hur vi använder dem med både normalt Javascript och jQuery och därmed minskar mängden kod vi skriver.
- 0
Artikel