国产视频app在一些頁面中如果存在針對某個html元素的js動態操作邏輯,如果元素不存在的話,執行JS時會出現意想不到的后果,而解決這個問題的方法,就是在執行某一段JS時,先判斷要用到的html元素是否存在,如果存在就執行操作,如果不存在就直接不執行邏輯。那么這篇文章就說一說在JS插件JQuery中是如何判斷元素是否存在的。

jquery判斷元素是否存在

JQuery判斷HTML元素是否存在

方法1:

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

国产视频applength 屬性包含 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

注意:

国产视频app1、id 為 mochu 的HTML元素在文檔流中只出現了一次,所以 $('#mochu') 長度為1,

国产视频app2、class 為 mochu 的HTML元素在文檔流中出現了三次,所以 $('.mochu') 長度為3,

国产视频app3、id 為 div 的HTML元素在文檔流中沒有出現,所以它的長度為 0 

jquery判斷元素是否存在的完整示例代碼:

<!DOCTYPE html>
<html>
<head>
    <script src="http://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判斷元素是否存在

注意:

国产视频app1、如果元素存在時,可以打印出元素本身

国产视频app2、元素不存在時,直接打印 undefined (特殊值,通常用于指示變量尚未賦值)

jquery判斷元素是否存在的完整示例代碼:

<!DOCTYPE html>
<html>
<head>
    <script src="http://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 對象之間的相互轉換,可以參考本博客的相關文章。