JQuery笔记四 ：遍历获取内容

根据一个元素以及和这个元素之间的关系，来查找到另外的元素。

如下图，显示了HTML中的结构树，通过 JQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

 

遍历 - 父级（祖先）

向上遍历DOM数

通过如下三个方法，我们可以获取父级元素

• parent()
• parents()
• parentsUntil()

JQuery parent()

parent() 方法返回被选元素的直接父元素。
该方法只会向上一级对 DOM 树进行遍历。

HTML代码：
<section>
    <h1>文章的<span>标题</span>啦</h1>
    <p>文章的内容内容内容内容内容内容</p>
    <p>结尾部分</p>
</section>


JQ代码：
$(document).ready(function () {
    // 通过parent()函数，可获取当前元素的直接父级元素
    var elem = $('span').parent();
    console.log(elem);
});

JQuery parents()

parents() 方法返回被选元素的所有父元素。

HTML代码：
<section>
    <h1>文章的<span>标题</span>啦</h1>
    <p>文章的内容内容内容内容内容内容</p>
    <p>结尾部分</p>
</section>


JQ代码：
$(document).ready(function () {
    // 通过parent()函数，可获取当前元素的所有父级元素
    var elem = $('span').parents();
    console.log(elem); 
});

JQuery parentsUntil()

parentsUntil() 方法返回介于两个给定元素之间的所有父级元素

HTML代码：
<section>
    <h1>文章的<span>标题</span>啦</h1>
    <p>文章的内容内容内容内容内容内容</p>
    <p>结尾部分</p>
</section>


JQ代码：
$(document).ready(function () {
    // 获取span在body标签下的所有父级元素
    var elem = $('span').parentsUntil('body');
    console.log(elem);
});

 

遍历 - 子级（后代）

向下遍历DOM树

向下遍历可以使用如下两个函数：

• children()
• find()

JQuery children()

children() 方法返回被选元素的所有直接子元素。
该方法只会向下一级对 DOM 树进行遍历。

HTML代码： 
<section>
    <h1>文章的<span>标题</span>啦</h1>
    <p>文章的内容内容内容内容内容内容</p>
    <p>结尾部分</p>
</section>


JQ代码：
$(document).ready(function () {
    // 获取section标签下的所有直接子元素
    var elem = $('section').children();
    console.log(elem);
});

JQuery find()

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

HTML代码： 
<section>
    <h1>文章的<span>标题</span>啦</h1>
    <p>文章的内容内容内容内容内容内容</p>
    <p>结尾部分</p>
</section>


JQ代码：
$(document).ready(function () {
    // 获取section标签下的所有p标签的子元素
    var elem = $('section').find('p');
    console.log(elem);

    // 获取section标签下的所有子元素
    var elems = $('section').find('*');
    console.log(elems);
});

 

遍历 - 同级（兄弟）

同级元素拥有相同的父级元素

在 DOM 树中水平遍历

有许多有用的方法让我们在 DOM 树进行水平遍历：

• siblings()
• next()
• nextAll()
• nextUntil()
• prev()
• prevAll()
• prevUntil()

JQuery siblings()

siblings() 方法返回被选元素的所有同胞元素。

HTML代码： 
<section>
    <h1>文章的<span>标题</span>啦</h1>
    <p>文章的内容内容内容内容内容内容</p>
    <p>结尾部分</p>
</section>


JQ代码：
$(document).ready(function () {
    // 获取h1标签的所有同级元素
    var elem = $('h1').siblings();
    console.log(elem); // p p 
});

JQuery next()

next() 方法返回被选元素的下一个同胞元素

HTML代码： 
<section>
    <h1>文章的<span>标题</span>啦</h1>
    <p>文章的内容内容内容内容内容内容</p>
    <p>结尾部分</p>
</section>


JQ代码：
$(document).ready(function () {
    // 获取h1标签的下一个同级元素
    var elem = $('h1').next();
    console.log(elem); // p
});

JQuery nextAll()

nextAll() 方法返回被选元素的所有跟随的同胞元素。

HTML代码： 
<section>
    <h1>文章的<span>标题</span>啦</h1>
    <p>文章的内容内容内容内容内容内容</p>
    <p>结尾部分</p>
</section>


JQ代码：
$(document).ready(function () {
    // 获取p标签的后面的所有同级元素
    var elem = $('p').nextAll();
    console.log(elem); // p
});

JQuery nextUntil()

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

HTML代码： 
<section>
    <h1>文章的<span>标题</span>啦</h1>
    <p>文章的内容内容内容内容内容内容</p>
    <p>结尾部分</p>
    <h2>重点注意</h2>
</section>


JQ代码：
$(document).ready(function () {
    // 获取
    var elem = $('h1').nextUntil('h2');
    console.log(elem); // p p 
});

JQuery prev() & prevAll() & prevUntil()

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同级元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

 

遍历 - 过滤

三个最基本的过滤方法是：

• first()
• last()
• eq()

基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法，比如 filter() 和 not() 允许选取匹配或不匹配某项指定标准的元素。

JQuery first()

first() 方法返回被选元素的首个元素。

HTML代码： 
<section>
    <h1>文章的<span>标题</span>啦</h1>
    <p>文章的内容内容内容内容内容内容</p>
    <p>结尾部分</p>
    <h2>重点注意</h2>
</section>


JQ代码：
$(document).ready(function () {
    // 获取section元素中的第一个为p标签的子元素
    var elem = $('section p').first();
    console.log(elem); // p p 
});

JQuery last()

last() 方法返回被选元素的最后一个元素。

HTML代码： 
<section>
    <h1>文章的<span>标题</span>啦</h1>
    <p>文章的内容内容内容内容内容内容</p>
    <p>结尾部分</p>
    <h2>重点注意</h2>
</section>


JQ代码：
$(document).ready(function () {
    // 获取section元素中的最后一个为p标签的子元素
    var elem = $('section p').last();
    console.log(elem); // p p 
});

JQuery eq()

eq() 方法返回被选元素中带有指定索引号的元素。
下标从0开始，因此首个元素的下标是0而不是1。

HTML代码： 
<section>
    <h1>文章的<span>标题</span>啦</h1>
    <p>文章的内容内容内容内容内容内容</p>
    <p>结尾部分</p>
    <h2>重点注意</h2>
</section>


JQ代码：
$(document).ready(function () {
    // 获去第二个p元素
    var elem = $('p').eq(1);
    console.log(elem);
});

JQuery filter()

filter()方法允许规定一个标准。
不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

JQ代码：
$(document).ready(function () {
    // 获取类名带有 btn 的 input 元素
    var elem = $('input').filter('.btn');
    console.log(elem);
});

JQuery not()

not() 方法返回不匹配标准的所有元素。

JQ代码：
$(document).ready(function () {
    // 获取所有类名不带 btn 的 input 元素
    var elem = $('input').not('.btn');
    console.log(elem);
});

注意：not() 方法与 filter() 相反。