✅ ASP.NET MVC - Sélecteurs

Table des matières

La structure sur laquelle nous allons travailler côté client est la arbre DOM du document HTML, cet arbre est une structure hiérarchique où chaque élément que l'on voit sur le web est représenté par son étiquette respective.
L'importance de connaître cette structure est qu'elle nous permettra de localiser les différents éléments, avec cela nous pouvons prendre la valeur qu'ils contiennent ou inclure du texte, du contenu d'autres pages, nous pouvons traiter un contrôleur de notre application et générer une vue dans un page sans avoir à la recharger, etc.
Référencer un élément
Comme nous l'avons mentionné précédemment, le HTML Il a une structure où il contient ses éléments, afin de manipuler ces éléments, nous devons apprendre à créer des références à eux, avec une référence, nous pouvons nous assurer que nous allons prendre le ou les éléments souhaités et pouvoir les modifier.
Le moyen le plus efficaceL'un des moyens les plus populaires et les plus efficaces est d'utiliser le sélecteur d'identifiant, comme nous le savons les étiquettes peuvent avoir des identifiants uniques pour pouvoir différencier les éléments d'un HTML.
Voyons dans l'image suivante un code où l'on peut prendre grâce à Javascript un élément utilisant sa propriété id :

Dans le code que nous avons vu, nous avons une étiquette HTML div, cela a un identifiant, cette propriété est celle que nous avons mentionnée qui nous aidera à localiser et à sélectionner l'élément dans le SOLEIL, dans un bloc Javascript grâce à l'objet document, On peut utiliser une de ses méthodes pour obtenir un élément par l'id et dans ce cas on place le même du div et enfin avec la méthode texteinterne, nous lui attribuons un nouveau texte.
Comme nous le voyons, la page a été enrichie, bien qu'il s'agisse d'un exemple assez simple, c'est la chose la plus basique que nous devons savoir pour construire une base solide.
Améliorer avec jQuery
Comme nous savons Javascript parfois vous pouvez pécher d'avoir à écrire beaucoup de code pour faire peu de choses, à ce stade, entrez jQuery empaqueter lesdites fonctionnalités et codes, nous permettant de résoudre les mêmes fonctions avec des raccourcis et moins de code, il est toujours Javascript mais écrit d'une manière plus simple.
Dans l'exemple suivant, nous verrons comment nous réécrivons l'exemple précédent en utilisant jQuery :

Comme nous pouvons le voir, nous avons résumé le nombre d'appels de méthode en utilisant simplement le méthode .text() appliqué à un sélecteur $ (), selon la façon dont nous appelons notre élément jQuery nous permet d'accéder aux identifiants, aux classes, y compris par type d'éléments, leurs enfants, etc.
Par exemple si on veut faire le même exemple précédent mais pour ce cas le labelau lieu d'avoir un identifiant, il a une classe :

Salut monde!

Ici, nous voyons qu'au lieu d'appeler le sélecteur avec $ ("# Sélecteur"), nous le faisons avec $ (". selector"), le problème avec ceci est que si nous avons plus d'un élément avec la même classe, nous l'affecterons.
Avec cela, nous terminons ce tutoriel où nous avons approfondi un peu plus le concept de sélecteurs et comment les utiliser tous les deux avec Javascript normal comme avec jQuery diminuant ainsi la quantité de code que nous écrivons.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif