1. 程式人生 > >jQuery判斷某個元素是否存在

jQuery判斷某個元素是否存在


使用jQuery選擇器不僅比使用傳統的getElementById()和getElementsByTagName()函式簡潔得多,而且還能避免某些錯誤。

看下面這個例子:

<div>test</div>
<script type="text/javascript">
    document.getElementById('tt').style.color = 'red';
</script>

執行上面的程式碼,瀏覽器就會報錯,原因是網頁中沒有 id 為 tt 的元素。

經過改進的程式碼:

<div>test</div>
<script type="text/javascript">
    if (document.getElementById('tt')) {
        document.getElementById('tt').style.color='red';
    }
</script>

在對某個元素進行操作時,先判斷該元素是否存在;但如果要操作很多元素,那每個元素都要先判斷一下,需要做大量重複的工作。

jQuery就解決了這個問題,即使用jQuery獲取網頁中並不存在的元素時也不會報錯。

程式碼如下:

<div>test</div>
<script type="text/javascript">
    $('#tt').css('color','red');
</script>

有了這個預防措施,以後因為某種原因刪除元素,也不用擔心javascript程式碼會報錯了。

需要注意的是,$('#tt') 獲取的永遠是物件,即使網頁上沒有該元素。

因此當要使用jQuery檢查某個元素是否存在時,不能使用如下程式碼:

    if ($('#tt')) {
        //do something
    }

而應該根據獲取到的元素的長度來判斷
    if ($('#tt').length > 0) {
        //do something
    }

或者將 jQuery 物件轉換為 DOM物件來判斷
    if ($('#tt')[0]) {
        //do something
    }