jQuery祖先遍历总结

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

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

华夏文明

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

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

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

祖宗十八代

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


DOM文档对象模型

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

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

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

  1. parent()
  2. parents()
  3. parentsUntil()

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

<!--JQ-->

$(document).ready(function(){

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

});

<!--html-->

<div class="ancestors">

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

    <ul>ul (祖父)  

      <li>li (直接父)

        <span>span</span>

      </li>

    </ul>  

  </div>

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

    <p>p  (直接父)

        <span>span</span>

      </p>

  </div>

</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  (直接父)

        <span>span</span>

      </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  (直接父)

        <span>span</span>

      </li>

    </ul>  

  </div>

</body>

运行结果:


parentsUntil方法返回结果

这样就指定了祖先的范围,很酷不是么?

通过JQ独特的“连缀”配合遍历方法,能让我们随心所欲的选中我们想要操作的元素。所谓的编程开发其实不过就是“让干什么”吗?

报告完毕!

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,287评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,346评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,277评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,132评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,147评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,106评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,019评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,862评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,301评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,521评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,682评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,405评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,996评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,651评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,803评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,674评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,563评论 2 352

推荐阅读更多精彩内容

  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 655评论 0 3
  • DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作。但实际上...
    阿r阿r阅读 1,013评论 0 9
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,336评论 0 8
  • 1:jQuery节点创建与属性的处理 创建元素节点:可以有几种方式,后面会慢慢接触。常见的就是直接把这个节点的结构...
    码农小杨阅读 603评论 0 1
  • http://www.imooc.com/static/lib/jquery/1.9.1/jquery.js js...
    再见理想冷雨夜阅读 478评论 0 1