Table des matières
在 JavaScript 中使用相等运算符 (==)
语法
示例
使用 jQuery 的 is() 方法
Maison interface Web js tutoriel Comment vérifier si deux éléments sont identiques en utilisant jQuery/JavaScript ?

Comment vérifier si deux éléments sont identiques en utilisant jQuery/JavaScript ?

Aug 27, 2023 pm 04:13 PM

如何使用 jQuery/JavaScript 检查两个元素是否相同?

我们可以使用 vanilla JavaScript 或 jQuery(一个 JavaScript 特色库)中的各种方法来访问 HTML 元素。

有时,在访问 DOM 元素后,开发人员可能需要检查两个访问的元素是否相同。在本教程中,我们将学习使用 JavaScript 的严格相等运算符和 jQuery 的方法来检查两个 HTML 元素的相等性。

在 JavaScript 中使用相等运算符 (==)

我们可以通过getElemenetById、querySelector、getElementByClassName等方法来访问HTML元素。之后,我们可以将其存储在 JavaScript 变量中,并且可以使用相等运算符比较这些变量以检查两个元素的相等性,就像我们使用它来比较两个数字或字符串值一样。

语法

用户可以按照以下语法来比较两个 HTML 元素。

if (element1 == element2) {
   // elements are the same
} else {
   // elements are not the same
}
Copier après la connexion

在上述语法中,element1element2 是使用 JavaScript 从 DOM 访问的 HTML 元素。

示例

在此示例中,我们创建了

HTML 元素并添加了带有“test”值的 id 属性。之后,我们使用 document.getElementById() 方法通过 id 访问该

元素。 element1 和 element2 变量包含相同的元素。

之后,我们使用相等运算符来比较它们,用户可以观察输出。

<html>
<body>
   <h3>Using the <i>Equality operator</i> to check if two HTML elements are the same or not.</h3>
   <h4 id = "test"> This is a sample element!</h4>
   <p id = "output"></p>
   <script>
      let output = document.getElementById("output");
      let element1 = document.getElementById("test");
      let element2 = document.getElementById("test");

      if (element1 == element2) {
         output.innerHTML += "The element1 and element2 both are same.";
      } else {
         output.innerHTML += "The element1 and element2 both are not same!";
      }
   </script>
</body>
</html>
Copier après la connexion

示例

在此示例中,我们使用

标签创建了元素。接下来,我们使用 document.getElementByTagName() 方法通过标签名称访问 HTML 元素。它返回所有带有

标签的 HTML 元素的数组。

之后,我们比较了 elements 数组的第 0th 和 1st 索引的值,用户可以在输出中看到它们都是不同的。

<html>
<body>
   <h3>Using the <i>Equality operator</i> to check if two HTML elements are the same or not.</h3>
   <h4>This is a element1!</h4>
   <h4>This is a element2!</h4>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById("output");
      let elements = document.getElementsByTagName("h3");
      if (elements[0] == elements[1]) {
         output.innerHTML += "The element1 and element2 both are same.";
      } else {
         output.innerHTML += "The element1 and element2 both are not same!";
      }
   </script>
</body>
</html>
Copier après la connexion

使用 jQuery 的 is() 方法

jQuery 包含各种操作 DOM 元素的方法。 is() 方法将一个元素作为参数,另一个元素作为引用,并对这两个元素进行比较。

此外,用户需要在使用 is() 方法之前使用“$”符号访问 jQuery 中的元素。

语法

用户可以按照以下语法使用 is() 方法检查两个 HTML 元素是否相等。

let isEqual = $("#btn1").is($("#btn2"));
Copier après la connexion

在上面的语法中,我们通过 id 访问了“btn1”和“btn2”元素。

示例

在此示例中,我们添加了 jQuery CDN,以便在 HTML 代码中使用 jQuery。我们还创建了两个具有不同 ID 的按钮。

在 JavaScript 中,我们使用了 is() 方法,将 id 为“btn2”的元素作为参数传递,并以 id 为“btn1”的元素作为引用。 is() 方法比较两个元素并返回我们存储在 isEqual 变量中的布尔值。

<html>
<head>
   <script
      src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"
      integrity = "sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ=="
      crossorigin = "anonymous" referrerpolicy = "no-referrer">
   </script>
</head>
<body>
   <h3> Using the <i>is() method of JQuery</i> to check if two HTML elements are same or not.</h3>
   <button id = "btn1">Button 1 </button>
   <button id = "btn2"> Button 2 </button>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById("output");
      let isEqual = $("#btn1").is($("#btn2"));
      if (isEqual) {
         output.innerHTML += "The element1 and element2 both are same.";
      } else {
         output.innerHTML += "The element1 and element2 both are not same!";
      }
   </script>
</body>
</html>
Copier après la connexion

我们学习了比较两个 HTML 元素的各种方法。用户可以使用纯 JavaScript 或 jQuery 的 is() 方法。此外,用户可以使用不同的方法来访问 HTML 元素并进行比较。

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Remplacer les caractères de chaîne en javascript Remplacer les caractères de chaîne en javascript Mar 11, 2025 am 12:07 AM

Remplacer les caractères de chaîne en javascript

Tutoriel de configuration de l'API de recherche Google personnalisé Tutoriel de configuration de l'API de recherche Google personnalisé Mar 04, 2025 am 01:06 AM

Tutoriel de configuration de l'API de recherche Google personnalisé

Exemple Couleurs Fichier JSON Exemple Couleurs Fichier JSON Mar 03, 2025 am 12:35 AM

Exemple Couleurs Fichier JSON

8 Superbes plugins de mise en page JQuery Page 8 Superbes plugins de mise en page JQuery Page Mar 06, 2025 am 12:48 AM

8 Superbes plugins de mise en page JQuery Page

Créez vos propres applications Web Ajax Créez vos propres applications Web Ajax Mar 09, 2025 am 12:11 AM

Créez vos propres applications Web Ajax

Qu'est-ce que & # x27; ceci & # x27; en javascript? Qu'est-ce que & # x27; ceci & # x27; en javascript? Mar 04, 2025 am 01:15 AM

Qu'est-ce que & # x27; ceci & # x27; en javascript?

Améliorez vos connaissances jQuery avec le spectateur source Améliorez vos connaissances jQuery avec le spectateur source Mar 05, 2025 am 12:54 AM

Améliorez vos connaissances jQuery avec le spectateur source

10 feuilles de triche mobiles pour le développement mobile 10 feuilles de triche mobiles pour le développement mobile Mar 05, 2025 am 12:43 AM

10 feuilles de triche mobiles pour le développement mobile

See all articles