索引
jQuery遍历
html结构
结构描述
<section>
是<div>
的父元素parent<div>
是<p>
的父元素parent- 两个
<a>
都是第二个<p>
的子元素children <img>
是第二个<a>
的子元素children<section>
是其它所有元素的祖先- 四个
<p>
互为同胞siblings - 两个
<a>
互为同胞siblings
<section> <div> <p></p> <p> <a> <img src=""> </a> <a></a> </p> <p></p> <p></p> </div> <div></div> </section>
过滤器
返回a标签的上一级元素
$(document).ready(function(){ $("a").parent(); //使用parent方法,一个非常语义化的单词(父亲或母亲) });
返回a标签的所有上级元素
$(document).ready(function() { $("a").parents(); //使用parents方法,parent的复数形式,父母,在这里可以理解为所有长辈 });
比如在实际应用中,并不需要所有上级元素(我想基本不会有这种需求),如果只需要返回div呢,那么回到图例中是a标签的上上级,就需要过滤一下遍历的结果。
$(document).ready(function(){ $("a").parents("div"); //在parents方法中,给括号内加参数,这样的结果就是只返回上级中所有div。 });
但是上述写法是有很大局限性的,而且实际应用中应该也不会有这么简单的需求。
所以,在了解过滤器之前,要认识到为什么要过滤,什么是过滤。其实一句话就能说清楚,就是结果太多,需要缩小范围,才能进行下一步操作。
filter()、not()方法
filter词义:过滤
not词义:否定
filter()方法
通过定义一个标准(必要条件),符合标准的被返回,不符合标准的会从结果中被删除。
$(document).ready(function(){ $("p").filter(":odd"); //奇数p。使用了filter方法的odd参数,odd是奇数(even是偶数)。 }); $(document).ready(function(){ $('div').filter(":even"); //偶数的div。 });
not()方法
还是要通过定义一个标准,只返回不符合标准的,符合标准的被删除。
实例就不写了。
first()、last()方法
顾名思义,first是第一,last是最末
$(document).ready(function(){ $("div p").first(); //返回第一个div的第一个p });
$(document).ready(function(){ $("p a").last(); //last方法同理,最后一个p的最后一个a,这个就不要结合图例,因为图例里最后一个p里没有最后一个a,思维导图懒得重做了 });
版权声明:本文著作权归原作者所有,欢迎分享本文,谢谢支持!
分类:javascript语言
标签:javascript, jquery
发表于2020-03-03 19:29 沙发
返回a标签的所有上级元素里面,对象写哪去了