jQuery常用的层次选择器
常用层次选择器
儿子
手机品牌
- 苹果
- 华为
- vivo
电脑品牌
- 苹果
- 联想
- 戴尔
销量排行
- vivo
- 苹果
- 华为
<!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">
$(function(){
//选择ul下的所有的li
//var $li = $("ul li");
//alert($li.length);
//alert($li.html());
/*for(var i=0;i<$li.length;i++){
var li = $li[i];
alert(li.innerHTML);
}*/
//s1>s2 s1匹配的元素下的匹配的s2 只找第一个 不找后面的
/*var $h3 = $("body>h3");
alert($h3.length);*/
//pre+next紧接在h3后面的ul
/*var $ul = $("h3+ul");
alert($ul.length);*/
//pre~全部的 重复的默认算一次
var $all = $("h3~ul");
alert($all.length);
});
</script>
</head>
<body>
<h3>儿子</h3>
<div>
<div>
<h3>手机品牌</h3>
<ul>
<li>苹果</li>
<li>华为</li>
<li>vivo</li>
</ul>
<h3>电脑品牌</h3>
<ul>
<li>苹果</li>
<li>联想</li>
<li>戴尔</li>
</ul>
</div>
<div>
<h3>销量排行</h3>
<ol>
<li>vivo</li>
<li>苹果</li>
<li>华为</li>
</ol>
</div>
</div>
</body>
</html>
