与传统的JavaScript获取页面元素和编写事务相比，jQuery选择器具有明显的优势，具体表现在以下3个方面：

代码更简单。

支持CSS1到CSS3选择器。

完善的处理机制。

4.3.1　代码更简单

在jQuery库中封装了大量可以直接通过选择器调用的方法或函数，使我们仅使用简单的几行代码就可以实现比较复杂的功能。例如：可以使用$('#id')代替JavaScript代码中的document.getElementById()函数，即通过id来获取元素；使用$('tagName')代替JavaScript代码中的document.getElementsByTagName()函数，即通过标签名称获取HTML元素等。

4.3.2　支持CSS1到CSS3选择器

jQuery选择器支持CSS1、CSS2的全部和CSS3几乎所有的选择器，以及jQuery独创的高级且复杂的选择器，因此有一定CSS经验的开发人员可以很容易地切入到jQuery的学习中来。

一般来说，使用CSS选择器时，开发人员需要考虑主流的浏览器是否支持某些选择器。但在jQuery中，开发人员则可以放心地使用jQuery选择器，无需考虑浏览器是否支持这些选择器，这极大的方便了开发者。

4.3.3　完善的检测机制

在传统的JavaScript代码中，给页面中的元素设定某个事务时必须先找到该元素，然后赋予相应的事件或属性；如果该元素在页面中不存在或已被删除，那么浏览器会提示运行出错之后的信息，这会影响后边代码的执行。因此，为避免显示这样的出错信息，通常要先检测该元素是否存在，如果存在，再执行它的属性或事件代码。例如，看下面这个例子，代码如下：

    <div>测试这个页面</div>
    <script type="text/javascript">
        alert(document.getElementById("mr").value);
    </script>

运行以上代码，浏览器就会报错，原因是网页中没有id为“mr”的元素，浏览器中的出错提示信息如图4.1所示。

将以上代码改进为如下形式：

    <div>测试这个页面</div>
    <script type="text/javascript">
        if(document.getElementById("mr")){
             alert(document.getElementById("mr").value);
        }
    </script>

图4.1　浏览器的错误提示信息

这样就可以避免浏览器报错了。但是，如果要操作的元素很多，我们需要做大量重复的工作对每个元素进行判断，这无疑会使开发人员感到厌倦。而jQuery在这方面的处理是非常好的，即使用jQuery获取网页中不存在的元素也不会报错，看下面的例子，代码如下：

    <div>测试这个页面</div>
    <script type="text/javascript">
       alert($("#mr").val());        // 无需判断$("#mr")是否存在
    </script>

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

这里需要注意一点，$("#mr")获取的是jQuery对象，即使页面上没有这个元素。因此我们要用jQuery检测某个元素在页面上是否存在时，不能使用如下代码：

    if($("#mr")){
        //省略一些JavaScript代码
    }

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

    if($("#mr").length > 0){
        //省略一些JavaScript代码
    }

或转换为DOM对象来判断，代码如下： Z8AeLqd6+cQ/CaWQiOsmsDuouM/+C2b99sUmAHuyKtN34YxRFtomnXvs904412YF

    if($("#mr").get(0)){
        //省略一些JavaScript代码
    }