`
xiaotongeye
  • 浏览: 19835 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

jQuery获取父级元素、同级元素、子元素、过滤

阅读更多
父级元素:
<body>body (曾曾祖父)
  <div>div (曾祖父)
    <ul>ul (祖父)  
      <li>li (直接父)
        <span>span</span>
      </li>
    </ul>   
  </div>
</body>

1.parent() 方法返回被选元素的直接父元素。
2.parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
3.parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
$(document).ready(function(){
  $("span").parentsUntil("div");
});

4.closest()
closest会首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,一层一层往上,直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。
closest和parents的主要区别是:1,前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找;2,前者逐级向上查找,直到发现匹配的元素后 就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤;3,前者返回0或1个元素,后者可能包含0 个,1个,或者多个元素。
closest对于处理事件委派非常有用。

同级元素:

1.siblings() 方法返回被选元素的所有同胞元素。
$("h2").siblings();

返回 <h2> 的所有同胞元素
$("h2").siblings("p");

返回属于 <h2> 的同胞元素的所有 <p> 元素
2.next() 方法返回被选元素的下一个同胞元素。
3.nextAll() 方法返回被选元素的所有跟随的同胞元素。
4.nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
$("h2").nextUntil("h6");

返回介于 <h2> 与 <h6> 元素之间的所有同胞元素
5.prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已

子元素:

1.children() 方法返回被选元素的所有直接子元素。
也可以使用可选参数来过滤对子元素的搜索。
$("div").children("p.select");

返回类名为 "select" 的所有 <p> 元素,并且它们是 <div> 的直接子元素
2.find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。

过滤:

1.first() 方法返回被选元素的首个元素。
2.last() 方法返回被选元素的最后一个元素。
3.eq() 方法返回被选元素中带有指定索引号的元素。
4.filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
$("p").filter(".intro");

返回带有类名 "intro" 的所有 <p> 元素
5.not() 方法返回不匹配标准的所有元素。
分享到:
评论

相关推荐

    使用jquery选择器如何获取父级元素、同级元素、子元素

    本文将深入探讨如何使用jQuery选择器获取父级元素、同级元素和子元素,这对于网页交互和DOM操作至关重要。 一、获取父级元素 jQuery提供了`parent([expr])`方法来获取元素的直接父元素。例如,如果你有一个`&lt;a&gt;`...

    jQuery父级以及同级元素查找介绍

    3. **jQuery.children(expr)**: 此方法用于获取当前元素的所有直接子元素。如果提供`expr`,则只返回匹配该表达式的子元素。例如,`$("div").children()`将返回所有`div`元素的子元素,而`$("div").children("p")`则...

    jQuery基于当前元素进行下一步的遍历

    在jQuery中,一旦我们通过选择器选中了一个或一组元素,常常需要对这些元素的相邻、父级或者子级元素进行进一步的操作。这涉及到jQuery提供的遍历方法,它们可以帮助我们高效地导航DOM结构。让我们详细了解一下基于...

    jQuery框架方法大全

    - `children()`: 获取元素的直接子元素。 - `filter()`: 过滤匹配的元素集合。 - `find()`: 在当前元素集合中查找后代元素。 - `is()`: 检查元素是否匹配给定的选择器。 - `next()`, `prev()`: 获取元素的下一...

    Jquery 1.9.1源码分析系列(十二)之筛选操作

    - `children`:返回所有直接子元素。 - `contents`:返回所有子节点,包括元素节点和文本节点。 这些筛选方法为开发者提供了灵活而强大的方式去定位和操作DOM元素,是实现复杂动态交互和页面控制不可或缺的工具。每...

    jQuery1.7.1_API中文手册

    选择器方法:用于选取页面元素,如id选择器$("#id")、类选择器$(".class")、元素选择器$("div")、通用选择器$("*")、后代选择器$("table tr td")、子选择器$("#id&gt;span")、相邻兄弟选择器$("label+input")、同级选择...

    jQuery中非常重要的遍历函数.doc

    - children()函数用于获取一个元素的所有直接子元素。例如,如果你有一个`div.container`,你可以使用`.children()`来获取所有直接嵌套在其中的`div.photo`、`div.title`和`div.rating`。 2. **filter()**: - 这...

    jQuery 遍历函数详解

    如果元素有多个同级子元素,它会返回所有这些子元素的jQuery对象。 .closest()函数从元素本身开始向上逐级匹配,返回第一个匹配到的祖先元素。这在需要从子元素开始向上遍历到某个父级元素时非常有用。 .contents...

    jquery常见的选择器、筛选器、事件.docx

    - **子元素选择器**: 使用 `$(".parent &gt; .child")` 来选择指定类名下的直接子元素。 - 示例:`$(".my &gt; li")` 选择 `class="my"` 内的直接子节点中的 `li` 元素。 - **相邻兄弟选择器**: 使用 `("#sibling + ...

    jQuery查找节点方法完整实例

    - `.siblings(selector)`:获取当前元素的所有同级元素,同样可以使用`selector`进行过滤。 - `.parent()`或`.parents(selector)`:返回元素的父级或所有祖先元素。 - `.next()`或`.nextAll(selector)`:获取当前...

    jQuery基础_入门必看知识点

    - **父子兄选择器**:如`parent()`选择父级元素,`children()`选择子元素,`sibling()`选择同级元素等。所有筛选选择器均以函数形式存在,用以获取更为精确的DOM元素集。 ### jQuery动画与事件 - **排队机制**:在...

Global site tag (gtag.js) - Google Analytics