Comment vérifier si deux éléments sont identiques en utilisant jQuery/JavaScript ?-js tutoriel-php.cn

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 ?

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

在上述语法中，element1 和 element2 是使用 JavaScript 从 DOM 访问的 HTML 元素。

示例

在此示例中，我们创建了

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

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

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

&lt;html&gt;
&lt;body&gt;
   &lt;h3&gt;Using the &lt;i&gt;Equality operator&lt;/i&gt; to check if two HTML elements are the same or not.&lt;/h3&gt;
   &lt;h4 id = "test"&gt; This is a sample element!&lt;/h4&gt;
   &lt;p id = "output"&gt;&lt;/p&gt;
   &lt;script&gt;
      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!";
      }
   &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

示例

在此示例中，我们使用

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

标签的 HTML 元素的数组。

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

&lt;html&gt;
&lt;body&gt;
   &lt;h3&gt;Using the &lt;i&gt;Equality operator&lt;/i&gt; to check if two HTML elements are the same or not.&lt;/h3&gt;
   &lt;h4&gt;This is a element1!&lt;/h4&gt;
   &lt;h4&gt;This is a element2!&lt;/h4&gt;
   &lt;p id = "output"&gt; &lt;/p&gt;
   &lt;script&gt;
      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!";
      }
   &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

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