您的位置：首页 > Web前端 > JQuery

jQuery学习之-层次选择器

2015-06-27 13:12 696 查看

jQuery 选择器之层次选择器

ance desc 选择器

该选择器的作用是选择ance父节点下的所有desc子节点，这个选择是不考虑层次数量的，即父节点的子节点和子节点的子节点都会被选择到的。例如：
选择div节点下的所有label节点，并且把节点的背景颜色变为蓝色的。

<!DOCTYPE html>
<html>
<head>
<title>ance desc选择器</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div>码农家族
<p>
<label></label>
</p>
<label></label>
</div>

<script type="text/javascript">
$("div label").css("background-color","blue");
</script>
</body>
</html>

parent child选择器
该选择器的范围比较小，主要是选择父节点的直接子节点，不包括孙子节点。例如：
选择div标签的所有label子节点，并且改变CSS的样式

<!DOCTYPE html>
<html>
<head>
<title>parent > child选择器</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div>
码农家族
<p>
<label></label>
</p>
<label></label>
<label></label>
</div>
<label></label>

<script type="text/javascript">
<span style="color:#ff0000;">  $("div>label").css("border", "solid 5px red");</span>
</script>
</body>
</html>

相邻元素选择器

这个选择器可以选择前一个元素相邻的下一个元素，这两个元素之间是平行的。
例如：把P元素后面最近的一个span元素的背景色变为红色。

<!DOCTYPE html>
<html>
<head>
<title>prev + next选择器</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div>
码农家族
<label></label>
<p></p>
<label></label>
<label></label>
</div>
<label></label>

<script type="text/javascript">
$("p+label").css("background-color","red");
</script>
</body>
</html>

prev ~ siblings选择器

相邻选择器，和上面不同的地方在于，这个选择器会选择prev元素后面的所有的相邻元素。
例如，选择P元素后面所有的label元素，并且改变样式和插入内容。

<!DOCTYPE html>
<html>
<head>
<title>prev ~ siblings选择器</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div>
码农家族
<label></label>
<p></p>
<label></label>
<label></label>
</div>
<label></label>

<script type="text/javascript">
$("p~label").css("border", "solid 1px red");
$("p~label").html("我们都是p先生的粉丝");
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航