jQuery最核心的组成部分就是：选择器引擎。它继承了CSS的语法，可以对DOM元素的标签名、属性名、状态(?)等进行快速准确的选择，并且不必担心浏览器的兼容性。jQuery选择器实现了CSS1~CSS3的大部分规则之外，还实现了一些自定义的选择器，用于各种特殊状态的选择。
简单选择器
在使用jQuery选择器时，我们首先必须使用“$()”函数来包装我们的CSS规则。而CSS规则作为参数传递到jQuery对象内部后，再返回包含页面中对应元素的jQuery对象。随后，我们就可以对这个获取到的DOM节点进行行为操作了。
常规选择器.html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常规选择器</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="box"> 常规选择器 </div> </body> </html>
使用ID选择器的CSS规则：
#box { color: red; //添加样式-将ID为box的元素字体颜色变红 }
在jQuery选择器(ID选择器)里，我们使用如下的方式获取同样的结果：
$("#box").css("color", "blue");//添加一个行为，这个行为是添加样式
那么除了ID选择器之外，还有两种基本的选择器，分别为：元素标签名和类(class)：
| 选择器 | CSS模式 | jQuery模式 | 描述 |
| 元素名 | div {} | $("div") | 获取所有div元素的DOM对象 |
| ID | #box {} | $("#box") | 获取一个ID为box元素的DOM对象 |
| 类(class) | .box {} | $(".box") | 获取所有class为box的所有DOM对象 |
举例说明：
常规选择器.html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常规选择器</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="ye_demo.js"></script> <link rel="stylesheet" type="text/css" href="ye_style.css"> </head> <body> <div class="pox">常规选择器</div> <div class="pox">常规选择器</div> <div class="pox">常规选择器</div> </body> </html>
CSS规则：
div { color: orange; }
在jQuery选择器(元素名选择器)里，我们使用如下的方式获取同样的结果：
$("div").css("color", "maroon");
又如CSS规则：
.pox { color: red; }
在jQuery选择器(类选择器)里，我们使用如下的方式获取同样的结果：
$(".pox").css("color", "green");
为了证明ID返回的是单个元素，而元素标签名和类(class)返回的是多个，我们可以采用jQuery核心自带的一个属性length或size()方法来查看返回的元素个数。
如，html代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常规选择器</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="ye_demo.js"></script> <link rel="stylesheet" type="text/css" href="ye_style.css"> </head> <body> <div class="pox">常规选择器</div> <div class="pox">常规选择器</div> <div class="pox">常规选择器</div> </body> </html>
alert($(".pox").size()); //3
alert($("div").size()); //3
当html代码变成如下时：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常规选择器</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="ye_demo.js"></script> <link rel="stylesheet" type="text/css" href="ye_style.css"> </head> <body> <div id="pox">常规选择器</div> <div id="pox">常规选择器</div> <div id="pox">常规选择器</div> </body> </html>
alert($("#pox").size()); //1，后面2个失明了
同理，你也可以直接使用jQuery核心属性来操作：
alert($("#pox").length); //1，后面2个失明了
警告：有个问题特别要注意，ID在页面只允许出现一次，我们一般都是要求开发者要遵守和保持这个规则。但如果你在页面中出现三次，并且在CSS使用样式，那么这三个元
素还会执行效果。但如果，你想在jQuery这么去做，那么就会遇到失明的问题。所以，开发者必须养成良好的遵守习惯，在一个页面仅使用一个ID。
要使第二个<div>元素的字体颜色为红色，那么
$("div").eq(1).css("color", "red");
jQuery选择器的写法与CSS选择器十分类似，只不过他们的功能不同。CSS找到元素后添加的是单一的样式，而jQuery则添加的是动作行为。最重要的一点是：CSS在添加样式的时候，高级选择器会对部分浏览器不兼容，而jQuery选择器在添加CSS样式的时候却不必为此烦恼。
例，html代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常规选择器</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="ye_demo.js"></script> <link rel="stylesheet" type="text/css" href="ye_style.css"> </head> <body> <div id="box"> <p>常规选择器</p> <p>常规选择器</p> <p>常规选择器</p> <div> <p>常规选择器</p> <p>常规选择器</p> <p>常规选择器</p> </div> </div> </body> </html>
CSS规则如下：(高级选择器)
#box > p { color: red; //CSS子选择器，IE6不支持 }
但是
$("#box > p").css("color", "red");//jQuery子选择器，兼容了IE6
jQuery选择器支持CSS1、CSS2的全部规则，支持CSS3部分实用的规则，同时它还有少量独有的规则。所以，对于已经掌握CSS的开发人员，学习jQuery选择器几乎是零成本。而jQuery选择器在获取节点对象的时候不但简单，还内置了容错功能，这样避免像JavaScript那样每次对节点的获取需要进行有效判断。
如：
$("#pox").css("color", "red"); //不存在ID为pox的元素，也不报错
document.getElementById("pox").style.color = "red"; //由于不存在ID为pox的元素，所以报错
因为jQuery内部进行了判断，而原生的DOM节点获取方法并没有进行判断，所以导致了一个错误，原生方法可以这么判断解决这个问题：
if(document.getElementById("pox")) { //先判断是否存在这个对象 document.getElementById("pox").style.color = "red"; }
那么对于缺失不存在的元素，我们使用jQuery调用的话，怎么去判断是否存在呢？因为本身返回的是jQuery对象，可能会导致不存在元素存在与否，都会返回true。很多情况下有动态DOM生成的问题，会导致执行不存在的ID选择器。
if($("#pox").size() > 0) { //判断元素包含数量即可 $("#pox").css("color", "red"); }
除了这种方式之外，还可以用转换为DOM对象的方式来判断，例如：
if($("#pox").get(0)) { ... }
或者
if($("#pox")[0]) { //通过数组下标也可以获取DOM对象 ... }