JQuery 学习笔记 选择器之六

2020-05-24 21:30:28易采站长站整理

                    })
            })
            $(“#aOnly”).click(function(){
                    $(“ul li:only-child”).each(function(){
                        $(this).css(“background”,”#99ff88″);
                    })
            })
     })
// –></script>
<title>无标题文档</title>
</head>
<body>
<a href=”#” onclick=”javascript:location.reload();”>重置</a>
<ul id=”ul1″>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
<li>li6</li>
</ul>
<ul>
<li>li7</li>
</ul>
<a href=”#” id=”aNth1″>设置ul1的偶索引子元素的背景颜色</a>|
<a href=”#” id=”aNth2″>设置ul1的奇索引子元素的背景颜色</a>|
<a href=”#” id=”aFirst”>设置ul1的头子元素的背景颜色</a>|
<a href=”#” id=”aLast”>设置ul1的尾子元素的背景颜色</a>|
<a href=”#” id=”aOnly”>设置所有ul中唯一子元素的背景颜色</a>
</body>
</html>

1.$(“ParentSelector ChildTagName:nth-child(…)”)注-以下简写为:nth-child
描述:获取ParentSelector选择的元素集合的子元素集合进行索引筛选,如例子中点击aNth1后,对ID为ul1的元素的li子元素进行偶索引(even)选择($(“#ul1 li:nth-child(even)”)),even这关键字应该不陌生吧,在第三章中有讲到,若还不清楚的话可先去第三章瞄下再继续^^,当然这里也可以用odd,不过在这里跟第三章有点不同,就是第三章中,索引是从0开始,不过这里的索引要从1开始哦,本人感觉这点设计的不是很好- -!,没有规范,不知道是不是设计的时候疏忽了。此方法还有一个蛮灵活的用法,就像例子中aNth2点击事件里,用$(“#ul1 li:nth-child(2n+1)”)的方法完成了类似$(“#ul1 li:nth-child(odd)”)的功能,至于2n+1应该不用我来讲解了吧,初中数学就经常用到了。实在不懂的话跟贴吧- -!。此方法也可以跟上具体的索引比如“2”,不过要记住哦,这里的索引是从1开始滴!!