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');