JQuery_ JQuery选择器 JQuery判断相应的节点是否存在

有时候我们需要用选择器获取JQuery对象,并判断是否有满足条件的DOM节点存在


但是需要注意一点


由于 $(selector)  不论什么情况都会返回JQuery 对象, 所以不能按照以下的方式 判断节点是否存在

if($('#tt')){
            console.log("不能以 if($('#tt')) 这种方式判断DOM是否存在");
        }




需要按照下面的方式判断

正确做法

方式一

 if($('#dd.outClass').length >0){
            console.log("需要以 if($('#dd.outClass').length >0) 这种方式判断DOM是否存在");
        }

正确做法

方式二

if($('#dd.outClass')[0]){
            console.log("需要以 if($('#dd.outClass')[0]) 这种方式判断DOM是否存在");
        }

整体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部样式和内部样式的优先级</title>
    <link rel="stylesheet" href="css/testOutStyle.css"/>
    <style type="text/css">
        #dd{
            background-color: gold;
        }
    </style>
    <script src="js/jquery-1.11.3.js"></script>
</head>
<body>
    <div id="dd" class="outClass" style="width: 200px; height:400px;"></div>
    <script>
        if($('#tt')){
            console.log("不能以 if($('#tt')) 这种方式判断DOM是否存在");
        }
        if($('#dd.outClass').length >0){
            console.log("需要以 if($('#dd.outClass').length >0) 这种方式判断DOM是否存在");
        }
        if($('#dd.outClass')[0]){
            console.log("需要以 if($('#dd.outClass')[0]) 这种方式判断DOM是否存在");
        }
    </script>
</body>
</html>


你可能感兴趣的:(JQuery_ JQuery选择器 JQuery判断相应的节点是否存在)