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
    }