高级选择器
- 所谓的高级选择器指的就是层次选择器,他可以根据父节点来选择子节点的信息,包括如下的选择器
| NO |
选择器 |
描述 |
返回类型 |
| 1 |
祖先 后代 |
根据一个元素可以取得指定的所有子元素(不管中间有多少后代),可以使用find()函数代替空格 |
元素集合 |
| 2 |
祖先>后代 |
根据一个元素去除所有对应的第一层对应子元素 |
元素集合 |
| 3 |
元素+相邻 |
指的是所有与他平级的元素信息,可以使用next()代替 |
元素集合 |
| 4 |
元素~兄弟 |
取得与他评级的元素信息,可以使用nextAll()方法代替 |
单个元素 |
取得后代元素
- 一定要记住的是" " 空格是存在特殊含义的,
- 选择所有的后代元素
<html>
<head>
<meta charset="UTF-8">
<title>jquery项目</title>
<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript">
$(
function(){
$("div span").attr("class","init");
}
);
</script>
</head>
<body>
<div>
<div ><span>我爱这个世界</span></div>
<span>生活还需继续!</span>
<p><span>生活不会偏袒你!</span></p>
</div>
</body>
</html>
$(
function(){
$("div").find("span").attr("class","init");
}
);
- find()属于jQuery中定义的函数,所以此函数一定要通过jQuery对象实现调用,找到指定元素中所有后代元素信息
- 现在不管span在多少级里面,只要你出现在"div"元素之中就表示允许操作.
取得指定元素的第一层子元素
<html>
<head>
<meta charset="UTF-8">
<title>jquery项目</title>
<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript">
$(
function(){
$("div>span").attr("class","init");
}
);
</script>
</head>
<body>
<div>
<div ><span>我爱这个世界</span></div>
<span>生活还需继续!</span>
<p><span>生活不会偏袒你!</span></p>
</div>
</body>
</html>
- 此时在"div"的元素之下只存在有两个直接的span子元素,所以只有两个span能够设置
- 此操作可以使用children()函数代替,找到第一个子元素
$(
function(){
$("div").children("span").attr("class","init");
}
);
jQuery中find()于children()函数的区别
- find()函数可以找到指定的元素中的所有的后代元素,相当于"祖先 后代" 选择器
- children() 函数可以找到指定的元素中的直接后代元素相当于"父节点>子节点" 选择器.
相邻节点选择器
<html>
<head>
<meta charset="UTF-8">
<title>jquery项目</title>
<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript">
$(
function(){
$("div+span").attr("class","init");
}
);
</script>
</head>
<body>
<div>
<div ><span>我爱这个世界</span></div>
<span>生活还需继续!</span>
<p><span>生活不会偏袒你!</span></p>
</div>
</body>
</html>
- 此时页面中于div元素同级的span元素有且只有一个,所以只能够选择到一个span元素,通用的操作也可以使用next()函数完成
- 示例:next()函数处理
$(
function(){
$("div").next("span").attr("class","init");
}
);
选择所有平级元素
- 选择"+“或者是next()函数只能够选取一个平级元素,如果现在要取得全部的平级元素,那么可以使用”~"完成
- 所有相邻元素取得
<html>
<head>
<meta charset="UTF-8">
<title>jquery项目</title>
<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript">
$(
function(){
$("div~span").attr("class","init");
}
);
</script>
</head>
<body>
<div>
<div ><span>我爱这个世界</span></div>
<span>生活还需继续!</span>
<span>如果你迷茫的时候,就继续努力,反正时间都在走,与其感叹不如奋斗!</span>
<span>加油吧</span>
<span>你最后的机会!</span>
<p><span>生活不会偏袒你!</span></p>
</div>
</body>
</html>
$(
function(){
$("div").nextAll("span").attr("class","init");
}
);