parent是找当前元素的第一个父节点,不管匹不匹配都不继续往下找
parents是找当前元素的所有父节点
closest是找当前元素的所有父节点 ,直到找到第一个匹配的父节点
<ul id="menu" style="width:100px;">
<li>
<ul>
<li>
<a href="#">Home</a>
</li>
</ul>
</li>
<li>End</li>
</ul>
<script type="text/javascript">
//点击Home时
$("#menu a").click(function() {
$(this).parent("ul").css("background", "yellow"); //0
$(this).parent("li").parent("ul").css("background", "yellow"); //1
$(this).parents("ul").css("background", "yellow"); //2
$(this).closest("ul").css("background", "yellow"); //3
return false;
});
</script>
1.parent()方法从**指定类型的直接父节点**开始查找,在"0"中,<a>的直接父节点是<li>所以在这里找不到<ul>父节点。在"2"中先找到了<li>,接着找到<ul>,并将它的背景色设置为yellow。**parent()返回一个节点**。
它和parents()不同的是,它只向上搜索一层,而parents()会搜索整个DOM树.
2.parents()方法查找方式同parent()方法类似,不同的一点在于,**当它找到第一的父节点时并没有停止查找,而是继续查找,最后返回多个父节点**,如在"2"中,使得id为menu的ul整个背景色变成了yellow。
3.closest()方法查找时从包含自身的节点找起,它同parents()很类似,不同点就在于它只返回一个节点如在"3"中,实现的功能同1相同。但它使得代码量减小,同"2"相比又**只返回单一的一个节点**。
它和parents()的区别:
* closest()从自身开始向上遍历,直到找到一个适合的节点,返回的jQuery对象包含0个或者1个对象;
* parents()从自身的父节点开始向上遍历,返回所有祖先节点,并根据选择器对这些节点进行筛选,最终返回的jQuery对象可能包含0、1或者多个对象。
寻找子节点和兄弟节点
- children(expr) //查找所有子元素,只会找到直接的孩子节点,不会返回所有子孙
- contents() //查找下面的所有内容,包括节点和文本。
- prev() //查找上一个兄弟节点,不是所有的兄弟节点
- prevAll() //查找所有之前的兄弟节点
- next() //查找下一个兄弟节点,不是所有的兄弟节点
- nextAll() //查找所有之后的兄弟节点
- siblings() //查找兄弟节点,不分前后
- find() //会在div元素内 寻找 class为classname的元素。(子元素找)
- filter() //则是筛选div的class为classname的元素。(平级找)
参考:
- http://senir.blog.163.com/blog/static/104118183201317114914406
- http://www.cnblogs.com/ini_always/archive/2011/11/09/2243671.html
- http://blog.csdn.net/lidiansheng/article/details/8634700
- http://www.cnblogs.com/lianzi/archive/2011/07/31/2122828.html