分类解析jQuery选择器

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

      </div>

 (3)、:has(selector)   选中含有selector所匹配元素的元素,(注意不限于直接子元素,只要是后代含有都算)


$("div:has('span')").css("background-color","red");
      <div>          ***此div会被选中,因为他的有孙子span
        我是最外层div    
        <div><p>我是一个P</p></div>    ***此div不会被选中,因为不含有后代span
        <div><span>我是一个span</span></div>  ***此div会被选中,含有后代span
      </div>

(4)、:parent  含有子元素或者文本元素的元素


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

5、可见性过滤选择器

  (1)、:hidden  选中所有不可见元素


$("span:hidden").css("display","block");
   $("input:hidden").val("我是jQuery");
    <span style="display:none">我是一个span</span>  ***会被第一条规则选中
      <input type="hidden" value="我是一个隐藏的input" /> ***会被第二条jQuery选中
      <span class="span1">我是span1</span>       ***会被第一条jQuery选中

        (2)、:visible  选中所有可见元素

6、属性过滤选择器

  (1)、[attribute]  获取包含给定属性的元素


    $("div[class]").css("font-size","30px");
    <div>
       <div class="div1">我是第一个div</div>  ***会被选中,含有class属性
       <div>我是第二个div</div>         ***不会被选中,没含有class属性。
     </div>

   (2)、[attribute=value]  获取属性值等于value的元素


    $("div[class=div1]").css("font-size","30px");
      <div>
        <div class="div1">我是div1</div>  ***会被选中,class属性等于div1。
        <div class="div2">我是div2</div>  ***不会被选中,class属性不等于div1。