分类解析jQuery选择器

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

      <p>我是第二个P</p>  ***不会被选中,索引号为1
      <p>我是第三个P</p>  ***会被选中,索引号为2大于1了
      <p>我是第四个P</p>  ***会被选中,索引号为3大于1了
    </div>

 (8)、lt(index)      获取所有索引值小于index的元素,索引号从0开始


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

(9)、:header       索取所有标题类型元素h1、h2、h3、h4、h5、h6


$("#div1 > :header").css("color","red");
    <div id="div1">
      <p>我是一个P</p>      ***不会被选中,不是标题类型元素
      <span>我是一个span</span> ***不会被选中,不是标题类型元素
      <h1>我是一个h1</h1>    ***会被选中,h1是标题类型元素
      <h6>我是一个h6</h6>    ***会被选中,h6是标题类型元素
    </div>

(10)、animated    正在执行动画效果的元素

4、内容过滤选择器

   (1)、:contains(text)    获取包含给定文本的元素


   $("p:contains('三')").css("background-color","red");
     <div>
      <p>我是第一个P</p>  ***不会被选中
      <p>我是第二个P</p>  ***不会被选中
      <p>我是第三个P</p>  ***会被选中,文本里包含了"三"
     </div>

  (2)、:empty  获取不包含子元素或文本的空元素


$(:empty).text("我是空元素");
      <div>
        <div><span></span></div>  ***div不会被选中,因为有<span></span>子元素。<span></span>会被选中,因为没有子元素也没有文本元素
        <p></p>            ***会被选中,没有子元素,也没有文本元素
        <span>我是一个span</span>  ***不会被选中,有文本元素