Guide des débutants de la sélection DOM avec jQuery

En tant que développeur ou concepteur frontal, vous devez utiliser le modèle d'objet de document (DOM) dans vos projets quotidiens. Ces dernières années, avec l'amélioration de la technologie JavaScript, la sélection des éléments et l'application de fonctions dynamiques dans le DOM est devenue de plus en plus courante. Par conséquent, nous devons maîtriser la connaissance de l'utilisation des éléments DOM pour éviter les conflits et optimiser les performances. JQuery est l'une des bibliothèques JavaScript les plus populaires et couramment utilisées, avec des capacités avancées de sélection et de filtrage DOM. Dans cet article, nous explorerons comment filtrer les éléments DOM en considérant le scénario réel à l'aide de jQuery. Commençons.

Points clés

• jQuery est une bibliothèque JavaScript couramment utilisée qui fournit des capacités avancées de sélection et de filtrage DOM. Pour les développeurs frontaux, il est crucial d'avoir une compréhension approfondie des éléments DOM pour éviter les conflits et optimiser les performances.
Les balises d'élément HTML
• HTML, les ID, la classe et les attributs de données sont utilisées pour sélectionner des éléments de l'arborescence DOM. ID est un identifiant unique, la classe est utilisée pour styliser des éléments et pour filtrer et sélectionner des éléments, et l'attribut de données définit les données privées pour les éléments.
• jQuery permet de sélectionner des éléments uniques, de sélectionner plusieurs éléments avec des classes, de sélectionner des éléments avec plusieurs classes, de sélectionner des éléments avec des attributs de données et de sélectionner des éléments avec plusieurs attributs de données. Il est crucial d'empêcher la duplication des éléments avec le même ID et de distinguer les classes de style à des fins de sélection et fonctionnelles.

Introduction aux attributs d'ID, de classe et de données

Habituellement, nous utilisons des balises d'élément HTML, des ID, des classes et des attributs de données pour sélectionner des éléments de l'arborescence DOM. La plupart des développeurs connaissent l'utilisation de balises HTML pour la sélection. Cependant, les novices abusent souvent des identifiants, des classes et des attributs de données sans connaître leur signification et leur nécessité exactes dans divers scénarios. Ainsi, avant d'entrer dans le scénario réel, déterminons d'abord chacune de ces trois options.

• id - utilisé comme identifiant unique dans le document. Par conséquent, nous ne devons pas utiliser le même ID pour plusieurs éléments, même si cela est possible. En règle générale, nous utilisons l'ID d'élément pour sélectionner des éléments à l'aide de jQuery.
• Class - Utilisé pour styliser des éléments à l'aide de CSS. Cependant, les classes sont généralement utilisées pour filtrer et sélectionner des éléments lorsqu'un ID ne peut pas être filtré.
• Attributs de données - Utilisés pour définir des données privées pour les éléments. Nous pouvons définir plusieurs attributs de données pour un seul élément pour stocker toutes les données requises par la fonction frontale.

Scénarios pratiques utilisant des attributs d'ID, de classe et de données

Dans cette section, nous couvrirons certains cas d'utilisation courants pour utiliser ces options de filtrage et de sélection, et comment chaque option peut être adaptée à différents scénarios. En fait, les possibilités d'utiliser ces options dans différents scénarios sont infinies. Par conséquent, nous considérerons la portée de cet article et nous concentrerons sur le contenu le plus important.

Scène 1 - Sélectionnez l'élément unique du document

Il s'agit du scénario le plus fondamental et le plus commun que nous utilisons pour sélectionner n'importe quel élément. La sélection des valeurs de formulaire pour la validation peut être considérée comme un bon exemple de ces scénarios. Nous utilisons l'ID d'élément HTML pour sélectionner des éléments, comme indiqué dans le code jQuery suivant:

$("#elementID").val();

Lors de l'utilisation de cette méthode, il est important d'éviter la duplication des éléments avec le même ID.

SCÈNE 2 - Sélectionnez plusieurs éléments en utilisant la classe

Habituellement, lorsque nous voulons filtrer plusieurs éléments dans un document, nous utilisons des attributs de classe. Contrairement à ID, nous pouvons utiliser plusieurs éléments avec la même classe CSS. En règle générale, ces types d'éléments similaires sont générés par des boucles. Supposons que nous ayons une liste d'enregistrements contenant des données utilisateur, comme le montre le code HTML ci-dessous. Nous avons un bouton "Supprimer" que les utilisateurs peuvent supprimer des enregistrements en cliquant sur eux.

