jQuery过滤选择器——子元素过滤选择器

来源：互联网发布：web前端软件环境编辑：程序博客网时间：2024/05/16 09:10

子元素过滤选择器

1、:nth-child(index/even/odd/equation)
用法: $(”ul li:nth-child(2)”)
返回值 :集合元素
说明: 匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的 eq() 有些类似,不同的地方就是前者是从0开始,后者是从1开始.
2、:first-child
用法: $(”ul li:first-child”)
返回值 : 集合元素
说明: 匹配第一个子元素.’:first’ 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.这里需要特别点的记忆下区别.
3、:last-child
用法: $(”ul li:last-child”)
返回值:集合元素
说明: 匹配最后一个子元素.’:last’只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.
4、: only-child
返回值 :集合元素
说明: 如果某个元素是父元素中唯一的子元素,那将会被匹配.如果父元素中含有其他元素,那将不会被匹配.意思就是:只有一个子元素的才会被匹配!

nth-child() 选择器详解如下：
(1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素
(2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素
(3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数的元素
(4):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素

子元素过滤选择器示例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>ddd</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>    <style type="text/css">            div,span{                width: 140px;                height: 140px;                margin: 20px;                background: #9999CC;                border: #000 1px solid;                float:left;                font-size: 17px;                font-family:Roman;            }            div.mini{                width: 30px;                height: 30px;                background: #CC66FF;                border: #000 1px solid;                font-size: 12px;                font-family:Roman;            }            div.visible{                display:none;            }     </style>     <!--引入jquery的js库-->    </head>    <body>         <input type="button" value="保存"  class="mini" name="ok"  class="mini" />         <input type="button" value=" 每个class为one的div父元素下的第2个子元素"  id="b1"/>         <input type="button" value=" 每个class为one的div父元素下的第一个子元素"  id="b2"/>         <input type="button" value=" 每个class为one的div父元素下的最后一个子元素"  id="b3"/>         <input type="button" value=" 如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素"  id="b4"/>         <!--文本隐藏域-->         <input type="hidden" value="hidden_1">         <input type="hidden" value="hidden_2">         <input type="hidden" value="hidden_3">         <input type="hidden" value="hidden_4">         <h1>天气冷了</h1>         <h2>天气又冷了</h2>         <div id="one">             id为one   div         </div>         <div id="one" class="mini"  title="test">               id为two   class是 mini  div  title="test"               <div  class="mini" >class是 mini</div>        </div>         <div class="one"  title="test">               <div  class="mini" >class是 mini******</div>        </div>         <div class="visible" >                class是 one                <div  class="mini" >class是 mini</div>               <div  class="mini" >class是 mini</div>         </div>         <div class="one" title="test02">              class是 one    title="test02"   (**************               <div  class="mini01" >class是 mini01</div>               <div  class="mini" >cdddddddlass是 mini</div>        </div>        <div class="visible" >              这是隐藏的        </div>        <div class="one">        </div>        <br>        <div id="mover" >              动画        </div>        <br>    </body><script language="JavaScript">        //<input type="button" value=" 每个class为one的div父元素下的第2个子元素"  id="b1"/>        $("#b1").click(function(){            /*             *  * :nth-child()子元素过滤选择器，使用时需在其前面增加空格             *  * :nth-child()子元素过滤选择器，其索引值是从"1"开始             */            $("div[class=one] :nth-child(2)").css("background","#0000FF");        });        //<input type="button" value=" 每个class为one的div父元素下的第一个子元素"  id="b2"/>        $("#b2").click(function(){            $("div[class=one] :first-child").css("background","#0000FF");        });        //<input type="button" value=" 每个class为one的div父元素下的最后一个子元素"  id="b3"/>        $("#b3").click(function(){            $("div[class=one] :last-child").css("background","#0000FF");        });        //<input type="button" value=" 如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素"  id="b4"/>        $("#b4").click(function(){            $("div[class=one] :only-child").css("background","#0000FF");        });</script></html>

0 0