JavaScript 学习-44.jQuery 遍历查找方法
JavaScript 学习-44.jQuery 遍历查找方法
上海-悠悠
发布于 2022-06-14 14:11:01
发布于 2022-06-14 14:11:01
前言
通过 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>
<div>
<input type="submit" value="提交按钮">
</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() 是从查询结果集中筛选符合条件的 not() 刚好跟 filter() 相反,删除不满足条件的
示例
// filter() 筛选符合条件的
a1 = $('p').filter('#p');
console.log(a1);
// not()
a2 = $('p').not('#p');
console.log(a2);本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2022-06-13，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录