jQuery选择器和css一样，但兼容性更好
<body> <p>p1</p> <p>p1</p> <p>p1</p> <div id="box"> <p>p2</p> <p>p2</p> <p>p2</p> <div> <p>p3</p> <p>p3</p> <p>p4</p> </div> </div> <p>p4</p> <p>p4</p> <p>p4</p> </body>
层次选择器：
$(function(){ //后代选择器 $('#box p').css('color','red'); $('#box').find('p').css('color','blue'); //子选择器 $('#box > p').css('color','red'); $('#box').children('p').css('color','blue'); //next选择器，获取节点后一个同级DOM对象，如果不是所指定的没有效果 $('#box + p').css('color','red'); $('#box').next('p').css('color','blue'); //nextAll，获取节点后所有同级DOM对象 $('#box ~ p').css('color','red'); $('#box').nextAll('p').css('color','blue'); });
jQuery方法对选择器的补充：
//jQuery对高级选择器的补充，提供的几种方法 //同级上指定元素:一个或所有个 $('#box').prev('p').css('color','red'); $('#box').prevAll('p').css('color','blue'); //同级非指定元素:上或下 $('#box').prevUntil('p').css('color','red'); $('#box').nextUntil('p').css('color','blue'); //同级指定元素：上和下 $('#box').siblings('p').css('color','red');
注：1 方法如果不传参相当于*，表示任意，不建议使用
2 方法相对高级选择器写法好一些：find()最快，可以拆分组合使用
var box = $('#box'); var p = box.find('p');
----------------------------------------------------------------------------------------------------------------------------------------------------------
属性选择器：
<a sss="x" title="num1 aaa bbb">num1</a> <a>num2</a> <a>num3</a> <a>num4</a> <a sss="s" title="num5">num5</a> <a title="num-6">num6</a> <a title="nsdfnumsdf">num7</a>
//属性浏览器 $('a[title]').css('color','red'); $('a[title=num1]').css('color','blue'); $('a[title^=num]').css('color','red'); $('a[title$=1]').css('color','blue'); $('a[title|=num]').css('color','red'); $('a[title!=num5]').css('color','blue'); $('a[title~=aaa]').css('color','red'); $('a[title*=num]').css('color','blue'); $('a[sss][title=num5]').css('color','red');