<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>14.1jQuery遍历祖先节点的方法</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//1. parent():返回被选元素的直接父元素，该方法只会向上一级DOM树进行遍历
$('#btn1').click(function(){
$('#span1').parent().css('text-decoration','none');
});
//2. parents():返回被选元素的所有祖先元素，它一路向上直到根元素html
$('#btn2').click(function(){
$('#span2').parents().css('border','solid 2px red');
$('#span2').parents().css('margin','8px');
// parents(参数)
$('#span2').parents('body').css('border','solid 2px blue');
});
//3. parentsUntil():返回介于两个元素之间的所有祖先元素
$('#btn3').click(function(){
$('#span2').parentsUntil('div').css('border','solid 2px blue');
$('#span2').parentsUntil('div').css('border-radius','8px');
});
//4. offsetParent():返回最近定位的父元素，如果没有定位元素，返回的是HTML
$('#btn4').click(function(){
$('#span2').offsetParent().css('background-color','#CCC');
$('#span2').offsetParent().css('border','solid 2px green');
});
//5. closest(参数):返回匹配所传递的表达式的第一个单一祖先
//注意：返回一个或者零个jQuery对象
//parents()返回零个、一个、或者多个元素的jQuery对象
$('#btn5').click(function(){
$('#span2').closest('div').css('border','solid 2px pink');
});
});
</script>
<style>
#div1{ position:relative;}
li{ position:relative;}
span{ font-size:18px;}
</style>
</head>
<body>
<div>
<input type="button" id="btn1" value="parent()方法"><br>
<input type="button" id="btn2" value="parents()方法"><br>
<input type="button" id="btn3" value="parentsUntil()方法"><br>
<input type="button" id="btn4" value="offsetParent()方法"><br>
<input type="button" id="btn5" value="closest()方法"><br>
<div id="div1">
<ul id="ul1">
<li><a href="#"><span id="span1">被选元素1</span></a></li>
<li><a href="#"><span id="span2">被选元素2</span></a></li>
</ul>
</div>
</div>
</body>
</html>
效果图
