在一些页面中如果存在针对某个html元素的js动态操作逻辑,如果元素不存在的话,执行JS时会出现意想不到的后果,而解决这个问题的方法,就是在执行某一段JS时,先判断要用到的html元素是否存在,如果存在就执行操作,如果不存在就直接不执行逻辑。那么这篇文章就说一说在JS插件JQuery中是如何判断元素是否存在的。

jquery判断元素是否存在

JQuery判断HTML元素是否存在

方法1:

判断HTML元素是否存在,利用 jQuery 中的 length 属性

length 属性包含 jQuery 对象中元素的数目

html代码

<div id="mochu">
    我爱你中国
</div>
<div class="mochu">
    我爱你中国1
</div>
<div class="mochu">
    飞鸟慕鱼博客
</div>
<div class="mochu">
    墨初
</div>

JS代码

<script>
    console.log($('#mochu').length);
    console.log($('.mochu').length);
    console.log($('#div').length);
</script>

打印结果:1 3  0

注意:

1、id 为 mochu 的HTML元素在文档流中只出现了一次,所以 $('#mochu') 长度为1,

2、class 为 mochu 的HTML元素在文档流中出现了三次,所以 $('.mochu') 长度为3,

3、id 为 div 的HTML元素在文档流中没有出现,所以它的长度为 0 

jquery判断元素是否存在的完整示例代码:

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<div id="mochu">
    我爱你中国
</div>
<script>
    if($('#mochu').length){
        //存在
        console.log('存在');
    }else{
        //不存在
        console.log('不存在');
    }
</script>
</body>
</html>

打印结果: 存在

方法2:

除了利用 jQuery 中的 length 属性来判断元素是否存在外,还可以将 jquery对象转换成dom对象来判断元素是否存在。

HTML代码

<div id="mochu">
    我爱你中国
</div>

JS代码:

<script>
    console.log($('#mochu')[0]);
    console.log($('#div')[0]);
</script>

打印结果如下图所示:

jquery判断元素是否存在

注意:

1、如果元素存在时,可以打印出元素本身

2、元素不存在时,直接打印 undefined (特殊值,通常用于指示变量尚未赋值)

jquery判断元素是否存在的完整示例代码:

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<div id="mochu">
    我爱你中国
</div>
<script>
    if($('#mochu')[0]){
        //存在
        console.log('存在');
    }else{
        //不存在
        console.log('不存在');
    }
</script>
</body>
</html>

打印结果:存在

ps:关于 jquery 对象 与 dom 对象之间的相互转换,可以参考本博客的相关文章。