jQuery-子元素过滤选择器

来源：互联网发布：大数据涂子沛下载编辑：程序博客网时间：2024/05/22 00:10

子元素过滤选择器的过滤规则相对于其它的选择器稍微有点复杂，但只要将元素父元素和子元素区分清楚，那么使用起来也非常简单，另外还有注意它与普通过滤选择器的区别。

代码中没有提到：nth-child(3n)选取每个父元素下的索引值是3的倍数的元素，n从1开始。

：nth-child(3n+1)选取每个父元素下的索引值是3n+1的元素，n从1开始。

简单代码示例如下：

<!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.one :nth-child(2)")//改变每个class为one的div父元素下的第二个子元素的背景色            .css("background","#0066CC");    /*$("div.one :first-child")//改变每个class为one的div父元素下的第一个子元素的背景色            .css("background","#009966");*/    /*$("div.one :last-child")//改变每个class为one的div父元素下的最后一个子元素的背景色            .css("background","#00CC00");*/    /*$("div.one :only-child")//如果class为one的div元素下只有一个子元素，那么则改变这个子元素的背景色            .css("background","#00FFCC");*/</script></body></html>

阅读全文

0 0