如何使用 jQuery/JavaScript 检查两个元素是否相同?
我们可以使用原生 JavaScript 或 jQuery(JavaScript 的特色库)中的各种方法访问 HTML 元素。
有时,在访问 DOM 元素后,开发人员可能需要检查两个访问的元素是否相同。在本教程中,我们将学习使用 JavaScript 的严格相等运算符和 jQuery 的方法来检查两个 HTML 元素是否相等。
在 JavaScript 中使用相等运算符 (==)
我们可以通过 getElemenetById、querySelector、getElementByClassName 等方法访问 HTML 元素。之后,我们可以将其存储在 JavaScript 变量中,并且可以使用相等运算符比较这些变量以检查两个元素是否相等,因为我们使用它来比较两个数字或字符串值。
语法
用户可以按照以下语法比较两个 HTML 元素。
if (element1 == element2) { // 元素相同 } else { // 元素不相同 }
在上述语法中,element1 和 element2 是使用 JavaScript 从 DOM 访问的 HTML 元素。
示例
在此示例中,我们创建了 <h3> HTML 元素并添加了具有"test"值的 id 属性。之后,我们使用 document.getElementById() 方法通过 id 访问该 <h3> 元素。 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>
示例
我们在此示例中创建了带有 <h3> 标签的元素。接下来,我们使用 document.getElementByTagName() 方法通过标签名称访问 HTML 元素。它返回带有 <h3> 标签的所有 HTML 元素的数组。
之后,我们比较了元素数组中第 0 个索引和第 1 个索引的值,用户可以在输出中看到它们都是不同的。
<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>
使用 jQuery 的 is() 方法
jQuery 包含各种方法来操作 DOM 元素。is() 方法将一个元素作为参数,将另一个元素作为引用,并比较两个元素。
此外,用户需要先使用"$"符号访问 jQuery 中的元素,然后才能使用 is() 方法。
语法
用户可以按照以下语法使用 is() 方法检查两个 HTML 元素是否相等。
let isEqual = $("#btn1").is($("#btn2"));
在上述语法中,我们通过 id 访问了"btn1"和"btn2"元素。
示例
在此示例中,我们添加了 jQuery CDN,以便将 jQuery 与 HTML 代码结合使用。我们还创建了两个具有不同 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>
我们学习了比较两个 HTML 元素的各种方法。用户可以使用纯 JavaScript 或 jQuery 的 is() 方法。此外,用户还可以使用不同的方法来访问 HTML 元素并进行比较。