分类解析jQuery选择器(4)

   $("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>  ***不会被选中,有文本元素       </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>我是一个span</span>  ***会被第一条规则选中       <input type="hidden" value="我是一个隐藏的input" /> ***会被第二条jQuery选中       <span>我是span1</span>       ***会被第一条jQuery选中

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

6、属性过滤选择器

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

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

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

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

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

      $("div[class!=div1]").css("color","red");       <div>我是一个没有class属性的div</div>           ***会被选中,没有class属性自然class属性不等于div1       <div>我是一个class属性等于div2的div</div>   ***会被选中,class属性不等于div1       <div>我是一个class属性等于div1的元素</div>  ***不会被选中,class属性等于div1

   (4)、[attribute^=value]  获取属性值以value开始的元素

      $("div[class^=div]").css("color","red');       <div>我是div1</div>  ***会被选中,class属性以div开始       <div>我是div2</div>  ***会被选中,class属性以div开始       <div>我是div3</div>   ***不会被选中,class属性不以div开始

  (5)、[attribute$=value]  获取属性值以value结束的元素

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzzgws.html