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