jQuery 3教程(二)：jQuery选择器

原文地址：jQuery 3教程(二)：jQuery选择器

Introduction

jQuery最方便的地方便是各种选择器。jQuery选择器完美兼容CSS 3选择器，甚至还有更强大的功能。

$

在jQuery程序中，最常见的就是$符号，那么$到底是什么意思呢？
其实，JavaScript的命名规范中，允许以$开头命名变量，而jQuery则将$作为别名使用，也就是说：

$ = jQuery = window.$ = window.jquery

利用$，你可以简化大量的代码量，减少你的代码体积。

jQuery选择器

虽然JavaScript提供了getElementsByClassName()和getElementsByTagName()的方法，但是并不是所有浏览器都能正确的解析，所以不推荐使用原生态JavaScript代码。
jQuery对上述问题做了兼容性处理，当浏览器支持以上方法时，jQuery调用该方法，否则，jQuery有自己的实现，确保在不同浏览器下都能生效。
下面给出jQuery选择器的几个例子：

*

选择页面所有的元素

a

选择页面所有链接元素(a元素)

selected-id

选择页面ID为selected-id的元素，如：

<p id="selected-id">csprojectedu.com</p>

选择这个标签的jQuery代码为：

$('#selected-id');

.selected-class

选择页面class为selected-class的元素，如：

<p class="selected-class">csprojectedu.com</p>

选择这个标签的jQuery代码为：

$('.selected-class');

.selected-classA.selected-classB

选择页面class为selected-classB且包含在selected-classA中的元素，如：

<div class="selected-classA">
  <p class="selected-classB">csprojectedu.com</p>
</div>

选择这个标签的jQuery代码为：

$('.selected-classA.selected-classB');

[selected-property]

选择页面属性为selected-property的元素，如：

<p title="selected-property">csprojectedu.com</p>

选择这个标签的jQuery代码为：

$('[selected-property]');

jQuery选择器高级用法

在实际编程中，只使用基础选择器是不够的，除非你愿意给每一个需要的元素建立ID或者Class，下面给出一些技巧：

层级选择器

可以根据DOM层级来选择元素，如：

<div class="A">
  <div class="B">
    <p class="C">csprojectedu.com</p>
  </div>
</div>

可以这样来选择：

$('A > B > C');

属性选择器

可以根据部分属性来选择元素，如：

<div class="A">
  <div class="B">
    <a href="http://www.baidu.com">Baidu</a>
  </div>
</div>

可以这样来选择：

$('a[href^="http://"]');

^是匹配开头的意思，这样可以找到所有以http开头的链接元素。
反过来你也可以通过：

$('a[href^!="http://"]');

选择所有非http开头的链接元素。
事实上还有更多比较灵活的选择器，如伪选择器等。更多选择器使用语法，可以参考W3School的CSS教程，这里不再赘述。

Summary

本文简单介绍了jQuery的选择器，选择器并不是jQuery 3特有的东西，本系列文章也不会深入去探索。如何精妙简洁地使用选择器，不是jQuery的重点，而是CSS的重点。此外，虽然jQuery有许多精妙的选择器使用方法，但是过于注重代码的精简，实际将会增加代码的可读性和维护难度。