先来一段例子代码,便于以下解说
<div>
<ul class="the_ul">
<li></li>
<li></li>
<li></li>
<li class="the_li">
<a href="#" class="the_test"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#" class="the_test2"></a>
</li>
<li></li>
<li></li>
</ul>
</div>
一.获取父级元素,.parent(selector) && .parents(selector) && parentsUntil();选择器可选
1.获取当前匹配元素的父元素,.parent(selector),例如
$('.the_test').parent() //取得的是 a标签 的父元素,第4个 li对象
还可以往上增加的,如
$('.the_test').parent().parent() //取得的是 ul对象
那么理所当然
$('.the_test').parent().parent().parent() //取得的便是 div对象
当然不建议这样用,太长了,不好看还没效率? 0.0
2.获取当前匹配元素的每一个祖先元素,.parents(selector),例如
$('.the_test').parents() //取得ul、div、body、html对象
单单多加了一个“s”,以上取得的便是 a标签 的每一个祖先元素,包括:ul、div、body、html,直到文档根部;由此可见,我们在用这个选择器的时候,很多时候都得加上刷选器,如:
$('.the_test').parents('li') //第4个 li对象
$('.the_test').parents('div') //第4个 div对象
3.parentsUntil(),获得当前匹配元素的每一个祖先元素集合,直到刷新器匹配的对象为止(不包括选择器匹配的对象),如
$('.the_test').parentsUntil('ul') //只取得了第4个 li对象 呢
注意:刷选器是必选的,而且parentsUntil 中“U”是大写,亲测小写无效,驼峰命名(以下同)
二.获取同级元素,.next() && .nextAll() && .andSelf() && .prev() && .prevAll();也就5个,而且都有相似性
1.获取当前匹配元素的下一个同级元素,.next(),如
$('.the_test').next() //取得第2个 a对象
当然也是可以连缀下去的!
$('.the_test').next().next() //取得第3个 a对象
2.获取当前匹配元素以下的所有同级元素,.nextAll(),如
$('.the_test').nextAll() //取得第2、3、4个 a对象
这个加上刷选器就更加好用准确了,如
$('.the_test').nextAll('.the_test2') //取得第4个 a对象
3.获取当前匹配元素以下的所有同级元素,包括当前匹配元素,如
$('.the_test').andSelf() //取得所有 a对象
$('.the_test').andSelf('.the_test2') //取得第1、4个 a对象
4.剩下 .prev() && .prevAll() 就不说了,和 .next() && .nextAll() 类似,只不过next是往下,prev是往上。(貌似没有往上包括自己呢?算了~往下包括自己都不一定用得上)
三.获取子元素
1.> ,这个必须举例来说明了
$('.the_ul > li') //取得ul下的所有 li对象
必须层层递进,越级写是不起作用的
$('.the_ul > a') //false,获取不到任何对象
$('.the_ul > li > a') //true,获得所有的 a标签对象
- .children() ,获得匹配元素的子元素(只是儿子,孙子之类的滚一边去)
$('.the_ul').children() //取得所有的 li对象
$('.the_li').children('.the_test') //取得第1个 a标签对象
- .find() ,获得当前匹配元素的后代元素,刷选器是必选的,这个好用,隔几代都可以找到(效率不高?)
$('div').find('.the_test') //找div的后代,取得第1个 a标签对象