<table>
  <tr><td>Mark</td><td><button type='button' class='user_data' value='Delete'></button></td></tr>
  <tr><td>John</td><td><button type='button' class='user_data' value='Delete'></button></td></tr>
  <tr><td>Mike</td><td><button type='button' class='user_data' value='Delete'></button></td></tr>
</table>

Maintenant, nous avons plusieurs instances d'éléments similaires, nous ne pouvons donc pas utiliser l'ID pour filtrer les enregistrements exacts. Voyons comment filtrer les lignes en utilisant la classe CSS donnée.

var rows = $(".user_data");

Dans le code précédent, la variable des lignes contiendra les trois lignes avec la classe user_data. Voyons maintenant comment supprimer les lignes lorsque vous cliquez sur un bouton à l'aide du sélecteur de classe.

$(".user_data").click(function(){
  $(this).parent().parent().remove();
});

Dans cette technique, nous réduisons tous les éléments correspondants et exécutons la fonction sur le projet actuel à l'aide de l'objet $ (this) pointant vers le bouton en cours de clic. Il s'agit de la méthode la plus utilisée pour gérer plusieurs éléments. Voyons maintenant quelques erreurs courantes pour les développeurs de débutants dans de tels scénarios.

• Utilisez l'ID au lieu de la classe

Il existe de nombreux cas où les développeurs utilisent le même ID dans une boucle pour générer du code HTML similaire au lieu des classes. Une fois le même ID utilisé, il n'affecte que le premier élément. Le reste des éléments ne fonctionnera pas comme prévu. Assurez-vous donc de créer un ID dynamique dans la boucle et utilisez le nom de classe pour la sélection des éléments.

• Utilisez des noms de classe au lieu de $ (this) objet

Une autre erreur de nombreux développeurs novices est le manque de compréhension du contexte et de l'utilisation actuelle des objets. Lors de l'itération de plusieurs éléments, nous pouvons utiliser jQuery $ (this) pour référencer l'élément actuel. De nombreux développeurs utilisent des noms de classe en boucles et ne peuvent donc pas obtenir les résultats attendus. Par conséquent, n'utilisez jamais les noms de classe dans une boucle, comme indiqué dans le code suivant:

$(".user_data").click(function(){
  $(".user_data").parent().parent().remove();
});

Il s'agit d'une méthode largement utilisée pour sélectionner des éléments, il est donc important de comprendre comment utiliser cette méthode efficacement. La classe CSS est utilisée à des fins de style. Mais ici, nous l'utilisons à des fins de sélection des éléments. L'utilisation d'une classe CSS à des fins de sélection n'est pas le meilleur moyen de le faire, il peut parfois conduire à des conflits de mise en page. Par exemple, lorsque vous travaillez avec une équipe, les développeurs peuvent utiliser uniquement les classes CSS pour fournir des fonctionnalités dynamiques pour jQuery. Le concepteur peut remarquer que ces classes ne sont pas utilisées à des fins de style, il est donc possible de les supprimer sans connaître leur importance. Par conséquent, il est préférable d'utiliser un préfixe pour les classes CSS qui ne sont utilisées que pour diverses fonctions et non à des fins de style.

Scène 3 - Sélectionnez des éléments en utilisant plusieurs classes

Certaines applications et sites Web reposent fortement sur JavaScript et fournissent une fonctionnalité client très dynamique. Dans ce cas, nous pouvons utiliser un grand nombre de classes et d'ID pour filtrer, sélectionner et appliquer des fonctions. Supposons que nous ayons une liste des enregistrements utilisateur qui doivent être filtrés sur le client en fonction du rôle. Nous pouvons définir les rôles comme des classes CSS pour simplifier le processus de filtrage. Considérez l'extrait de code suivant:

$("#elementID").val();

Supposons que nous souhaitions acquérir des utilisateurs avec des rôles de développeur et de concepteur. Dans ce cas, nous pouvons utiliser plusieurs classes CSS, comme indiqué dans le code suivant:

<table>
  <tr><td>Mark</td><td><button type='button' class='user_data' value='Delete'></button></td></tr>
  <tr><td>John</td><td><button type='button' class='user_data' value='Delete'></button></td></tr>
  <tr><td>Mike</td><td><button type='button' class='user_data' value='Delete'></button></td></tr>
