jQuery教程 jQuery祖先遍历详解-职坐标

jQuery教程 jQuery祖先遍历详解

沉沙 2018-07-24 来源：阅读 1147 评论 0

摘要：从选定的元素开始，在DOM树向上方遍历就是祖先遍历。就是查找元素选定元素的祖先。希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。

世界上除了新兴的现代性移民国家之外，很多国家都是有单一民族或有数几个民族构成。例如我国就是由中华民族构成，而中华民族是一个泛指，泛指汉族、满族、回族等五十六民族构成的统一集合体；多民族互相尊重互相理解形成统一的中华民族。这是一件很了不起的事情，值得我们处于其中的每一个人都去维护和付出。

汉族是中华民族中人数最为庞大的族群，其实更确切说我们都是华夏族。华夏族是汉族的前身，经过牛叉哄哄的汉武帝东打西拼对世界文化产生了相当大的冲击和影响。所以华夏族又被以汉朝的名字冠名为汉族。解释的如果不对请谅解，毕竟我也不是历史专业的人。每个民族都有自己的文化，汉族也一样。经过几个有相当作为的帝皇拆分整合，汉族文化视儒家思想为正统，诸子百家思想为辅助，其中最主要的是黄老学说。所以汉族文化从诞生之初就展示了自己非凡的包容性和吸纳性。

历史的推进使得汉族和其他民族进行了接触，其中除了少数和平共处之外几乎都是靠战争来完成民族的对接工作。而汉族文化的特点也让自身和别的民族接触过程中产生了吸引和接受，这就是民族大融合。目前最纯正的汉族人已经很少了，大家身上多少都有其他民族的血脉，这血脉也许很稀薄但是毕竟真实存在着。

罗里吧嗦这么多也还没进入正题，你们急我也急。平铺直叙的方式还是比较适合我，尤其是前面的铺垫，对于理解概念都会有或多或少的帮助。忍耐下还要在罗嗦上几句。中华民族经过“三皇定伦，五帝定纲，儒家定礼”，使得我们的文化是以“孝道”为基础逐渐铺设开来的。而对孝的理解是对长辈的认识开始，由于我们现在提倡适龄结婚的政策，所以现在我们最多也就是认识到爷爷这一代。上数几代和下边几代如何称呼，我们现代人是很少知道了。

术业有专攻，有专家学者已经给我们的“祖宗十八代”的称呼都给列了出来列出来了家谱表了。看下图……

祖宗十八代

这个就是族谱表，看着是不是有点眼熟的感觉？和DOM文档对象模型很像是吧。我去啊~终于进入正题了……这两张图可以让我们理解和掌握遍历变得十分迅捷和清晰，好好记忆一下有莫大好处。现代人在日常竞争中很少使用到主动天赋技能，不过却一直使用着天赋被动技能。对知识深刻的理解能让我们在调用知识的时候迅捷准确无比，这就是知识的运用能力。理解力是运用能力的前提!增加理解力除了天赋神授之外，就只有联想记忆了。

DOM文档对象模型

jQuery是javascript中最为著名的库，它独特的“连缀”和“隐形迭代”让JQ使用起来无比迅捷简单，这也是它迅速俘获大量死忠的根本原因。jQuery提供了多种遍历 DOM 的方法。遍历方法中最大的种类是树遍历（tree-traversal）。jQuery遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML元素。以某项选择开始，并沿着这个选择移动，直到抵达期望的元素为止。根据牛顿力学的参考系坐标，东西都是相对的。相对于被选（当前的）元素开始，轻松地在DOM树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动就是对DOM进行遍历。

从上面的解释来看，jquery在DOM树中的遍历有三种显性方式和一种隐性方式。三种显性的分别是祖先，子孙，同胞。一种隐性的就是直接选择或者说叫“点名”。我们是礼仪之邦尊崇孝道，那么就先从祖先说起吧。

从选定的元素开始，在DOM树向上方遍历就是祖先遍历。就是查找元素选定元素的祖先。JQ祖先遍历有三种方法：

1. parent()

2. parents()

3. parentsUntil()

parent()返回被选元素的直接父元素。该方法只会向上一级对DOM树进行遍历。配合咱的“祖宗十八代图”来讲就是只管爹妈不管爷奶和姥爷姥姥。

$(document).ready(function(){

$("span").parent().css({"color":"red","border":"2px solid red"});

});

<div style="width:500px;">div (曾祖父)

<ul>ul (祖父)

<li>li (直接父)

</li>

</ul>

</div>

<div style="width:500px;">div (祖父)

<p>p (直接父)

</p>

</div>

运行结果：

parent方法的返回结果

parents()方法比parent()方法多了一个“S”字母，可以理解为“祖先们”。这个方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素(<html>)。

//JQ代码

$(document).ready(function(){

$("span").parents().css({"color":"red","border":"2px solid red"});

});

//html代码

<body class="ancestors">body (曾曾祖父)

<div style="width:500px;">div (曾祖父)

<ul>ul (祖父)

<li>li (直接父)

</li>

</ul>

</div>

</body>

运行结果：

parents方法返回结果

这两种方法在书写形式上相当类似，不过返回结果可是有巨大差异。parent()方法返回的父元素只是在DOM树中向上移动了一级，parents()方法返回的是先祖元素其中也包含了父元素。它会一路向上一直到文档的根元素<html>。

我们给元素设置一个“钩子”，例如添加ID属性。然后通过钩子来控制需要遍历的DOM分支，最后添加动作来完成简单的JQ编程代码，例如让其背景成为红色。这个就是JQ的入门编程应用，别嫌入门的就是简单的。所谓的复杂也是由简单的来构成的。从需求的角度来看，parents()方法会返回所有的先祖元素。效率相对的来说有点低。而parent()方法只返回父辈元素，有时候可能“够”不到我们需要的元素。这个时候就需要parentsUntil()方法了。

parentsUntil()方法会返回介于两个给定元素之间的所有祖先元素。例如$("span").parentsUntil("div");就是返回选定元素span和祖先元素div之间所有的先祖元素。

//JQ代码

$("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});

//html代码

<body class="ancestors"> body (曾曾祖父)

<div style="width:500px;">div (曾祖父)

<ul>ul (祖父)

<li>li (直接父)

</li>

</ul>

</div>

</body>