常用的选择器
ID选择器
#box { //使用 ID 选择器的 CSS 规则
color:red; //将 ID 为 box 的元素字体颜色变红
}
在 jQuery 选择器里，我们使用如下的方式获取同样的结果：
$('#box').css('color', 'red'); //获取 DOM 节点对象，并添加行为
选择器 CSS 模式 jQuery 模式 描述
元素名 div {} $(‘div’) 获取所有 div 元素的 DOM 对象
ID #box {} $(’#box’) 获取一个 ID 为 box 元素的 DOM 对象
类(class) .box{} $(’.box’) 获取所有class 为box 的所有DOM 对象
$('div').css('color', 'red');//元素选择器，返回多个元素
$('#box').css('color', 'red');//ID 选择器，返回单个元素
$('.box').css('color', 'red');//类(class)选择器，返回多个元素
jQuery对象.size()方法，length属性
alert($('div').size());
alert($('#box').size());
alert($('.box').size());
同理，你也可以直接使用 jQuery 核心属性来操作：
alert($('#box').length);//1 个
警告：有个问题特别要注意，ID 在页面只允许出现一次，我们一般都是要求开发者要遵守和保持这个规则。
#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';//报错了
因为 jQuery 内部进行了判断，而原生的 DOM 节点获取方法并没有进行判断。
所以导致了一个错误，原生方法可以这么判断解决这个问题：
if (document.getElementById('pox')) { //先判断是否存在这个对象
document.getElementById('pox').style.color = 'red';
}
那么对于缺失不存在的元素，我们使用 jQuery 调用的话，怎么去判断是否存在呢？因为本身返回的是 jQuery 对象，可能会导致不存在元素存在与否，都会返回 true。
if ($('#pox').length > 0) { //判断元素包含数量即可
$('#pox').css('color', 'red');
}
除了这种方式之外，还可以用转换为 DOM 对象的方式来判断，例如：
if ($('#pox').get(0)) {} 或 if ($('#pox')[0]) {} //通过数组下标也可以获取 DOM 对象
进阶选择器
在简单选择器中，我们了解了最基本的三种选择器：元素标签名、ID 和类(class)。那么在基础选择器外，还有一些进阶和高级的选择器方便我们更精准的选择元素。
选择器 CSS 模式 jQuery 模式 描述
- 群组选择器 span,em,.box {} $(‘span,em,.box’) 获取多个选择器的 DOM 对象
- 后代选择器 ul li a {} $(‘ul li a’) 获取追溯到的多个 DOM 对象
- 通配选择器 * {} $(’*’) 获取所有元素标签的 DOM 对象
群组选择器
span, em, .box {
color:red;//多种选择器添加红色字体
}
$('span, em, .box').css('color', 'red');//群组选择器 jQuery 方式
后代选择器
ul li a {
color:red;//层层追溯到的元素添加红色字体
}
$('ul li a').css('color', 'red'); //群组选择器 jQuery 方式
通配选择器
* { //页面所有元素都添加红色字体
color:red;
}
$('*').css('color', 'red'); //通配选择器
常用选择器：id选择器，class选择器，标签选择器，子代选择器，后代选择器，群组选择器，通配符选择器；
$('#box p, ul li *').css('color', 'red'); //组合了多种选择器
警告：在实际使用上，通配选择器一般用的并不多，尤其是在大通配上，比如：$(’*’)，这种使用方法效率很低，影响性能，建议竟可能少用。
还有一种选择器，可以在 ID 和类(class)中指明元素前缀，比如：
$('div.box');//限定必须是.box 元素获取必须是 div
$('p#box div.side');//同上
类(class)有一个特殊的模式，就是同一个 DOM 节点可以声明多个类(class)。那么对于这种格式，我们有多 class 选择器可以使用，但要注意和 class 群组选择器的区别。
.box.pox { //双 class 选择器，IE6 出现异常
color:red;
}
$('.box.pox').css('color', 'red');//兼容 IE6，解决了异常
多 class 选择器是必须一个 DOM 节点同时有多个 class，用这多个 class 进行精确限定。而群组 class 选择器，只不过是多个 class 进行选择而已。
$(’.box, .pox’).css(‘color’, ‘red’); //加了逗号，体会区别
警告：在构造选择器时，有一个通用的优化原则：只追求必要的确定性。当选择器筛选越复杂，jQuery 内部的选择器引擎处理字符串的时间就越长。比如：
$(‘div#box ul li a#link’);//让 jQuery 内部处理了不必要的字符串
$(’#link’);//ID 是唯一性的，准确度不变，性能提升
高级选择器
层次选择器
选择器 CSS 模式 jQuery 模式 描述
- 后代选择器 ul li a {} $(‘ul li a’) 获取追溯到的多个 DOM 对象
- 子选择器 div > p {} $(‘div p’) 只获取子类节点的多个 DOM 对象
- next 选择器 div + p {} $(‘div + p’) 只获取某节点后一个同级DOM 对象
- nextAll 选择器 div ~ p {} $(‘div ~ p’) 获取某节点后面所有同级DOM 对象
在层次选择器中，除了后代选择器之外，其他三种高级选择器是不支持 IE6 的，而 jQuery 却是兼容 IE6 的。
后代选择器
$('#box p').css('color', 'red'); //全兼容
jQuery 为后代选择器提供了一个等价 find()方法
$('#box').find('p').css('color', 'red'); //和后代选择器等价
子选择器，孙子辈找不到
#box > p {
color:red;//IE6 不支持
}
$('#box > p').css('color', 'red');//兼容 IE6
jQuery 为子选择器提供了一个等价 children()方法：
$('#box').children('p').css('color', 'red'); //和子选择器等价
next 选择器(下一个同级节点)
#box + p {
color:red;//IE6 不支持
}
$('#box+p').css('color', 'red');//兼容 IE6
jQuery 为 next 选择器提供了一个等价的方法 next()：
$('#box').next('.p').css('color', 'red'); //和 next 选择器等价
nextAll 选择器(后面所有同级节点)
#box ~ p {
color:red;//IE6 不支持
}
$('#box ~ p').css('color', 'red');//兼容 IE6
jQuery 为 nextAll 选择器提供了一个等价的方法 nextAll()：
$('#box').nextAll('p').css('color', 'red'); //和 nextAll 选择器等价
知识点：prev,prevAll
$('#box').prev('p').css('color', 'red');//同级上一个元素
$('#box').prevAll('p').css('color', 'red');//同级所有上面的元素
nextUntil()和 prevUnitl()方法是选定同级的下面或上面的所有节点，选定非指定的所有元素，一旦遇到指定的元素就停止选定。
$('#box').prevUntil('p').css('color', 'red');
$('#box').nextUntil('p').css('color', 'red'); //同级上非指定元素选定，遇到则停止//同级下非指定元素选定，遇到则停止
注意：标签包含规范，如下是违反了标签包含规范，段落标签无法包含 div标签.
知识点
siblings()方法正好集成了 prevAll()和 nextAll()两个功能的效果，及上下相邻的所有元素进行选定：
$('#box').siblings('p').css('color', 'red'); //同级上下所有元素选定
//等价于下面：
$('#box').prevAll('p').css('color', 'red'); //同级上所有元素选定
$('#box').nextAll('p').css('color', 'red'); //同级下所有元素选定
知识点：
jQuery特点：链式调用。
警告：切不可写成“$(’#box’).prevAll(‘p’).nextAll(‘p’).css(‘color’, ‘red’);”这种形式，因为prevAll(‘p’)返回的是已经上方所有指定元素，然后再 nextAll(‘p’)选定下方所有指定元素，这样必然出现错误。
知识点：
jQuery对象.find(“选择器”)：后代选择器；
jQuery对象.children(“选择器”)：后代选择器；
选择器快慢分析
//最快：使用原生的 getElementById、ByName、ByTagName 和 querySelectorAll()
后代查找
KaTeX parse error: Expected 'EOF', got '#' at position 8: ('p', '#̲box');//jQuery …(’#box’).find(‘p’)，这会导致一定的性能损失。它比最快的形式慢了 5%-10%
子代查找
$('#box').children('p');//这条语句在 jQuery 内部，会使用$.sibling()和 javascript 的 nextSibling()方法，一个个遍历节点。它比最快的形式大约慢 50%
//子代查找
$('#box > p');//jQuery 内部使用 Sizzle 引擎，处理各种选择器。Sizzle 引擎的选择顺序是从右到左，所以这条语句是先选 p，然后再一个个过滤出父元素#box，这导致它比最快的形式大约慢70%
//后代查找
$('#box p'); //这条语句与上一条是同样的情况。但是，上一条只选择直接的子元素，这一条可以于选择多级子元素，所以它的速度更慢，大概比最快的形式慢了 77%。
$('p', $('#box'));//jQuery 内部会将这条语句转成$('#box').find('p')，比最快的形式慢了 23%。
综上所属，最快的是 find()方法，最慢的是KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲box p')这种高级选择器。…(’#box’)进行赋值，那么 jQuery 就对其变量进行缓存，那么速度会进一步提高。
var box = $('#box');
var p = box.find('p');
属性选择器
CSS 模式 jQuery 模式 描述
- a[title] $(‘a[title]’) 获取具有这个属性的 DOM 对象
- a[title=num1] $(‘a[title=num1]’) 获取具有这个属性=这个属性值的DOM 对
象 - a[title^=num] $(‘a[title^=num]’) 获取具有这个属性且开头属性值匹配的
DOM 对象 - a[title|=num] $(‘a[title|=num]’) 获取具有这个属性且等于属性值或开头属
性值匹配后面跟一个“-”号的 DOM 对象 - a[title$=num]
=num]’) 获取具有这个属性且结尾属性值匹配的
DOM 对象 - a[title!=num] $(‘a[title!=num]’) 获取具有这个属性且不等于属性值的
DOM 对象
获取具有这个属性且属性值是以一个空格
a[title~=num] $(‘a[title~=num]’) 分割的列表，其中包含属性值的 DOM 对
象 - a[title*=num] $(‘a[title*=num]’) 获取具有这个属性且属性值含有一个指定
字串的 DOM 对象 - a[bbb][title=num1] $(‘a[bbb][title=num1]’) 获取具有这个属性且属性值匹配的 DOM
对象
属性选择器也不支持 IE6，所以在 CSS 界如果要兼容低版本，那么也是非主流。但 jQuery 却不必考虑这个问题。
选定这个属性的
a[title] {
color:red; //IE6 不支持
}
$('a[title]').css('color', 'red');//兼容 IE6 了
选定具有这个属性=这个属性值的
a[title=num1] {
color:red;//IE6 不支持
}
$('a[title=num1]').css('color', 'red');//兼容 IE6 了
选定具有这个属性且开头属性值匹配的
a[title^=num] {
color:red;//IE6 不支持
}
$('a[title=^num]').css('color', 'red');//兼容 IE6 了
选定具有这个属性且等于属性值或开头属性值匹配后面跟一个“-”号
a[title|=num] { //IE6 不支持
color:red;
}
$('a[title|="num"]').css('color', 'red');//兼容 IE6 了
选定具有这个属性且结尾属性值匹配的
a[title$=num] {
color:red;//IE6 不支持
}
$('a[title$=num]').css('color','red');//兼容 IE6 了
选定具有这个属性且属性值不相等的
a[title!=num1] {
color:red;//不支持此 CSS 选择器
}
$('a[title!=num1]').css('color','red');//jQuery 支持这种写法
选定具有这个属性且属性值是以一个空格分割的列表，其中包含属性值的
a[title~=num] {
color:red;//IE6 不支持
}
$('a[title~=num1]').css('color','red');//兼容 IE6
选定具有这个属性且属性值含有一个指定字串的
a[title*=num] { //IE6 不支持
color:red;
}
$('a[title*=num]').css('color','red');//兼容 IE6
选定具有多个属性且属性值匹配成功的
a[bbb][title=num1] {
color:red;//IE6 不支持
}
$('a[bbb][title=num1]').css('color','red'); //兼容 IE6