通过 jQuery 遍历，从被查找当前元素开始，在家族树中向上移动（祖先），向下移动（子孙），水平移动（兄弟），这种移动被称为对 DOM 进行遍历。
向上遍历 DOM 树，查找父元素和祖先元素
- parent() 查找父元素
- parents() 查找父元素以及祖先元素，一直到根节点html
<div id="demo">
<h3>jquery 遍历</h3>
<p id="p" class="text-info">hello world</p>
<form>
<p id="p1" class="text-info">用户登录</p>
<div>
<label for="user">用户名</label>
<input id="user" type="text" name="username" placeholder="请输入">
</div>
</form>
</div>
查找父元素和祖先元素
// 查找id=p1父元素
p = $('#p1').parent(); // form
console.log(p);
// 查找id=p1父元素以及祖先元素
ps = $('#p1').parents(); // [form, div#demo, body, html]
console.log(ps);
向上遍历 DOM 树，查找子元素和子孙元素
- children() 不传参数查找所有子元素，传参数查找指定子元素
- find() 查找后代元素，一路向下直到最后一个后代
children() 不传参数查找所有子元素
// 查找全部子元素
ch = $('form').children(); //[p#p1.text-info, div, div]
console.log(ch);
children() 传参数查找指定的子元素
// 查找指定子元素
ch1 = $('form').children('#p1'); //[p#p1.text-inf, div, div]
console.log(ch1);
ch2 = $('form').children('div'); //[div, div]
console.log(ch2);
ch3 = $('form').children('div:first'); //子元素第一个div
console.log(ch3);
find() 查找指定后代元素
// 查找指定后代元素
ch1 = $('form').find('#p1'); //[p#p1.text-info]
console.log(ch1);
ch2 = $('form').find('#user'); //[input#user]
console.log(ch2);
ch3= $('form').find('[type="submit"]'); //[input]
console.log(ch3);
在 DOM 树中水平遍历，有许多有用的方法让我们在 DOM 树进行水平遍历：
语法 描述 siblings() 被选元素的所有兄弟元素 next() 被选元素的下一个兄弟元素 nextAll() 被选元素的所有后面的兄弟元素 nextUntil() 介于两个给定参数之间的所有跟随的兄弟元素 prev() 被选元素的上一个兄弟元素 prevAll() 被选元素的所有前面的兄弟元素 prevUntil() 介于两个给定参数之间的所有的兄弟元素
// siblings() 所有兄弟元素
a = $('#p').siblings(); //[h3, form]
console.log(a);
// next() 下一个兄弟
b = $('#p').next(); //[form]
console.log(b);
c = $('#p').nextAll(); //[form]
console.log(c);
d = $('#p').prev(); //[h3]
console.log(d);
e = $('#p').prevAll(); //[h3]
console.log(e);
从查询结果中继续筛选，可以按查询结果的顺序按下标取值
- first() 返回查询结果中第一个元素
- last() 返回查询结果中最后一个元素
- eq() 返回指定索索引的元素，下标从0开始
// first() 第一个结果
a1 = $('p').first();
console.log(a1);
// last() 最后一个
a2 = $('p').last();
console.log(a2);
// eq() 下标取值
a3 = $('p').eq(0);
console.log(a3);
a4 = $('p').eq(1);
console.log(a4);
filter() 是从查询结果集中筛选符合条件的
not() 刚好跟 filter() 相反,删除不满足条件的
// filter()
a1 = $('p').filter('#p');
console.log(a1);
// not()
a2 = $('p').not('#p');
console.log(a2);
Original: https://www.cnblogs.com/yoyoketang/p/16355029.html
Author: 上海-悠悠
Title: JavaScript 学习-44.jQuery 遍历查找方法
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/535958/
转载文章受原作者版权保护。转载请注明原作者出处！