※ [本文转录自 Web_Design 看板] 作者: TonyQ (沉默是金) 看板: Web_Design 标题: 从 js 到 jQuery 之五：巡览‧跳过来跳过去 时间: Sun Aug 10 23:44:25 2008 十篇的目标看来越来接近了 , 行百里半九十 , 继续努力. :) 由於前面我们介绍了不少基础知识 , 接下来的篇幅应该可简单一点. ──────────────────────────────── ＠浏览？ 我以为selector就是一切了呢？ selector是以一个根元素（通常为 document)为基础,去寻找里面的成员 , 但是这里我们要谈的是 , 从元素去找与他有关系的元素 . 先谈标准的 traversing , 也就是元素之间的跳转关系, 再来我们再针对jQuery谈谈前面谈selector时,所没有提到的一些方法. 元素浏览 , 最基本的分法分为水平浏览跟垂直浏览. ＠我怎麽好像从来不知道这东西？ 前面这里主要是介绍一些不常用的东西 , 以及为什麽他们不常用 , 不过并不是必备知识 , 只要知道浏览不仅只於selector ,还有底下提的两种. 但是为了後面要介绍的 jQuery几个非常有用的方法 , 这里还是得先带一点基 本知识. ＠垂直浏览 我们先从比较容易了解的垂直浏览开始 , 基本上垂直浏览的本质非常接近 selector的方案 , 我们在操作selector时多少会运用父子关系来做操作. 也就是 父元件 <-> 子元件的浏览方式. 传统 js 的dom物件有提供 parentNode / childNodes（阵列元素）可调用, 相信对习惯用dom 的 appendChild 新增元件的 js开发者应该不陌生. （当然如果你是innerHTML派的 , 也不用担心 , 这不会有任何影响!） ＠什麽父子？？那妈妈是谁？？ 这...你得去问结束标签啊（羞）>////< 好啦 , 轻松一下 , 虽然相信读者不至於对父子关系感到抽象 , 不过简单的实例对理解会有所帮助的 . <div> <span> first </span> <span> second </span> <span> three </span> </div> 在这个例子来说，「理论上」 （也是我们预期,此处後面会续讨论.） childNodes div -------> sapn , span ,span <------- parentNode 这其实就可以做一些应用 , 来个很熟悉的情境吧, 比方说我可以点选一个按钮 , 就把按钮的父元素直接移除掉. 你问我哪里熟悉？我可以用一个例子马上让你想起来你曾经在哪看过. http://tonyq.org/test/testTableGird.html ＠水平浏览呢？ 指的是同一层级的前後浏览. 让我们在拿这个例子来看. <div> <span> first </span> <span> second </span> <span> three </span> </div> ---------------------------- <span>first</span>下一个元素 理论上会是 <span> second </span> 也就是同样在div下一层的子node之间的浏览 , 就称为水平浏览. 在传统js上你可以透过 nextSibling (贴心翻译时间 sibling -> 兄弟姊妹) previousSibling 来取得下一个跟前一个dom物件 （如果不存在 , 就会回传null） ＠为什麽是「理论上」？ 这是个好问题 , 答案还是在於浏览器的相容性问题 , 这系列文章快变浏览器相容性问题大全了. Firefox体系下 , 预设会把纯粹换行跟空白字元也当成一个 dom来解读 , 而这对水平浏览或垂直浏览都会造成问题 , 至少在2.0.0.16行为如此, 新版有没有异动就有赖众朋友测试. 有兴趣的朋友可以分别用ie跟fx观察底下的范例. http://tonyq.org/test/testtravsering.html (ie底下会是3 , 就是对应的三个span) (fx底下会是7 , 多了四个由换行跟空白产生的node.) 另外在存取的时候 , 还要另外注意 table的子元素 , 会先接到tbody, tbody的子元素才会接到tr td, 虽然这是标准有定义的 ,但是常被人遗忘. ＠那我们还要介绍什麽呢? 首先我们要介绍的是 jQuery下的水平浏览跟垂直浏览 , 让我用简单数行带过即可. ※垂直浏览部份 $("#selectNode").parent() /*取得最接近的父元素物件*/ $("#selectNode").children() /*取得下一层的子元素物件集合*/ $("#selectNode").parents( ) /*取得全部的父元素物件*/ $("#selectNode").contents( ) /*取得全部的子元素*/ /*注:如果selectNode是iframe, 则contents会取得其document物件*/ ※水平浏览部分 这两个看字义就知道是下一个跟前一个. $("#selectNode").next() $("#selectNode").prev() $("#selectNode").nextAll( ) /*从下一个一直到最後一个*/ $("#selectNode").prevAll( ) /*从前一个 一直到最前面一个*/ ＠那firefox下的空白跟换行字元怎麽办? 　 在这里jQuery 预设状况是不把空白跟换行字元算入node的 , 所以不会有 先前所提firefox下的元素判定问题 . 另外 , 以上所有方法全部都支援 selector 参数 . 也就说如果是以下的状况 <div> <p id="pnode">test p1</p> <span>test s1</span> <h1>hi , i am big </h1> <p>test p2</p> <span>test s2</span> <h1>hi , i am not small </h1> <div> $("#pnode").nextAll("h1").css("background","red"); 则上面两个h1都会背景变红色 , 但是在这里也有一个常常会混淆的状况 , 他是先执行他所应该要执行的任务 , 再针对给定的条件去做过滤(filter), 所以 $("#pnode").next("h1").css("background","red"); 并不是会回传下一个h1 , 而是先找到下一个後 , 过滤不是h1的元素 , 下一个其实是 span , 但是由於指定要h1所以被滤掉了 , 所以实际上传 回的是空 context . 这是笔者早期刚碰时曾经碰过的钉子 , 不过事实上要用filter , 我个人会较建议用後面所提的方式 , 所以我们接下来要介绍的是filter . ＠什麽filter ? 过滤器 ? 为什麽前面介绍 js的时候没介绍到? 很简单 , 因为我还没看过传统 js 有能够替代filter的方案 , 但是在浏览元素的时候 , 这甚至比本章之前所提得那些都还重要 , 能够精准的挑出我们所想要的资料 的处理. 当然笔者没看过不代表没有 , 如果有人有的话很欢迎来分享一下, 笔者能想到的最多是用typeof或nodetype过滤. 但是运用起来很麻烦. filter 其实应该跟find一起讲 , 不过我们还是先讲filter. filter就很单纯是现在的context中找出所有符合的子元素 , 所以比方说 $("div").filter("p") 一定会是空的 , 因为两者没有交集. 另外还有一个类似的 , 就是 not , 就是不符合的条件, 比方说 $("div,p").not("p") 取出来的结果还是只会剩div的资料. 这里的字串都是套用selector的规则 , 请各位看官自行发挥. ＠finder 有没有曾经有过这样的想法 ？ 我手边有一个div 物件触发onmouseover事件 , 但是我想让触发事件元素中所有图片加上框线. 你可能会想到selector , 但是我有这个事件的物件有好几个啊, 我很难特定指定哪一个物件来处理. 这时候你就会想要 find , 他可以帮助你在特定的 context中寻找 子元素的资料. 比方说 $("table").find("td") 或者是 $("#selectNode").find("img") 甚至於 jQuery还为他写了简式 , 以前面的写法来看 , 可以改写成 $("td","table") 第一个元素是selector , 第二个元素是指定区间, 而除了直接给selector外, $("td", $("table")) 给定一个jQuery context也是可以接受的. $("td", $("table")[0]) 给定一个html dom物件也是可以接受的 . ＠没想到要取得元件有这麽大学问！ 相信看到这里 , 不管元素躲到天涯海角 ,他都难不倒你了, 当然还是那句老话 , 碍於篇幅有限 , 我们只挑部份出来讲 , 剩下的请看文件 http://docs.jquery.com/Traversing/ 我想应该还要介绍给你的function 还剩下一个 , $("p").add("div") 究竟会得到什麽呢？ （答案：等同於$("p,div")） <---欲知答案 请按 \ 关灯 ＠体验时间： 我们今天要介绍的是blockUI , 基本上他跟大部分的灯箱都蛮像的 , 不过它比灯箱更纯粹了一点 ,纯粹就是阻断所有背景的事件 , 让你做到锁定的效果 , 当然重点是他也非常的简单易用 . 官方网站 http://malsup.com/jquery/block/#overview 简易版sample http://tonyq.org/jqtalk/jq5_blockUI.html -- What do you want to have ? / What do you have? 从书本中，你可以发现我的各种兴趣。 从ＣＤ中，你可以了解我所喜欢的偶像明星。 或许从文字你很难以了解一个人，但从物品可以。 My PPolis , My past. http://ppolis.tw/user/Tony --

※ 发信站: 批踢踢实业坊(ptt.cc) ◆ From: 220.132.59.247 -- What do you want to have ? / What do you have? 从书本中，你可以发现我的各种兴趣。 从ＣＤ中，你可以了解我所喜欢的偶像明星。 或许从文字你很难以了解一个人，但从物品可以。 My PPolis , My past. http://ppolis.tw/user/Tony --

※ 发信站: 批踢踢实业坊(ptt.cc) ◆ From: 220.132.59.247 ※ 编辑: TonyQ 来自: 61.224.239.208 (12/15 23:59) ※ 编辑: TonyQ 来自: 61.224.239.208 (12/15 23:59)