在前面的《JQuery的选择器和过滤器汇总》中我总结了JQ中直接获取元素的几种方式,但是在很多时候,都是某个元素的事件响应中,需要对另一个元素进行操作。这个时候除了使用id或者class这种定死的方式,还可以在事件响应的元素上做相对的查询。这一篇我们就来总结一下。
操作环境
h5内容如下
<div id="container">
<div id="box1"><span id="span1"></span></div>
<div id="box2"><span id="span2"></span></div>
<span id="span3"></span>
<p>I am p</p>
</div>
父级元素
首先定位到其中id为span3的span元素,然后在此基础上进行操作。
let $container=$('#container');
let $span=$container.children('span');
这里没有直接用id来查找,而是使用了JQ元素的children
方法来查找直接子元素。
父级元素查找有如下两种方式
- parent()
- parents()
其中前者返回最近一级父元素,而后者返回所有的父级元素
console.log($span.parent());
console.log($span.parents());
返回如下
jQuery.fn.init [div#container, prevObject: jQuery.fn.init(1)]
jQuery.fn.init(3) [div#container, body, html, prevObject: jQuery.fn.init(1)]
可以前者只是返回了container元素,而后者将body和html也都返回了。
值得一提的是,两种方法都可以带参数做为选择器来对返回的结果进行过滤。例如
$span.parents('#container')
就只会返回container元素。
子级元素
子级元素也有两种
- children()
- find()
前者是直接子元素,在上面用过了,后者是所有子元素。同样也都可以带参数做为选择器。关于children
和find
方法在查找子元素上的区别和用法可以参考《JQuery利用find查找子元素并修改其样式和属性》。
兄弟元素
兄弟元素有如下六种
- prev() - 相邻的上个元素
- prevAll() - 前面所有的兄弟节点
- prevUntil() - 前面一直到某条件(不包括)的兄弟节点
- next() - 相邻的后个元素
- nextAll() - 后面的所有兄弟节点
- nextUntil() - 后面一直到某条件(不包括)的兄弟节点
例如
console.log($span.prev());
console.log($span.prevAll());
console.log($span.prevUntil());
console.log($span.next());
的返回结果为
jQuery.fn.init [div#box2, prevObject: jQuery.fn.init(1)]
jQuery.fn.init(2) [div#box2, div#box1, prevObject: jQuery.fn.init(1)]
jQuery.fn.init(2) [div#box2, div#box1, prevObject: jQuery.fn.init(1)]
jQuery.fn.init [p, prevObject: jQuery.fn.init(1)]
我是T型人小付,一位坚持终身学习的互联网从业者。喜欢我的博客欢迎在csdn上关注我,如果有问题欢迎在底下的评论区交流,谢谢。