内容过滤选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。具体包含以下几种（下面的内容过滤选择器获得的都是元素集合）。

同之前一样，在操作之前，先在html中下如下代码，后期所有的操作都在基础之上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
    <style type="text/css">
           .divstyle{
                300px;
                height:150px;
                background-color:pink;
            }
   </style>
</head>
<body>
      <div>I am yuehan</div>
        <div></div>
        <div><span>today is Saturday</span></div>
        <div><input type='text'></div>
        <div><p class="study">We are studing html</p></div>
        <div><p>good good study day day up</p></div>
</body>
</html>

1、:contains(text)

主要用来选取包含文本内容为“text”的元素。

$("div:contains('Saturday')").css("color",'red');

内容过滤选择器

2、:empty

选取不包含子元素或者文本的空元素。

 $("div:empty").addClass("divstyle");

内容过滤选择器

3、:has(selector)

选取含有选择器所匹配的元素的元素。

//$(:has(.test))   选择拥有.test的子元素的父元素
//$(div:has(.test))  选择拥有.test的子元素的父元素，且该父元素是div元素
$("div:has(.study)").css("color","#00CD00");

内容过滤选择器

$("div:has(p)").eq(0).css({"color":"#000080","font-weight":"bold"});

内容过滤选择器

4、:parent

选取含有子元素或者文本的元素

 $("div:parent").css("background-color","SeaGreen");

内容过滤选择器

内容过滤选择器

1、:contains(text)

2、:empty

3、:has(selector)

4、:parent

相关推荐