jquery 层次选择器
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery-1.7.1.min.js"></script>
<script>
//在console里面看选择的元素
$(function () {
/*选择器*/
//空格表示后代
$('#d1 div')
//大于号表子级
$('#d1>div');
//+表示紧邻的
$('#d1+div');
//~表示之后的所有同级元素
$('#d1~div');
/*方法*/
$('#d11').next();
$('#d11').nextAll();
$('#d11').prev();
$('#d11').prevAll();
$('#d11').siblings();
$('#d11').parent();
$('#d11').children();
});
</script>
</head>
<body>
<div id="d1">
<div id="d11">
<div id="d111"></div>
<div id="d112"></div>
<div id="d113"></div>
</div>
<div id="d12"></div>
<div id="d13">
<div id="d131"></div>
<div id="d132"></div>
<div id="d133"></div>
</div>
</div>
</body>
</html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery-1.7.1.min.js"></script>
<script>
//在console里面看选择的元素
$(function () {
/*选择器*/
//空格表示后代
$('#d1 div')
//大于号表子级
$('#d1>div');
//+表示紧邻的
$('#d1+div');
//~表示之后的所有同级元素
$('#d1~div');
/*方法*/
$('#d11').next();
$('#d11').nextAll();
$('#d11').prev();
$('#d11').prevAll();
$('#d11').siblings();
$('#d11').parent();
$('#d11').children();
});
</script>
</head>
<body>
<div id="d1">
<div id="d11">
<div id="d111"></div>
<div id="d112"></div>
<div id="d113"></div>
</div>
<div id="d12"></div>
<div id="d13">
<div id="d131"></div>
<div id="d132"></div>
<div id="d133"></div>
</div>
</div>
</body>
</html>
