jQuery父级以及同级元素查找

一、jQuery父级以及同级元素查找

1、获取父节点

注意与parents的区别,parents()从自身的父节点开始向上遍历,返回所有祖先节点,并根据选择器对这些节点进行筛选,最终返回的jQuery对象可能包含0、1或者多个对象  ,而parent它只向上搜索一层。

closest()从自身开始向上遍历,直到找到一个适合的节点(一般只找到与其临近的父级节点),返回的jQuery对象包含0个或者1个对象;

2、兄弟节点 siblings  /next  (都是往下获取节点)

$(function(){

$('.one').siblings().css({background:'red'})

// $('.one').next().css({background:'red'})    //next只返回一个节点,即下一个

// $('.one').nextAll().css({background:'red'})    //nextAll返回所有之后的兄弟节点,在nextAll()里可以进行传参 ,进行过滤。

// $('.one').nextUntil('.b').css({background:'green'})   //可传参亦可不传参,若传参直到哪一个终止,不包括传参的那个值

// $('li').css({background:'orange'}).filter('.b').css({background:'pink'})

// $('li').not('.b').css({background:'pink'})

})

<ul>

  <li class="one"></li>

  <li class="b"></li>

 <li></li>

往前获取节点:prev(),返回上一个兄弟节点,不是所有的兄弟节点,而prevAll()返回所有之前的兄弟节点

3、获取子节点 

children()  返回所有子节点,该方法只返回直接的孩子节点,不会返回所有的子孙节点。如果我们没有应用选择器表达式,返回的 jQuery 对象包含了所有子元素。如果应用一个选择器的话,那么只会包括匹配的项目。

fin的()是遍历当前元素集合中每个元素的后代。只要符合,不管是儿子辈,孙子辈都可以;与其他的树遍历方法不同,选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回,可以传递通配选择器 '*'。find只在后代中遍历,不包括自己。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作。但实际上...
    阿r阿r阅读 1,044评论 0 9
  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 671评论 0 3
  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    前端进阶之旅阅读 16,681评论 18 503
  • 第1章 简介 第2章 DOM节点的创建 2-1 DOM创建节点及节点属性 通过JavaScript可以很方便的获...
    mo默22阅读 839评论 0 8
  • 在每个人的社交圈子里,都会有这样一类人,他们做事情并没有什么实际行动,只凭借着一张伶牙俐齿的嘴赢得一切。 我之前觉...
    巴黎有朵瑜阅读 434评论 1 5