2.2 jQuery选择器的优势

1．简洁的写法

$()函数在很多 JavaScript 类库中都被作为一个选择器函数来使用，在 jQuery 中也不例外。其中，$("#ID")用来代替document.getElementById()函数，即通过ID获取元素；$("tagName")用来代替document.getElementsByTagName()函数，即通过标签名获取HTML元素；其他选择器的写法可以参见第2.3节。

2．支持CSS 1到CSS 3选择器

jQuery选择器支持CSS 1、CSS 2的全部和CSS 3的部分选择器，同时它也有少量独有的选择器，因此对拥有一定CSS基础的开发人员来说，学习jQuery选择器是件非常容易的事，而对于没有接触过CSS技术的开发人员来说，在学习jQuery选择器的同时也可以掌握CSS选择器的基本规则。

使用CSS选择器时，开发人员需要考虑主流浏览器是否支持某些选择器。而在jQuery中， 开发人员则可以放心地使用jQuery选择器而无需考虑浏览器是否支持这些选择器。

注意：为了能有更快的选择器解析速度，从1.1.3.1版以后，jQuery废弃了不常使用的XPath选择器，但在引用相关插件后，依然可以支持XPath选择器（详见第2.7.1小节）。

3．完善的处理机制

使用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')是否存在
    $('#tt').css("color", "red");
</script>

有了这个预防措施，即使以后因为某种原因删除网页上某个以前使用过的元素，也不用担心这个网页的JavaScript代码会报错。

需要注意的是，$('#tt')获取的永远是对象，即使网页上没有此元素。因此当要用jQuery检查某个元素在网页上是否存在时，不能使用以下代码：

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

而应该根据获取到元素的长度来判断，代码如下：

if ( $("#tt").length > 0 ) {
    //do something
}

或者转化成DOM对象来判断，代码如下：

if ( $("#tt")[0]  ) {
    //do something
}