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()方法返回不匹配标准的所有元素。

相关推荐