JQuery对象获取各类节点操作详解

在前面的《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上关注我，如果有问题欢迎在底下的评论区交流，谢谢。