选择器 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)选择器，返回多个元素
为了证明 ID 返回的是单个元素，而元素标签名和类(class)返回的是多个，我们可以采用 jQuery 核心自带的一个属性 length 或 size()方法来查看返回的元素个数。
alert($('div').size());
alert($('#box').length);
判断元素对象是否存在
原生方法可以这么判断解决这个问题：
选择器 CSS****模式 jQuery****模式 描述
群组选择器
span,em,.box {}
$(‘span,em,.box’)
获取多个选择器的 DOM 对象
后代选择器
ul li a {}
$(‘ul li a’)
获取追溯到的多个 DOM 对象
通配选择器
* {}
$(’*’)
获取所有元素标签的 DOM 对象
$('span, em, .box').css('color', 'red'); //群组选择器 jQuery 方式
$('ul li a').css('color', 'red'); //群组选择器 jQuery 方式
$('*').css('color', 'red'); //通配选择器
选择器 CSS 模式 jQuery 模式 jQuery 等价方法 描述
后代选择器
ul li a {}
$(‘ul li a’)
find(‘p’)
获取追溯到的多个 DOM 对象
子选择器
div > p {}
$(‘div >p’)
children()
只获取子类节点的多个 DOM 对象
next 选择器
div + p {}
$(‘div + p’)
next()
只获取某节点后一个同级 DOM对象
nextAll 选择器
div ~ p {}
$(‘div ~ p’)
nextAll()
获取某节点后面所有同级 DOM对象
$(‘#box p’).css(‘color’, ‘red’); 等价于 $('#box').find('p').css('color', 'red');
$(‘#box > p’).css(‘color’, ‘red’); 等价于 $(‘#box’).children(‘p’).css(‘color’, ‘red’);
$(‘#box+p’).css(‘color’, ‘red’); 等价于 $('#box').next('p').css('color', 'red');
$(‘#box ~ p’).css(‘color’, ‘red’); 等价于 $('#box').nextAll('p').css('color', 'red');
1.选定同级元素的上一个(prev) 或 上面所有元素(prevAll)
$('#box').prev('p').css('color', 'red'); //同级上一个元素$('#box').prevAll('p').css('color', 'red'); //同级所有上面的元素
2. nextUntil()和 prevUnitl()方法是选定同级的下面或上面的所有节点，选定非指定的所有 元素，一旦遇到指定的元素就停止选定。
$('#box').prevUntil('p').css('color', 'red'); //同级上非指定元素选定，遇到则停止$('#box').nextUntil('p').css('color', 'red'); //同级下非指定元素选定，遇到则停止
3. 选定同级元素的 上下所有元素
siblings()方法正好集成了 prevAll()和 nextAll()两个功能的效果，及上下相邻的所有元素进行选定：
$('#box').siblings('p').css('color', 'red'); //同级上下所有元素选定
//等价于下面：
$('#box').prevAll('p').css('color', 'red'); //同级上所有元素选定
$('#box').nextAll('p').css('color', 'red'); //同级下所有元素选定
注意:层次选择器对节点的层次都是有要求的，比如子选择器，只有子节点才可以被选择到，孙子节点和重孙子节点都无法选择到。next 和 nextAll 选择器，必须是同一个层次的后一个和后 N 个，不在同一个层次就无法选取到了。
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
[
t
i
t
l
e
('a[title
( ′ a [ t i t l e 获取具有这个属性且结尾属性值匹配的 DOM 对象
a[title*=num]
$(‘a[title*=num]’)
获取具有这个属性且属性值含有一个指定 字串的 DOM 对象
a[title!=num]
$(‘a[title!=num]’)
获取具有这个属性且不等于属性值的 DOM 对象
过滤器名 jQuery 语法 jQuery****对应的方法 说明 返回
:first
$(‘li:first’)
first()
选取第一个元素
单个元素
:last
$(‘li:last’)
last()
选取最后一个元素
单个元素
:eq(index)
$(‘li:eq(2)’)
eq(2)
选择索引(0 开始)等于 index 的元素
单个元素
$('li').eq(2).css('background', '#ccc'); //元素 li 的第三个元素，负数从后开始
$('li').first().css('background', '#ccc'); //元素 li 的第一个元素
$('li').last().css('background', '#ccc'); //元素 li 的最后一个元素
注意：:first、:last 和 first()、last()这两组过滤器和方法在出现相同元素的时候，first 会实现第一个父元素的第一个子元素，last会实现最后一个父元素的最后一个子元素。所以，如果需要明确是哪个父元素，需要指明：
