jQuery判断元素存在|极客教程

jQuery判断元素存在

在开发网页时，经常会遇到需要判断某个元素是否存在的情况。使用jQuery框架可以方便地实现这一功能。本文将详细介绍如何利用jQuery判断元素是否存在的方法。

方法一：使用jQuery的length属性

jQuery的选择器返回的是一个包含匹配元素的数组或者一个空数组。因此，可以利用该数组的length属性来判断元素是否存在。当元素存在时，数组的长度大于0；当元素不存在时，数组的长度为0。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery判断元素存在示例</title>
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="element"></div>
<script>
 $(document).ready(function(){ if($ ("#element").length > 0){
        console.log("元素存在");
    } else {
        console.log("元素不存在");
    }
});
</script>
</body>
</html>

运行结果：

元素存在

在上述代码中，我们先在HTML文档中定义了一个id为”element”的div元素。然后在JavaScript代码中使用jQuery的选择器$(“#element”)来选取该元素并通过判断其length属性来判断元素是否存在。因为元素存在，所以控制台会输出”元素存在”。

方法二：使用jQuery的is()方法

除了使用length属性外，我们还可以使用jQuery的is()方法来判断元素是否存在。is()方法主要用于检查当前匹配的元素是否与给定的选择器匹配。如果元素存在，则is()方法返回true；如果元素不存在，则返回false。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery判断元素存在示例</title>
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="element"></div>
<script>
 $(document).ready(function(){ if($ ("#element").is(":visible")){
        console.log("元素存在");
    } else {
        console.log("元素不存在");
    }
});
</script>
</body>
</html>

运行结果：

元素存在

在上面的代码中，我们使用is(“:visible”)来判断元素是否可见（即存在）。由于div元素默认是可见的，所以控制台输出的结果仍然是”元素存在”。

方法三：使用jQuery的selector

除了以上两种方法外，我们还可以使用jQuery的选择器来筛选元素，然后判断返回的元素集合是否为空。如果集合不为空，则表示元素存在。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery判断元素存在示例</title>
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="element"></div>
<script>
 $(document).ready(function(){ var$ element =  $(".element"); if($ element.length > 0){
        console.log("元素存在");
    } else {
        console.log("元素不存在");
    }
});
</script>
</body>
</html>

运行结果：