1 简单选择器
$('#box>p').css('color','red') //直接相邻儿子p标签
返回选择器选择元素个数方法：length属性或size()方法。
jQuery具有容错功能：
if (document.getElementById('pox')) {
document.getElementById('pox').style.color = 'red';
}
等效于
if ($('#pox').size() > 0) {
$('#pox').css('color', 'red');
}
也可以转换为DOM对象方式来判断，有值时返回值为object对象，无值时返回值为undefined
if ($('#pox').get(0)) {
...
}
if ($('#pox')[0]) {
...
}
2 进阶选择器
（1）群组选择器：
$('div, p, strong').css('color', 'red');
（2）后代选择器
$('ul li a').css('color', 'orange');
（3）通配符选择器
$('*').css('color', 'red');
备注：在全局范围使用*号，会极大的消耗资源，所以不建议在全局使用。通配选择器一般运用在局部的环境内。
$('ul li *').css('color', 'red');
（4）在ID和class中指明元素前缀
$('div.box').css('color', 'red'); //限定必须是.box元素，获取必须是div
（5）在同一个DOM节点声明多个类
$('.box.pox').css('color', 'green'); // <div class="box pox"></div>
3 高级选择器
（1）后代选择器
$('#box p').css('color', 'red');
等效于（find()方法）
$('#box').find('p').css('color', 'red');
（2）子选择器(孙子后失明)
$('#box > p').css('color', 'red');
等效于（children()方法）
$('#box').children('p').css('color', 'red');
(3)next选择器（下一个同级节点）
$('#box + p').css('color', 'blue');
等效于（next()方法）
$('#box').next('p').css('color', 'blue');
(4)nextAll选择器（后面所有同级节点）
$('#box ~ p').css('color', 'orange');
等效于（nextAll()方法）
$('#box').nextAll('p').css('color', 'orange');
备注：在find()、children()、next()和nextAll()方法，若不传递参数，相当于传递了“*”，即任何节点，建议不要使用。
$('#box').next('') //等效于$('#box').next('*')
（5）同级上一个元素prev()
$('#box').prev('p').css('color', 'red');
（6）同级所有上面的元素prevAll()
$('#box').prevAll('p').css('color', 'red');
（7）上下同级所有元素siblings()
$('#box').siblings('p').css('color', 'red');
等效于
$('#box').prevAll('p').css('color', 'red');
$('#box').nextAll('p').css('color', 'red');
（8）同级下直到指定元素终止的所有同级元素nextUntil()
$('#box').nextUntil('p').css('color', 'red');
（9）同级上直到指定元素终止的所有同级元素prevUntil()
$('#box').prevUntil('p').css('color', 'red');
（10）执行速度
$('#box').find('p').css('color', 'red'); //最快
等效于
$('#box p').css('color', 'red');
$('p', '#box').css('color', 'red');
4 a[title]属性选择器
//具有title属性
$('a[title]').css('color', 'red');
//具有title属性且其值为num1
$('a[title=num1]').css('color', 'red');
$('a[title^=num]').css('color', 'red');
$('a[title$=num]').css('color', 'red');
$('a[title|=num]').css('color', 'red');
$('a[title~=aaa]').css('color', 'red');
$('a[title*=num]').css('color', 'red');
$('a[bbb][title=num]').css('color', 'red');
本文转自stock0991 51CTO博客，原文链接：http://blog.51cto.com/qing0991/1355456，如需转载请自行联系原作者
