jQuery遍历节点-closest()方法使用详解

closest()遍历节点的方法与前面我讲到的遍历子节点不一样，closest()是获取第一个相匹配的祖先元素，注意：起始点包括自身元素,下面小编来给大家分享一下。closest()
此方法获取第一个相匹配的祖先元素，注意：起始点包括自身元素。
另外这个方法是必须要传入一个选择器表达式参数的，如果不传入参数的话，就会返回一个空的jquery对象。
要注意这个方法和jquery中的parents()方法的区别。
下面来看实例：

<div class="demo">梦三秋博客 
    <ul> 
        <li>第一个li</li> 
        <li class="li2">第二个li</li> 
        <li>第三个li</li> 
    </ul> 
</div>
$("ul>li").click(function(e){ 
    $(e.target).closest("div").css("background-color","blue"); 
})

里的e.target是触发了单击事件的元素(DOM对象)
上面的jquery代码的意思是：为ul中的每个直属的li元素绑定单击事件，这个单击事件的结果是找到触发单击事件的元素的最近的div元素，然后让这个div元素的背景颜色变成蓝色。
上面jquery代码的结果是：当你点击任何一个li元素时候，页面的div元素的背景颜色会变成蓝色

<style>
.demo{
border:2px solid #0000FF;color:#FF0000;padding:10px;
}
</style>
<div class="demo">梦三秋博客
 <ul>
     <li>第一个li</li>
     <li class="li2">第二个li</li>
     <li>第三个li</li>
 </ul>
</div>

<script>
$("ul>li").click(function(e){
 $(e.target).closest("div").css("background-color","blue");
})
</script>

给它增加事件绑定

$("ul>li").click(function(e){ 
    $(e.target).closest().css("background-color","blue"); 
})

注意:这里的closest没有传入参数。
运行上面的代码，当您点击页面中的li元素时，div元素的背景色是不会改变的，因为当closest方法没有传入参数时，肯定是取不到元素的。

<style type="text/css">
.demo{
border:2px solid #0000FF;color:#FF0000;padding:10px;
}
</style>
<div class="demo">梦三秋博客
<ul>
    <li>第一个li</li>
    <li class="li2">第二个li</li>
    <li>第三个li</li>
</ul>
</div>
<script>
$("ul>li").click(function(e){
 $(e.target).closest().css("background-color","blue");
})
</script>

注意：e.target 是目标对象，e.event是目标所发生的事件。