jQuery最核心的组成部分就是：选择器引擎。它继承了CSS的语法，可以对DOM元素的标签名、属性名、状态等进行快速准确的选择，并且不必担心浏览器的兼容性。jQuery选择器实现了CSS1~CSS3的大部分规则之外，还实现了一些自定义的选择器，用于各种特殊状态的选择。
一．简单选择器(ID选择器)
在使用jQuery选择器时，我们首先必须使用“$()”函数来包装我们的CSS 规则。而CSS规则作为参数传递到jQuery对象内部后，再返回包含页面中对应元素的jQuery对象。随后，我们就可以对这个获取到的DOM节点进行行为操作了。
#box { //使用ID选择器的CSS规则
color:red; //添加一个样式color:red
}
在jQuery选择器里，我们使用如下的方式获取同样的结果：
$(function () {
$('#box').css('color','blue'); //添加一个行为css('color','blue')，这个行为是添加样式
});
那么除了ID选择器之外，还有两种基本的选择器，分别为：元素标签名和类(class)：
(1)元素名选择器获取所有div元素的DOM对象，CSS模式：div {} ，jQuery模式：$('div')
<body> <div>常规选择器</div> <div>常规选择器</div> <div>常规选择器</div> </body>
元素标签选择器CSS模式写法：
div {
color:orange; //把所有<div>常规选择器</div>里的内容变orange色
}
元素标签选择器jQuery写法：
$(function () {
$('div').css('color','orange'); //把所有<div>常规选择器</div>里的内容变orange色
});
(2)类(class)选择器获取所有class为box的所有DOM对象，CSS模式：.box{}，jQuery模式：$('.box')
<body> <div class="box">常规选择器</div> <div class="box">常规选择器</div> <div>常规选择器</div> </body>
类(class)选择器CSS写法：
.pox {
color:red; //只把<div class="box">常规选择器</div>里的内容变red色
}
类(class)选择器jQuery写法：
$(function () {
$('.pox').css('color','red'); //只把<div class="box">常规选择器</div>里的内容变red色
});
(3)ID选择器获取一个ID为box元素的DOM对象，CSS模式：#box{}，jQuery模式：$('#box')
为了证明ID返回的是单个元素，而元素标签名和类(class)返回的是多个，我们可以采用jQuery核心自带的一个属性length或size()方法来查看返回的元素个数。
size()方法来查看ID返回的元素个数：
<body> <div id="box">常规选择器</div> <div id="box">常规选择器</div> <div id="box">常规选择器</div> </body>
$(function () {
alert($('#box').size()); //1
});
size()方法来查看元素标签名和类(class)返回的元素个数
<body> <div class="pox">常规选择器</div> <div class="pox">常规选择器</div> <div class="pox">常规选择器</div> </body>
$(function () {
alert($('.pox').size()); //3
alert($('div').size()); //3
});
同理，你也可以直接使用jQuery核心属性来操作
$(function () {
alert($('.pox').length); //3
alert($('div').length); //3
});
警告：有个问题特别要注意，ID在页面只允许出现一次，我们一般都是要求开发者要遵守和保持这个规则。但如果你在页面中出现三次，并且在CSS使用样式，那么这三个元素还会执行效果。但如果，你想在jQuery这么去做，那么就会遇到失明的问题。所以，开发者必须养成良好的遵守习惯，在一个页面仅使用一个ID。
jQuery选择器的写法与CSS选择器十分类似，只不过他们的功能不同。CSS找到元素后添加的是单一的样式，而jQuery则添加的是动作行为。最重要的一点是：CSS在添加样式的时候，高级选择器会对部分浏览器不兼容，而jQuery选择器在添加CSS样式的时候却不必为此烦恼。
<body>
<div id="box">
<p>常规选择器</p>
<p>常规选择器</p>
<p>常规选择器</p>
<div>
<p>常规选择器</p>
<p>常规选择器</p>
<p>常规选择器</p>
</div>
</div>
</body>
jQuery写法：
$(function () {
$('#box > p').css('color','red'); //jQuery子选择器，兼容了IE6给子选择器变为红色
});
jQuery选择器支持CSS1、CSS2的全部规则，支持CSS3部分实用的规则，同时它还有少量独有的规则。所以，对于已经掌握CSS的开发人员，学习jQuery选择器几乎是零成本。而jQuery选择器在获取节点对象的时候不但简单，还内置了容错功能，这样避免像JavaScript那样每次对节点的获取需要进行有效判断。
<body> <div id="box">常规选择器</div> </body>
jQuery获取不存在ID的节点时不会报错
$(function () {
$('#pox').css('color','red'); //不存在ID为pox的元素，也不报错
});
JavaScript获取不存在ID的节点时会报错
//很多情况下有动态DOM生成的问题，会导致执行不存在的ID选择器
$(function () {
document.getElementById('pox').style.color='red'; //报错了
});
因为jQuery内部进行了判断，而原生的DOM节点获取方法并没有进行判断，所以导致了一个错误，原生方法可以这么判断解决这个问题：
$(function () {
if (document.getElementById('pox')) { //先判断是否存在这个对象
document.getElementById('pox').style.color='red';
}
});
//一般不需要判断，很多情况下有动态DOM生成的问题，会导致执行不存在的ID选择器
那么对于缺失不存在的元素，我们使用jQuery调用的话，怎么去判断是否存在呢？因为本身返回的是jQuery对象，可能会导致不存在元素存在与否，都会返回true。
$(function () {
if ($('#pox').size() > 0) { //判断元素包含数量即可，如果大于0在执行加红功能
$('#pox').css('color','red');
}
});
除了这种方式之外，还可以用一下俩种方式来判断
第一种方式：
$(function () {
if ($('#pox').get(0)) { //DOM对象的方式来判断
...
}
});
第二种方式：
$(function () {
if ($('#pox')[0]) { //通过数组下标也可以获取DOM对象
...
}
});
二．进阶选择器
在简单选择器中，我们了解了最基本的三种选择器：元素标签名、ID和类(class)。那么在基础选择器外，还有一些进阶和高级的选择器方便我们更精准的选择元素
(1)群组选择器获取多个选择器的DOM对象(可以将相同的样式进行合并),CSS模式：span,em,.box{} jQuery模式：$('span,em,.box')
把所有<div>div</div>，<p>p</p>，<strong>strong</strong>都变为红
<body> <div>div</div> <div>div</div> <div>div</div> <p>p</p> <p>p</p> <p>p</p> <strong>strong</strong> <strong>strong</strong> <strong>strong</strong> </body>
群组选择器CSS写法：
div,p,strong {
color:red; //把所有<div>div</div>，<p>p</p>，<strong>strong</strong>都变为红色
}
群组选择器jQuery写法：
$(function () {
$('div,p,strong').css('color','red');
});
将id="box"和class="pox"还有所有的<strong>strong</strong>变为蓝色
<body> <div id="box">div</div> <div>div</div> <div>div</div> <p class="pox">p</p> <p class="pox">p</p> <p>p</p> <strong>strong</strong> <strong>strong</strong> <strong>strong</strong> </body>
群组选择器jQuery写法：
$(function () {
$('#box,.pox,strong').css('color','blue');
});
(2)后代选择器获取追溯到的多个DOM对象(有一定父子或者孙子关系的层次结构，通过路径的限定精确的选择得到的节点),CSS模式：ul li a {} jQuery模式：$('ul li a')
把俩个<li><a href="###">首页</a></li>的超链接变为红色
<body>
<ul>
<li><a href="###">首页</a></li>
<li><a href="###">首页</a></li>
</ul>
<a href="###">首页</a>
<a href="###">首页</a>
</body>
后代选择器CSS写法：
ul li a {
color:red;
}
后代选择器jQuery写法：
$(function () {
$('ul li a').css('color','red');
});
(3)通配选择器获取所有元素标签的DOM对象(将所有能找到的节点都筛选出来),CSS模式：*{} jQuery 模式：$('*')
把所有首页都变为红色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>常规选择器</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<ul>
<li><a href="###">首页</a></li>
<li><a href="###">首页</a></li>
</ul>
<a href="###">首页</a>
<a href="###">首页</a>
<p>首页</p>
<p>首页</p>
<span>首页</span>
<span>首页</span>
</body>
</html>
通配选择器CSS写法：
* {
color:red;
}
通配选择器jQuery写法：
$(function () {
$('*').css('color', 'red');
});
在全局范围使用*号，会极大的消耗资源，所以不建议在全局使用
$(function () {
alert($('*').size()); //查看全局范围使用的数量:19
});
$(function () {
alert($('*')[0].nodeName); //HTML
});
警告：在实际使用上，通配选择器一般用的并不多，尤其是在大通配上，比如：$('*')，这种使用方法效率很低，影响性能，建议竟可能少用。
在实际应用中，我们可以灵活的搭配，使得选择器更加的精准和快速：
把ul下的四个<li></li>里的链接变为红色
<body>
<ul>
<li><a href="###">首页</a></li>
<li><a href="###">首页</a></li>
<li><em>首页</em></li>
<li><strong>首页</strong></li>
</ul>
<a href="###">首页</a>
<a href="###">首页</a>
<p>首页</p>
<p>首页</p>
<span>首页</span>
<span>首页</span>
</body>
通配选择器放在局部的环境中jQuery写法：
$(function () {
$('ul li *').css('color','red');
alert($('ul li *').size()); //搜出多少个没用的节点：4个(通配选择器一般运用在局部的环境内)
});
还有一种选择器，可以在ID和类(class)中指明元素前缀
给第一个div加红
<body> <div class="box pox">div</div> <p class="box">p</p> <div>div</div> <p>p</p> </body>
在ID和类(class)中指明元素前缀jQuery写法：
$(function () {
$('.box.pox').css('color','red'); //限定必须是.box 元素获取必须是div
});
类(class)有一个特殊的模式，就是同一个DOM节点可以声明多个类(class)。那么对于这种格式，我们有多class选择器可以使用，但要注意和class群组选择器的区别。
只给第一个div加红
<body> <div class="box pox">div</div> <p class="box">p</p> <div class="pox">div</div> <p class="box">p</p> </body>
双class选择器CSS写法：
.box.pox {
color:red;
}
双class选择器jQuery写法：
$(function () {
$('.box.pox').css('color','red');
});
警告：在构造选择器时，有一个通用的优化原则：只追求必要的确定性。当选择器筛选越复杂，jQuery内部的选择器引擎处理字符串的时间就越长。
$(function () {
$('div#box p ul li a#link'); //可以这么写，但选择器越复杂，字符串解析就越慢
$('#link'); //速度最快，单个ID不需要字符串解析，就可以获取到
});
三．高级选择器
一般来说通过这六种选择器基本上可以解决所有DOM节点对象选择的问题。但在很多特殊的元素上，比如父子关系的元素，兄弟关系的元素，特殊属性的元素等等。在早期CSS的使用上，由于IE6等低版本浏览器不支持，所以这些高级选择器的使用也不具备普遍性，但随着jQuery兼容，这些选择器的使用频率也越来越高。
1.层次选择器
(1)后代选择器获取追溯到的多个DOM对象,CSS模式：ul li a {}jQuery模式：$('ul li a')
给div下的所有<p>p</p>都设置为红色
body>
<div id="box">
<p>p</p>
<p>p</p>
<p>p</p>
<div>
<p>p</p>
<p>p</p>
<p>p</p>
</div>
</div>
</body>
后代选择器jQuery写法：
$(function () {
$('#box p').css('color','red'); //全兼容
});
jQuery为后代选择器提供了一个等价find()方法(给div下的所有<p>p</p>都设置为红色)
$(function () {
$('#box').find('p').css('color','blue'); //和后代选择器等价
});
(2)子选择器只获取子类节点的多个DOM对象,CSS模式：div > p {}jQuery模式：$('div p')
给div下的儿子<p>p</p>都设置为红色
<body>
<div id="box">
<p>p</p>
<p>p</p>
<p>p</p>
<div>
<p>p</p>
<p>p</p>
<p>p</p>
</div>
</div>
</body>
子选择器CSS写法：
#box > p { //IE6不支持
color:red;
}
子选择器jQuery写法：
$(function () { //兼容IE6
$('#box > p').css('color','red');
});
jQuery 为子选择器提供了一个等价children()方法(给div下的儿子<p>p</p>都设置为红色)
$(function () {
$('#box').children('p').css('color','red');
});
(3)next选择器只获取某节点后一个同级DOM对象,CSS模式：div + p {}jQuery模式：$('div + p')
给div同级的下一个<p>p</p>都设置为红色
<body> <p>p</p> <p>p</p> <p>p</p> <div id="box">div</div> <p>p</p> <p>p</p> <p>p</p> </body>
next选择器CSS写法：
#box + p { //IE6 不支持
color:red;
}
next选择器jQuery写法：
$(function () {
$('#box + p').css('color','red');
});
jQuery为next选择器提供了一个等价的方法 next()：
$(function () {
$('#box').next('p').css('color','red'); //和next选择器等价
});
nextAll选择器(后面所有同级节点都设置为红色)
nextAll选择器CSS写法：
#box ~ p {
color:red;
}
nextAll选择器jQuery写法：
$(function () {
$('#box ~ p').css('color','red');
});
(4)nextAll选择器获取某节点后面所有同级DOM对象,CSS模式：div ~ p {}jQuery模式：$('div ~ p')
给div后面所有节点都设置为红色
<body> <p>p</p> <p>p</p> <p>p</p> <div id="box">div</div> <p>p</p> <p>p</p> <p>p</p> </body>
nextAll选择器CSS写法：
#box ~ p {
color:red;
}
nextAll选择器jQuery写法：
$(function () {
$('#box ~ p').css('color','red');
});
jQuery为nextAll选择器提供了一个等价的方法nextAll()：
$(function () {
$('#box').nextAll('p').css('color','red');
});
层次选择器对节点的层次都是有要求的，比如子选择器，只有子节点才可以被选择到，孙子节点和重孙子节点都无法选择到。next和nextAll选择器，必须是同一个层次的后一个和后N个，不在同一个层次就无法选取到了。
在find()、next()、nextAll()和children()这四个方法中，如果不传递参数，就相当于传递了“*”，即任何节点，我们不建议这么做，不但影响性能，而且由于精准度不佳可能在复杂的HTML结构时产生怪异的结果。
$(function () {
$('#box').next('*').css('color','red'); //next()等选择器方法不传参，就相当于传递了*号，
});
//如果*在某个环境里有所浪费，建议尽量不去使用
为了补充高级选择器的这三种模式，jQuery还提供了更加丰富的方法来选择元素：
prev同级上一个元素加红
$(function () {
$('#box').prev('p').css('color', 'red');
});
prevAll同级所有上面的元素加红
$(function () {
$('#box').prevAll('p').css('color','red');
});
prevAll和nextAll上下都加红
$(function () {
$('#box').prevAll('p').css('color','red');
$('#box').nextAll('p').css('color','red');
});
警告：切不可写成“$('#box').prevAll('p').nextAll('p').css('color','red');”这种形式，因为prevAll('p')返回的是已经上方所有指定元素，然后再 nextAll('p')选定下方所有指定元素，这样必然出现错误。
siblings()方法正好集成了 prevAll()和 nextAll()两个功能的效果，及上下相邻的所有元素进行选定：
$(function () {
$('#box').siblings('p').css('color','red'); //同级上下所有元素选定
});
nextUntil()和 prevUnitl()方法是选定同级的下面或上面的所有节点，选定非指定的所有元素，一旦遇到指定的元素就停止选定。
<body> <strong>strong</strong> <strong>strong</strong> <strong>strong</strong> <p>p</p> <strong>strong</strong> <strong>strong</strong> <strong>strong</strong> <div id="box">div</div> <strong>strong</strong> <strong>strong</strong> <strong>strong</strong> <p>p</p> <strong>strong</strong> <strong>strong</strong> <strong>strong</strong> </body>
通过nextUntil()方法把div下面非指定的p变为红色遇到p停止
$(function () {
$('#box').nextUntil('p').css('color', 'red'); //同级下非指定元素选定，遇到则停止
});
通过prevUntil()方法把div上面非指定的p变为红色遇到p停止
$(function () {
$('#box').prevUntil('p').css('color', 'red'); //同级上非指定元素选定，遇到则停止
});
理论上来讲，jQuery 提供的方法find()、next()、nextAll()和 children()运行速度要快于使用高级选择器。因为他们实现的算法有所不同，高级选择器是通过解析字符串来获取节点对象，而jQuery提供的方法一般都是单个选择器，是可以直接获取的。但这种快慢的差异，对于客户端脚本来说没有太大的实用性，并且速度的差异还要取决了浏览器和选择的元素内容。比如，在 IE6/7不支持querySelectorAll()方法，则会使用“Sizzle”引擎，速度就会慢，而其他浏览器则会很快。有兴趣的可以了解这个方法和这个引擎。
选择器快慢分析：
这条最快，会使用原生的getElementById、ByName、ByTagName和querySelectorAll()
$(function () {
$('#box p').css('color','red');
});
jQuery会自动把这条语句转成$('#box').find('p')，这会导致一定的性能损失。它比最快的形式慢了5%-10%
$(function () {
$('p','#box').css('color','red');
});
这条语句在jQuery内部，会使用$.sibling()和javascript的nextSibling()方法，一个个遍历节点。它比最快的形式大约慢50%
$(function () {
$('#box').children('p').css('color','red');
});
jQuery内部使用Sizzle引擎，处理各种选择器。Sizzle引擎的选择顺序是从右到左，所以这条语句是先选p，然后再一个个过滤出父元素#box，这导致它比最快的形式大约慢70%
$(function () {
$('#box > p').css('color','red'); //jQuery子选择器，兼容了IE6给子选择器变为红色
});
这条语句与上一条是同样的情况。但是，上一条只选择直接的子元素，这一条可以于选择多级子元素，所以它的速度更慢，大概比最快的形式慢了77%。
$(function () {
$('#box p').css('color','red'); //全兼容
});
jQuery内部会将这条语句转成$('#box').find('p')，比最快的形式慢了23%。
$(function () {
$('p',$('#box')).css('color','red');
});
综上所属，最快的是find()方法，最慢的是$('#box p')这种高级选择器。如果一开始将$('#box')进行赋值，那么jQuery就对其变量进行缓存，那么速度会进一步提高。
注意：我们应该推荐使用哪种方案呢？其实，使用哪种都差不多。这里，我们推荐使用jQuery提供的方法。因为不但方法的速度比高级选择器运行的更快，并且它的灵活性和扩展性要高于高级选择器。使用“+”或“~”从字面上没有next和nextAll更加语义化，更加清晰，jQuery的方法更加丰富，提供了相对的prev和prevAll。毕竟jQuery是编程语言，需要能够灵活的拆分和组合选择器，而使用CSS模式过于死板。所以，如果jQuery提供了独立的方法来代替某些选择器的功能，我们还是推荐优先使用独立的方法。
2.属性选择器
属性选择器也不支持IE6，所以在CSS界如果要兼容低版本，那么也是非主流。但jQuery却不必考虑这个问题。
(1)CSS模式：a[title]，jQuery模式：$('a[title]')获取具有这个属性的DOM对象
给有[title]属性的变为红色
<body> <a title="num1">num1</a> <a>num2</a> <a>num3</a> <a>num4</a> <a title="num5">num5</a> </body>
jQuery写法：
$(function () {
$('a[title]').css('color','red');
});
(2)CSS模式：a[title=num1] jQuery模式：$('a[title=num1]')获取具有这个属性=这个属性值的DOM对象
给有[title]=num1属性的变为红色：
jQuery写法：
$(function () {
$('a[title=num1]').css('color', 'red');
});
(3)CSS模式：a[title^=num] jQuery模式：$('a[title^=num]')获取具有这个属性且开头属性值匹配的DOM对象
选定具有title且开头是num这个属性值匹配的改为红色
<body> <a title="num1">num1</a> <a>num2</a> <a>num3</a> <a title="no4">num4</a> <a title="num5">num5</a> </body>
jQuery写法：
$(function () {
$('a[title^=num]').css('color', 'red');
});
(4)CSS模式：a[title|=num] jQuery模式：$('a[title|=num]')获取具有这个属性且等于属性值或开头属性值匹配后面跟一个“-”号的DOM对象
选定具有title且开头是num这个属性值匹配后面跟一个"-"的改为红色
<body> <a title="num-1">num1</a> <a>num2</a> <a>num3</a> <a title="no4">num4</a> <a title="num-1">num5</a> </body>
jQuery写法：
$(function () {
$('a[title|=num]').css('color','red');
});
(5)CSS模式：a[title$=num] jQuery模式：$('a[title$=num]')获取具有这个属性且结尾属性值匹配的DOM对象
选定具有title且结尾是num这个属性值匹配的改为红色
<body> <a title="1num">num1</a> <a>num2</a> <a>num3</a> <a title="no4">num4</a> <a title="5num">num5</a> </body>
jQuery写法：
$(function () {
$('a[title$=num]').css('color', 'red');
});
(6)CSS模式：a[title!=num] jQuery模式：$('a[title!=num]')获取具有这个属性且不等于属性值的DOM对象
给除了[title]=num1属性的其它变为红色：
<body> <a title="num1">num1</a> <a>num2</a> <a>num3</a> <a title="no4">num4</a> <a title="num5">num5</a> </body>
jQuery写法
$(function () {
$('a[title!=num1]').css('color', 'red');
});
(7)CSS模式：a[title~=num] jQuery模式：$('a[title~=num]')获取具有这个属性且属性值是以一个空格分割的列表，其中包含属性值的DOM对象
选定具有这个属性title且属性值是以一个空格分割的列表，其中包含属性值的
<body> <a title="num1 aaa bbb">num1</a> <a>num2</a> <a>num3</a> <a title="no4">num4</a> <a title="num5">num5</a> </body>
jQuery写法:
$(function () {
$('a[title~=aaa]').css('color','red');
});
(8)CSS模式：a[title*=num] jQuery模式：$('a[title*=num]')获取具有这个属性且属性值含有一个指定字串的DOM对象
选定具有这个属性且属性值含有一个指定字串里含有num的筛选出来num1，和num5筛选出来了
<body> <a title="abcdnum1abcd">num1</a> <a>num2</a> <a>num3</a> <a title="no4">num4</a> <a title="abcdnum5abcd">num5</a> </body>
jQuery写法
$(function () {
$('a[title*=num]').css('color','red');
});
(9)CSS模式：a[bbb][title=num1] jQuery模式$('a[bbb][title=num1]')获取具有这个属性且属性值匹配的DOM对象
选定具有多个属性且属性值a[bbb]和[title=num]匹配成功的加为红色
<body> <a title="num">num1</a> <a>num2</a> <a>num3</a> <a title="no4">num4</a> <a bbb="aaa" title="num">num5</a> </body>
jQuery写法：
$(function () {
$('a[bbb][title=num]').css('color','red');
});
来源：https://www.cnblogs.com/xixi18/p/8669093.html