jQuery判斷某個元素是否存在
阿新 • • 發佈:2019-01-04
使用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
}