!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>常用子元素过滤选择器</title>
<script src="scripts/jquery-3.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
//:first-child 当前元素是父亲的第一个儿子
//这个排行不包括文本
$(function(){
/*alert($("li:first-child").length);
alert($("li:first-child").text());
//first-of-type 是当前元素父亲的当前类型儿子中的一个
alert($("li:first-of-type").length);*/
//:only-child 是父亲唯一的儿子
//alert($("span:only-child").length);//1
//only-of-type 是父亲当前类型的唯一的儿子
//alert($("span:only-of-type").length)
//nth-child(index/odd/even)
//是父亲的奇数个孩子 下标从1开始
alert($("ul li:nth-child(odd)").length);
});
</script>
</head>
<body>
<div>
<div id="div1">
<h3 class="one">手机品牌</h3>
<ul class="one">
<span>test11</span>
<li class="one">苹果</li>
<li class="one">华为</li>
<li class="one">vivo</li>
</ul>
<p>
<span>test22</span>
</p>
<h3>电脑品牌</h3>
<ul class="one">
<span>test</span>
<li>联想</li>
<li>苹果</li>
<li hidden="true">戴尔</li>
<li hidden="true">东芝</li>
<span>test</span>
</ul>
</div>
<div>
<h3>销量排行</h3>
<ol>
<li>vivo</li>
<li>苹果</li>
<li>华为</li>
</ol>
</div>
hahafinish
</div>
</body>
</html>
