极客教程jQuery 如何检查一个元素的存在与否
概述
我们可以使用jQuery检查一个HTML元素，如
，
语法
本程序中使用的语法是 −
$(elementName).length;
- elementName – elementName可以是任何标签、类名、id名，用来建立网页的结构。如
<p>, <label>, <input>, <h1>, <h2>, <h3>, <span>等。 -
length -length 是jQuery对象的一个属性，用于检查HTML中元素的出现情况。
算法
-
第1步 - 在HTML主体中创建一些元素，如p，span，标签等，并在HTML的头部标签中添加一个CDN链接。
-
第2步 – 使用jQuery语法，选择按钮作为选择器并执行click()事件方法。
-
第 3步 – 使用$(selectors)从HTML中选择一些元素，并使用length方法检查这些元素的长度。将这些元素的长度存储在不同的变量中。
-
第4步 – 在屏幕上显示输出。如果length方法返回的值大于0，那么该元素就存在，否则如果它返回的值等于0，那么该元素就不存在。
例子
在这个例子中，我们要搜索某些元素，如
, class “para”,
<!DOCTYPE html>
<html lang="en">
<head>
<title>Element exist or not using jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style>
body {
color: white;
background-color: #0a0a0a;
display: flex;
place-content: center;
min-height: 90vh;
flex-direction: column;
text-align: center;
}
p {
width: 50%;
margin: 8px auto;
padding: 0.4rem;
}
button {
border: none;
width: 8rem;
padding: 0.4rem;
background-color: #0a0a0a;
box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.788);
border-radius: 5px;
margin: 8px auto;
color: white;
}
</style>
</head>
<body>
<p></p>
<p></p>
<p></p>
<span></span><span></span>
<h1>Check the element by clicking button</h1>
<!-- This <button> tag will trigger the jQuery arrow function -->
<button>Check Element</button>
<!-- Output of the length will shown here -->
<p id="output" style="text-align:start;background-color: green; width: 8rem;">
1) p: <span id="pl"></span><br />
2) para(class): <span id="pal"></span><br />
3) label: <span id="ll"></span><br />
4) span: <span id="sl"></span><br />
</p>
<script>
// The jQuery function start from here
("button").click(() => {
var pel =("p").length;
var pael = (document.getElementsByClassName("para")).length;
var lel =("label").length;
var sel = ("span").length;(document.getElementById("pl")).text(pel);
(document.getElementById("ll")).text(lel);(document.getElementById("sl")).text(sel);
})
</script>
</body>
</html>
输出显示了HTML中的现有元素。在下面的输出中，上述代码包含4个
标签，2个带有 “para “类名称的<p class="para">标签，在jQuery函数中，它还检查了<label>标签，但HTML代码中不包含任何类型的该标签，所以它返回了0，它包含6个<span>标签。
结论
length属性的返回类型是 “数字”。当该元素存在于HTML结构中时，它会返回大于’0’的数字。如果该元素不存在于HTML元素中，那么它返回0或null。length属性按照层次顺序找到元素，并返回所有存在于HTML中的特定标签的总数。jQuery中的length属性与JavaScript中的不同，因为在JavaScript中，length方法返回数组的大小，而在jQuery中则返回HTML中存在的元素数量。jQuery的选择器选择HTML元素，并允许进一步的操作。各种jQuery选择器是 “*”，它选择HTML中的所有元素，”#id “选择具有特定id名称的元素，”.className “是用来选择特定的元素。