jquery-内容过滤选择器_jquery 内容过滤选择器-优快云博客

本文链接：https://blog.youkuaiyun.com/Annaluo/article/details/78030600

本文介绍了一个使用jQuery实现的内容过滤选择器示例，展示了如何通过不同的过滤规则来选择和操作页面上的元素，例如根据元素是否包含特定文本、是否为空、是否包含特定类的子元素等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容过滤选择器</title>
    <script src="../libs/jquery.js"></script>
    <style type="text/css">
        div,span,p {
            width: 140px;
            height: 140px;
            margin: 5px;
            background: #aaa;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Verdana;
        }
        div.mini {
            width: 55px;
            height: 55px;
            background-color: #aaaaaa;
            font-size: 12px;
        }
        div.hide{
            display: none;
        }
    </style>
</head>
<body>
<div class="one" id="one">
    id is one,class also is one
    <div class="mini">class name is mini</div>
</div>
<div class="one" id="two" title="test">
    id is two, class is one, title is test
    <div class="mini" title="other">class is mini,title is other</div>
    <div class="mini" title="test">class is mini, title is test</div>
</div>
<div class="one">
    <div class="mini">class is mini</div>
    <div class="mini">class is mini</div>
    <div class="mini">class is mini</div>
    <div class="mini"></div>
</div>
<div class="one">
    <div class="mini">class is mini</div>
    <div class="mini">class is mini</div>
    <div class="mini">class is mini</div>
    <div class="mini" title="test">class is mini, title is test</div>
</div>
<div style="display: none" class="none">
    style的display为“none”的div
</div>
<div class="hide"> class is hide</div>
<div>
    包含input的type为“hidden”的div
    <input type="hidden" size="8">
</div>
<span id="mover">正在执行动画的sapn元素</span>
<script>
   /* $("div:contains(di)")//改变含有文本“di”的div元素的背景色
            .css("background","#CCFF66");*/
    /*$("div:empty")//改变不包含子元素（包括文本元素,文本元素也算子元素）的div空元素的背景色
            .css("background","#FFCC00");*/
    /*$("div:has('.mini')")//改变含有class为mini上一级元素的div元素的背景色
            .css("background","#000099");*/
    $("div:parent")//改变含有子元素（包括文本元素）的div元素的背景色，与empty刚好相反
            .css("background","#336633");
</script>
</body>
</html>