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

JQuery 层级选择器(next(),preAll(),siblings(),parent())

2017-12-17 18:49 549 查看

$('#d1 div') //取所有子元素，不管是几层。

$('#d1>div') //取直接子元素，一层

$('#d1+div') //之后紧邻的一个同级元素

$('#d1~div') //之后的所有同级元素

$('#d1').next() //后面的一个同级元素

$('#d1').nextAll() //后面的所有同级元素

$('#d1').prev() //前面的一个同级元素

$('#d1').prevAll() //前面的所有同级元素

$('#d1').siblings() //前面和后面的所有同级元素

$('#d1').parent() //直接父元素

$('#d1').parents('tr') //所有的祖先元素中的<tr>标签对象。

$('#d1').children() //所有直接子元素

$('#d1').find(':button') //所有子元素中的button标签对象。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
$(function () {
$('li').hover(function () {//鼠标移上
$(this).css('background-color', 'red')
.prevAll()//这个方法找到当前节点的所有节点，破坏了当前的链
.css('background-color', 'yellow')
.end()//恢复最近的一次链的破坏之前的JQuery对象
.nextAll()
.css('background-color', 'blue')
;
}, function () {//鼠标移开
$(this).css('background-color', 'white')
.siblings().css('background-color', 'white');//获取左右的兄弟节点
});
});
</script>
</head>
<body>
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
</ul>
</body>
</html>

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

标签： jquery

相关文章推荐

新的分享

章节导航