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

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

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() 方法返回不匹配标准的所有元素。
分享到：
| 点击按钮实现轮播切换
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics