Qu'est-ce que jQuery querySelector?
jQuery querySelector sélectionner ou trouver un élément DOM (modèle d'objet de document) dans un document HTML. JQuery nous permet de manipuler les éléments HTML. Il est utilisé pour sélectionner un ou plusieurs éléments HTML en fonction de l'id, du nom, des types, des attributs, de la classe, des valeurs d'attribut, etc. Il est basé sur des sélecteurs CSS existants.
Présentation de querySelector
La méthode querySelector () renvoie uniquement le premier élément qui correspond à un ou plusieurs sélecteurs CSS spécifiés dans le document. Si un ID dans le document est utilisé plusieurs fois, il renverra le premier élément correspondant.
Syntaxe de querySelector
Voici la syntaxe de querySelector:
- querySelector (sélecteurs CSS)
- Il renvoie le premier élément qui correspond aux sélecteurs spécifiés.
- Pour renvoyer tous les éléments qui correspondent alors nous utilisons la méthode querySelectorAll ().
- Les sélecteurs CSS que nous transmettons doivent être de type chaîne.
- Il est obligatoire de passer les sélecteurs CSS.
- La chaîne que nous transmettons doit être un sélecteur CSS valide.
- Si la chaîne transmise n'est pas valide, une SYNTAX_ERRexception est levée.
- Si aucune correspondance n'est trouvée, elle renverra null.
- La mise en correspondance du premier élément est effectuée à l'aide d'une traversée en profondeur de premier ordre du document.
- Spécifie un ou plusieurs sélecteurs CSS pour correspondre à l'élément.
- Pour plusieurs sélecteurs, séparez-les par une virgule.
- Les caractères qui ne font pas partie de la syntaxe CSS standard doivent être échappés à l'aide d'un caractère barre oblique inverse.
Exemples pour la méthode querySelector ()
Voici les exemples de méthodes querySelector ():
Dans jQuery, vous pouvez sélectionner des éléments dans une page en utilisant de nombreuses propriétés différentes de l'élément qu'ils sont Type, Classe, ID, Possession d'attribut, Valeurs d'attribut, etc. Ci-dessous est l'exemple de Jquery en utilisant le type.
Exemple # 1 - Sélection par type
1. Le sélecteur de requête suivant contient deux <a>
Explication du code ci-dessus: Dans cet exemple, nous pouvons observer que nous avons utilisé deux balises d'ancrage et à l'intérieur de la balise d'ancrage, nous avons passé l'hyperlien de deux images. En utilisant le querySelector ("a"). Style.backgroundColor = "red"; nous avons passé la balise d'ancrage («a») au querySelector. Dans la méthode querySelector () si nous passons les sélecteurs multiples, il retournera le premier élément qui correspond aux sélecteurs spécifiés. Bien qu'il contienne deux balises d'ancrage, la première balise d'ancrage trouvée, a appliqué son style.backgroundColor = “red”; à uniquement pour la première balise d'ancrage.
Sortie 1: Avant de cliquer sur le bouton («Cliquez sur moi»).
Sortie 2: Après avoir cliqué sur le bouton («Cliquez sur moi»), la couleur de fond de la fleur devient «rouge».
Résultat 3: En cliquant sur les hyperliens, les images respectives s'ouvriront.
2. Ce querySelector contient également deux Mais dans l'exemple ci-dessous, j'ai changé la séquence de l'image. J'ai gardé l'hyperlien du désert en premier, puis l'hyperlien de la fleur en second.
Explication du code ci-dessus: Dans cet exemple, nous pouvons également observer que nous avons utilisé deux balises d'ancrage et à l'intérieur de la balise d'ancrage, nous avons passé le lien hypertexte de deux images. En utilisant le querySelector ("a"). Style.backgroundColor = "red"; nous avons passé la balise d'ancrage («a») au sélecteur de requête. Cette fois dans le querySelector (), il découvrira tout d'abord le lien hypertexte «Désert» lorsque nous avons changé la séquence. Bien qu'il contienne deux balises d'ancrage, la première balise d'ancrage trouvée, a appliqué son style.backgroundColor = “red”; à uniquement pour la première balise d'ancrage.
Sortie 1: Dans la sortie, nous pouvons observer que la première image est Désert. Ainsi, en raison de la méthode querySelector (), la couleur d'arrière-plan du désert est devenue rouge.
Sortie 2: En cliquant sur l'hyperlien, l'image du désert sera ouverte.
Sortie 3: En cliquant sur l'hyperlien de la fleur, l'image de la fleur sera ouverte.
Exemple # 2 - Sélection par classe
Dans cet exemple ci-dessous, nous sélectionnons en utilisant le nom de classe.
Explication du code ci-dessus: Dans l'exemple ci-dessus, nous utilisons le nom de classe et ici le nom de classe est Selector. Le même nom de classe est transmis pour h2 (balise de titre) et la balise de paragraphe. Pour la méthode querySelector (), nous transmettons le nom de classe, il vérifiera le nom de classe particulier dans le programme. Maintenant, il a trouvé les balises qui ont le même nom de classe que celui mentionné. En utilisant la traversée de pré-ordre de profondeur du document, la correspondance du premier élément est effectuée. Le premier élément de l'exemple qui contient le nom de classe comme sélecteur est h2 (balise de titre). La méthode querySelector () récupère la balise h2 et par style.backgroundColor elle applique la couleur d'arrière-plan particulière à la balise h2.
Sortie 1: Avant de cliquer sur le bouton («cliquez sur moi»), le contenu de la balise h2 ne change pas la couleur d'arrière-plan en bleu.
Sortie 2: Après avoir cliqué sur le bouton («cliquez sur moi»), le contenu de la balise h2 change sa couleur d'arrière-plan en bleu.
Exemple # 3 - Sélection par ID
Dans cet exemple ci-dessous, nous sélectionnons en utilisant id.
Explication du code ci-dessus: Dans l'exemple, nous sélectionnons en utilisant id l'id ici est Selector. Pour la méthode querySelector (), nous transmettons l'identifiant, il vérifiera le nom de l'identifiant particulier dans le programme. Maintenant, il a trouvé la balise qui a le même nom d'identification que mentionné. En utilisant la traversée de pré-ordre de profondeur du document, la correspondance du premier élément est effectuée. L'élément de l'exemple qui contient le nom d'ID comme sélecteur est la balise de paragraphe. La méthode querySelector () récupère la balise de paragraphe et applique les modifications particulières au contenu en fonction du code mentionné.
Résultat 1: Avant de cliquer sur le bouton "cliquez sur moi", le contenu de la balise de paragraphe sera "Ceci est un élément avec id =" sélecteur ".
Sortie 2: Après avoir cliqué sur le bouton «cliquez sur moi», le contenu de la balise de paragraphe sera changé en «Changer dans le texte».
Utilisations de jQuery querySelector
Ci-dessous, les deux points expliquent les utilisations de querySelector:
- Les codes de jQuery sont plus précis, plus courts et plus simples que les codes JavaScript standard. Il peut remplir diverses fonctions.
- L'appel à querySelector () renvoie le premier élément pendant qu'il en sélectionne un, il est donc plus rapide et aussi plus court à écrire.
Articles recommandés
Ceci est un guide de jQuery querySelector. Nous discutons ici de ce qu'est jQuery querySelector, de l'introduction à querySelector, de la syntaxe et de l'exemple de Jquery en utilisant type. Vous pouvez également consulter nos autres articles connexes pour en savoir plus -
- Événements jQuery
- Utilisations de JQuery
- Méthodes jQuery
- Comment installer Jquery?
- Événements HTML
- 5 principaux attributs d'événements HTML avec des exemples
- Lancer vs lancer | Les 5 principales différences que vous devez savoir
- Guide des exemples de barre de progression JQuery