分类解析jQuery选择器

2020-05-27 17:55:25易采站长站整理


$("#div1 > p:not('.p1')").css("color","red");
    <div id="div1">
      <p>我是第一个P</p>        ***会被选中
      <p class="p1">我是第二个P</p>  ***不会被选中,因为符合了:not里的条件 class="p1"
      <p>我是第三个P</p>        ***会被选中
    </div>

 (4)、:even      获取指定索引值为偶数的元素(0、2、4、6、8……),注意索引号是从0开始的


$("#div1 > p:even").css("color","red");
    <div id="div1">
      <p>我是第一个P</p>  ***会被选中,索引号0
      <p>我是第二个P</p>  ***不会被选中,索引号1
      <p>我是第三个P</p>  ***会被选中,索引号2
      <p>我是第四个P</p>  ***不会被选中,索引号3
      <p>我是第五个P</p>  ***会被选中,索引号4
    </div>

 (5)、odd        获取指定索引值为奇数的元素(1、3、5、7、9……),注意索引号是从1开始的


$("#div1 > p:odd").css("color","red");
    <div id="div1">
      <p>我是第一个P</p>  ***不会被选中,索引号0
      <p>我是第二个P</p>  ***会被选中,索引号1
      <p>我是第三个P</p>  ***不会被选中,索引号2
      <p>我是第四个P</p>  ***会被选中,索引号3
      <p>我是第五个P</p>  ***不会被选中,索引号4
    </div>

(6)、eq(index)      选取指定索引值的元素,索引值从0开始


$("#div1 > p:eq(1)").css("color","red");
    <div id="div1">
      <p>我是第一个P</p>  ***不会被选中,索引号为0
      <p>我是第二个P</p>  ***不会被选中,索引号为1
      <p>我是第三个P</p>  ***不会被选中,索引号为2
      <p>我是第四个P</p>  ***不会被选中,索引号为3
    </div>

 (7)、gt(index)      获取所有索引值大于index的元素,索引号从0开始


$("#div1 > p:gt(1)").css("color","red");
    <div id="div1">
      <p>我是第一个P</p>  ***不会被选中,索引号为0