</table>

Nous pouvons utiliser n'importe quel nombre de classes pour faire correspondre plusieurs classes sur le même élément un par un. Assurez-vous de ne pas utiliser d'espaces entre les classes, car il modifiera le sens et le résultat de la sélection. Considérez la même ligne de code avec les espaces:

var rows = $(".user_data");

Le code recherche désormais des concepteurs avec des éléments parents appelés développeurs. Alors, habituez-vous à la différence entre ces deux implémentations et utilisez-la à bon escient. De même, nous pouvons mélanger les ID et les classes lors de l'utilisation de cette technique.

Scène 4 - Sélectionnez Element à l'aide d'attributs de données

HTML5 introduit des propriétés de données personnalisées où nous pouvons définir des données liées aux éléments HTML. Ces attributs de données ont un ensemble spécifique de conventions et sont considérés comme des données privées. Nous pouvons donc maintenant utiliser l'attribut de données pour stocker les données liées à n'importe quel élément au lieu de faire plusieurs demandes AJAX au serveur. Voyons comment implémenter le scénario 2 à l'aide de propriétés de données personnalisées au lieu des classes CSS.

$(".user_data").click(function(){
  $(this).parent().parent().remove();
});

Comme vous pouvez le voir, nous pouvons utiliser les propriétés de données au lieu des classes CSS pour obtenir le même résultat. JQuery fournit des sélecteurs d'attribut avancés pour prendre en charge les attributs de données personnalisés. Considérons donc certaines options de sélecteur avancées pour les propriétés personnalisées. Supposons que nous stockons les e-mails des utilisateurs en tant que propriétés personnalisées et que nous souhaitons sélectionner les utilisateurs en fonction de certains critères de l'e-mail. Considérez l'extrait de code suivant à l'aide de propriétés de données:

$(".user_data").click(function(){
  $(".user_data").parent().parent().remove();
});

Sélectionnez l'élément qui contient "gmail" dans l'e-mail

<ul>
  <li class='role-developer role-designer'>Mark</li>
  <li class='role-developer'>Simon</li>
  <li class='role-developer role-manager'>Kevin</li>
</ul>

Sélectionnez un élément avec l'adresse e-mail "UK"

var selected_users = $('.role-developer.role-designer');

Sélectionnez un élément pour les e-mails non valides sans le symbole "@"

var selected_users = $('.role-developer .role-designer');

Comme vous pouvez le voir, les attributs de données sont puissants pour gérer les données liées aux éléments HTML, et JQuery fournit un support complet grâce à ses fonctions intégrées. Vous pouvez trouver la référence complète du sélecteur de propriétés à //m.sbmmt.com/link/2705e8fde87cd2883e9fc1f00335685f .

Scène 5 - Sélectionnez des éléments à l'aide de plusieurs attributs de données

Ceci est similaire à ce que nous avons discuté dans la scène 3 et a quelques extensions. Dans les scénarios avancés, l'utilisation de classes CSS pour gérer plusieurs valeurs de données peut être compliquée. Voyons donc comment utiliser plusieurs attributs de données pour la sélection.

$("#elementID").val();

Ici, nous pouvons vérifier l'existence de plusieurs attributs de données et sélectionner via des valeurs de recherche partielles. Maintenant, vous devriez être en mesure de comprendre la différence entre les classes CSS et les attributs de données dans la sélection des éléments. Les attributs de données fournissent un moyen d'organiser le traitement des données élémentaires. Les techniques discutées ici peuvent être utilisées en conjonction avec d'autres filtres jQuery pour répondre à tout type de situation avancée, et il est important de les utiliser judicieusement.

Résumé

Cet article est destiné à aider les débutants à comprendre les bases des ID d'élément, des classes et des propriétés de données personnalisées. Nous discutons chacun d'eux à travers des scénarios réels à l'aide de fonctions intégrées jQuery. Dans le processus, nous avons également identifié certaines erreurs des développeurs de débutants. Prenons les points clés discutés dans cet article pour créer un guide de sélection DOM utile:

• Utilisez des IDS chaque fois que possible pour la sélection des éléments, car il fournit un identifiant unique dans le document.
• Utilisez des attributs de classe ou de données dans plusieurs scénarios d'élément au lieu de compter sur les ID d'élément.
• Assurez-vous que vous distinguez les classes de style et les classes à des fins de sélection et fonctionnelles.
• Utiliser des attributs de données dans des scénarios complexes, car les classes ne sont pas destinées à fournir des données sur les éléments.

