这几个筛选器都是找父亲的，但具体用法不同
.parent(expr) - 查找父亲，只查一级，正宗的父亲，表达式应该很少用
.parents(expr) - 加了复数，就变成多个父亲了，从父亲开始查，一直往上查，查到根元素，然后通过expr表达式过滤
.closest(expr) - 这个跟parents类似，但是这个是从当前元素开始查，并且查到符合表达式的就停止了
.parentsUntil(expr) - 跟parents类似，区别是不会查到根元素，遇到expr匹配的就停止了，同时不包括expr匹配到的那个元素
测试用例：
<body> <div id="main"> <div id="hot" class="rightbar"> <h2>热门推荐</h2> <ul> <li> <ul> <li class="p">融氏橄榄油</li> <li>帮宝适纸尿裤</li> <li id="h">有机大米</li> <li>妙洁垃圾袋</li> <li>优乐美奶茶</li> <li>亲亲果冻</li> </ul> </li> <li> <ul> <li>海飞丝洗头膏</li> <li>六神花露水</li> <li>舒肤佳香皂</li> <li>心相印纸巾</li> <li>哇哈哈矿泉水</li> <li>王老吉</li> </ul> </li> </ul> </div> </div> </body>
<script type="text/javascript" language="javascript"> //此处为jQuery代码 </script>
测试1：找到id="h"的元素的父元素并设置背景色为灰
$("#h").parent().css("background-color","#ccc");
效果：
上面的代码等价于
$("#h").parent("ul").css("background-color","#ccc");
如果要找爷爷辈的
$("#h").parent("li").css("background-color","#ccc");
则会失败
测试2：找到id="h"的祖辈元素中符合是ul标签的元素，设置背景色为灰
$("#h").parents("ul").css("background-color","#ccc");
效果：
parents不但找到了父亲，还找到了曾祖父 ^_^，但是closest就不会，因为closest找到父亲就停止找了
测试3：用closest找到id="h"的祖辈元素中符合是ul的标签的元素，设置背景色为灰
$("#h").closest("ul").css("background-color","#ccc");
效果：
测试4：测试closest是从当前元素开始查找，而parents是从父辈元素开始查找，找到id="h"的父辈元素中是li标签的元素，并设置背景色为灰
$("#h").parents("li").css("background-color","#ccc");
效果：
$("#h").closest("li").css("background-color","#ccc");
效果：
测试5：找到id="h"的父元素中是ul标签的元素，并设置背景色为灰，目的是测试parentsUntil查找到的expr就停止了，但不包含符合expr的那个元素，对比测试1
$("#h").parentsUntil("ul").css("background-color","#ccc");
效果：
没出来，其实已经找到了，只不过把找到的ul给排除了，不信找找爷爷辈的li试试
$("#h").parentsUntil("li").css("background-color","#ccc");
效果：
出来了吧，其实这次变灰的是ul，因为把li排除了
测试6：测试parents和parentsUntil的区别，parentsUntil找到就停止了，parents会一直往上找，找到id="h"的父辈元素中是li标签的元素，并设置背景色为灰
这个看测试2和测试5的第一个就能看出来。
</br>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-1944176156128447";
/* cnblogs 首页横幅 */
google_ad_slot = "5419468456";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
相关推荐
在JavaScript的jQuery库中，`closest()`, `parent()`, 和 `parents()` 是三个非常重要的方法，用于在DOM树中查找元素的父级。这些方法在网页开发中常常被用来定位和操作元素，特别是在处理复杂的DOM结构时。下面将...
在这个sprint中，因为要写前端UI，所以用到了jQuery，但是jQuery在向上遍历DOM树的API中，有parents()、 parent()、closest()这几个，一直不太清楚它们具体的区别，所以狠下心好好读了一下jQuery的API文档，并把区别...
jQuery中还包含一系列其他的筛选方法，如`parent`、`parents`、`parentsUntil`、`next`、`prev`、`nextAll`、`prevAll`、`nextUntil`、`prevUntil`、`siblings`、`children`和`contents`等。这些方法都是基于当前...
`parent()`选取直接父元素，`parents()`选取所有祖先元素，直到`<body>`，而`parentsUntil()`则在达到指定条件时停止选取。 `prev()`、`prevAll()`、`prevUntil()`分别用于选取前一个兄弟元素、所有前面的兄弟元素...
JQuery开发手册 jQuery 核心函数 jQuery([sel,[context]]) jQuery(html,[ownerDoc]) jQuery(callback) jQuery.holdReady(hold)1.6+ jQuery 对象访问 each(callback) size() length selector context get...
1.获取父级元素 $("#id").parent() 获取其父级元素 $("#id").parents() 获取其所有的祖先元素 ...获得匹配元素后面的所有同胞元素，由选择器筛选是可选的。 $("#id").prev(selector) 获得匹配元素紧邻的前一个同胞元素
提示：jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节，您将学习到更多有关选择器的语法。 文档就绪函数 您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready ...
jQuery 1.11.0 速查表 核心 jQuery 核心函数 jQuery([sel,[context]]) jQuery(html,[ownerDoc])1.8* jQuery(callback) jQuery.holdReady(hold) jQuery 对象访问 each(callback) size() length selector ...
1. **选择器**：jQuery 提供了丰富的选择器来定位DOM元素，如`first`、`last`用于选取第一个或最后一个元素，`first-child`和`last-child`选取父元素的第一个或最后一个子元素，`parent>child`选取直接子元素，`not...
选择器 基本 #id element .class * selector1,selector2,selectorN 层级 ancestor descendant parent > child prev + next prev ~ siblings 基本 :first :last :not :even :odd :eq :gt :lt :...
选择器 基本 #id element .class * selector1,selector2,selectorN 层级 ancestor descendant parent > child prev + next prev ~ siblings 基本 :first :last :not :even :odd :eq :gt :lt :...
在效率上，`parent()`和`:parent`通常更快，因为它们处理的元素数量较少，而`parents()`和`closest()`可能涉及更多元素。 在实际应用中，这些方法可以帮助开发者更有效地定位和操作DOM结构。例如，在需要改变某个...
- `closest()`逐级向上查找，一旦发现匹配的元素就停止，`parents()`则会一直向上查找直到根元素，然后筛选匹配的选择器。 - `closest()`可能返回0或1个元素，而`parents()`可能包含0个、1个或多个元素。 `closest...
22. `.parents()` 方法：获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选）。 23. `.parentsUntil()` 方法：获得当前匹配元素集合中每个元素的祖先元素，直到遇到匹配选择器的元素为止。 24. `.prev...
[end]) 查找 add(expr) children([expr]) closest([expr]) contents() find(expr) next([expr]) nextAll([expr]) nextUntil([expr]) offsetParent() parent([expr]) parents([expr]) parentsUntil([expr]) prev(...