jQuery的选择器

<ul id="ul-test"> <li id="li-test">小明</li> <li>小花</li> <li>小昭</li> <li>小张</li> <li class="red">小樱</li> <li>佐助</li> <li>小菜</li> </ul> <div id="div1">one</div> <div class="red">two</div> <h1>h1标签</h1> <p>p标签</p> <ul id='ul'> <li>第一页</li> <li>第二也</li> <li>第三页</li> <li>第四页 <span>span标签</span> </li> <span>li里面的span</span> <div> <li>div-li-1</li> <li>div-li-2</li> <li>div-li-3</li> </div> </ul> <h2>h2标签</h2> <div>ul的下1个兄弟</div> <div>ul的下2个兄弟</div> <div>ul的下3个兄弟</div> <p>ul的下4个兄弟-p</p>

匹配选择器

第一个子元素

$('#ul-test li:first').css('color','red');

最后一个子元素

$('#ul-test li:last').css('color','red');

除。。。之外

$('#ul-test li:not(:first)').css('color','red');

偶数行 even 下标是从0开始的

$('#ul-test li:even').css('color','red');

奇数行 odd

$('#ul-test li:odd').css('color','green');

eq = n 第n行

$('#ul-test li:eq(1)').css('color','green');

gt 大于 lt 小于

$('#ul-test li:gt(2)').css('color','red'); $('#ul-test li:lt(2)').css('color','red');

匹配标题 header

$(':header').css('color','red');

当前元素下的奇数列

('#ul-test li:nth-child(2n-1)').css('color','red');

层级选择器

后代 ‘空格’，子元素 >，下一个相邻兄弟 + / next，下面所有兄弟 ～／nextAll,

$('#ul>li').css('fontSize','32px'); $('#ul li').css('fontSize','32px'); $('#ul + div').css('fontSize','32px'); $('#ul ~ div').css('fontSize','32px'); $('#ul').next('div').css('fontSize','32px'); $('#ul').nextAll('p').css('fontSize','32px');

基本选择器 标签，id，class，全选，并集

$('.red').css('color','red'); $('div').css('color','pink'); $('*').css('color','green'); $('p,h1').css('color','blue');