J'espère que cet article pourra vous fournir une bonne introduction à la sélection des éléments. Si vous avez de meilleurs guides et des techniques de sélection des éléments, n'hésitez pas à partager la section des commentaires.

FAQ sur la sélection de jQuery Dom (FAQ)

Quel est le modèle d'objet de document (DOM) dans jQuery?

Le modèle d'objet de document (DOM) dans jQuery est l'interface de programmation pour les documents HTML et XML. Il représente la structure d'un document et fournit un moyen de manipuler le contenu et la structure. En utilisant DOM, les programmeurs peuvent créer, naviguer et modifier des éléments et du contenu dans des documents HTML et XML.

Comment simplifier les opérations DOM en jQuery?

jQuery simplifie les opérations DOM en fournissant une API facile à utiliser pour gérer les événements, créer des animations et développer des applications AJAX. JQuery fournit également une syntaxe simple pour naviguer et manipuler DOM. Il résume les nombreuses complexités de la gestion des API JavaScript et DOM brutes, ce qui permet aux développeurs d'utiliser plus facilement des documents HTML.

Quels sont les différents types de sélecteurs DOM dans jQuery?

Il existe plusieurs types de sélecteurs DOM dans jQuery, y compris les sélecteurs d'éléments, les sélecteurs d'ID, les sélecteurs de classe, les sélecteurs d'attribut et les sélecteurs de pseudo-classe. Le sélecteur d'élément sélectionne les éléments en fonction de leur nom d'élément. Le sélecteur d'ID sélectionne des éléments en fonction de son attribut ID. Le sélecteur de classe sélectionne des éléments en fonction de ses attributs de classe. Le sélecteur d'attribut sélectionne des éléments basés sur des attributs ou des valeurs d'attribut. Le sélecteur de pseudo-classe sélectionne des éléments basés sur un état spécifique.

Comment sélectionner un élément par son identifiant dans jQuery?

Pour sélectionner un élément par son identifiant dans jQuery, utilisez le signe de livre (#) suivi de l'ID de l'élément. Par exemple, pour sélectionner un élément avec ID "Myelement", vous utiliserez $ ("# myelement").

Comment sélectionner les éléments par leur classe dans jQuery?

Pour sélectionner des éléments par leur classe dans jQuery, utilisez la notation de points (.) Suivi du nom de classe. Par exemple, pour sélectionner un élément avec la classe "MyClass", vous utiliserez $ (". MyClass").

Que sont les sélecteurs de propriétés en jQuery et comment fonctionnent-ils?

Le sélecteur d'attribut dans jQuery sélectionne des éléments en fonction de sa valeur d'attribut ou d'attribut. Ils sont écrits à des crochets ([]). Par exemple, pour sélectionner tous les éléments avec l'attribut "Data-Example", vous utiliserez $ ("[Data-Example]").

Comment sélectionner plusieurs éléments de jQuery?

Vous pouvez sélectionner plusieurs éléments de jQuery en séparant chaque sélecteur avec des virgules. Par exemple, pour sélectionner tous les éléments avec la classe "MyClass" et tous les éléments avec ID "MyId", vous utiliserez $ (". MyClass, #Myid").

Qu'est-ce qu'un sélecteur de pseudo-classe à jQuery?

Le sélecteur de pseudo-classe dans jQuery sélectionne des éléments basés sur un état spécifique. Par exemple, le sélecteur de pseudo-classe "coché" sélectionnera toutes les cases sélectionnées ou les boutons radio.

Comment utiliser jQuery pour faire fonctionner DOM?

jQuery fournit plusieurs méthodes pour manipuler DOM, telles que .Apnd (), .Prepennd (), .After (), .Before (), .Remove () et .Empty (). Ces méthodes vous permettent d'insérer, de remplacer et de supprimer des éléments dans le DOM.

Comment jQuery gère-t-il les événements dans DOM?

jQuery fournit des méthodes pour gérer les événements dans le dom, tels que .click (), .dblclick (), .hover (), .moudown (), .mouseup (), .mousmove (), .mouseout (),,. MouseOver (), .MouseEntter (), .MouseSeave (), .Change (), .focus (), .blur (), .KeyDow Load (), .resize (), .scroll () et .unload (). Ces méthodes vous permettent de définir ce qui se passe lorsque ces événements se produisent sur les éléments du DOM.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!