JavaScript 学习-44.jQuery 遍历查找方法

Posted 2022-06-10 上海-悠悠

前言

通过 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);