jQuery选择器是什么（新手必看）

jQuery 选择器用于查找和操作元素，是 jQuery 库中非常重要的部分。它支持网页开发人员所熟知的 CSS 语法，能够轻松、快速地对页面进行设置。

jQuery 选择器是打开高效开发 jQuery 之门的钥匙。典型的 jQuery 选择器的语法格式为：

$(selector).methodName();

selector 是一个字符串表达式，用于识别 DOM 元素，然后使用 jQuery 提供的方法集合加以设置。

多个 jQuery 操作可以链的形式串起来，语法格式为：

$(selector).method1().method2().method3();

例如，要隐藏 id 为 test 的 DOM 元素，并为它添加名为 content 的样式，实现代码如下：

$('#test').hide().addClass('content');

使用起来非常方便就是 jQuery 选择器的强大之处。

jQuery选择器的优势

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

• 代码更简单；
• 支持 CSS1~CSS3 选择器；
• 完善的检测机制。

1) 代码更简单

在 jQuery 库中封装了大量可以直接通过选择器调用的方法或函数，使人们使用简单的几行代码就可以实现比较复杂的功能。

例如，使用 $('#id') 代替 JavaScript 代码中的 document.getElementById() 函数，即通过 ID 来获取元素；使用 $('tagName') 代替 JavaScript 代码中的 document.getElementsByTagName() 函数，即通过标记名来获取 HTML 元素；等等。

2) 支持CSS1~CSS3选择器

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

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

3) 完善的检测机制

在传统的 JavaScript 代码中，给页面中的元素设定某个事务时必须先找到该元素，然后为其赋予相应的事件或属性；如果该元素在页面中不存在或已被删除，那么浏览器会提示运行出错的信息，这会影响之后代码的执行。

因此，为避免提示这样的出错信息，通常要先检测该元素是否存在，如果存在，再执行它的属性或事件代码。例如下面的例子：

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

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


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

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

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

例如下面的例子：

<div>测试这个页面</div>
<script type="text/javascript">
    alert($("#mr").val());
</script>

有了 jQuery 的这个防护措施，即使以后删除了网页上曾经使用的元素，也不用担心浏览器会提示出错信息。

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

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

而应该根据获取的元素长度来检测，代码如下：

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

或将 jQuery 对象转换为 DOM 对象检测，代码如下：

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