※ [本文转录自 Web_Design 看板] 作者: TonyQ (沉默是金) 看板: Web_Design 标题: [心得]从 js 到 jQuery 之七：网页元素的工厂美学 时间: Mon Aug 18 02:08:43 2008 本来以为两天就可以回轨道的 , 竟然用了五天, 而且时间还压的很紧.orz 我下周末应该两天会在coscup 2008会场 , 因为所有讲题看起来都蛮有趣的 , 有报名的版友或认识的朋友们可以约一约聚聚.^^~ coscup 2008 http://coscup.org/2008/ 另外帮朋友打打广告 yahoo! open hackday ! 在9月中旬要登场罗, 有兴趣参加的朋友请参考 活动首页 http://hackday.ithome.com.tw/yahoo/index.html 活动讨论区 http://tw.mb.yahoo.com/ydn/yui/board.php 工商服务时间讲的够多了 , 接下来让我们继续进入jQuery 本文吧！ ──────────────────────────────── 帮大家回忆一下 , 我们这章要讲的主要是 Manipulation , 翻译是运用、 控制之类的字眼 , 实际上的核心概念就是不断的删除/新增/修改元素. 让我用一个 js coder 应该不会太陌生的元素 , 来做一点简单的类比 , 那就是 innerHTML . ＠domObj.innerHTML ="<div>helloworld</div>" 这主要是针对某元素用html 直接重定义其子元素内容, 相信各位coder都不会太陌生 . (w3c link: http://0rz.tw/4a4D9 ) 虽然针对是要用innerHTML还是要用 document.createElement() 这点还有很多争议 , 不过既然这里只是拿来做类比的对象 , 暂时就先丢开道德、标准议题不论, 来做一点介绍 . 因为innerHTML的作法跟後面要介绍的 jQuery function 有一定程度的关系. ＠什麽状况下要用 innerHTML ？ 我们可能会有这样的状况 <div id="theNode"></div> 然後我们今天可能做了ajax , 取了一个html回来 , 我们想把他放在theNode 里面 , 或者是我单纯就想在theNode里面加上helloworld. 那我们就会这样做 document.getElementById("theNode").innerHTML="helloworld"; 前面的原始码在浏览器解析中就会变成 <div id="theNode">helloworld</div> ＠前面有提到createElement , 那是什麽？ dom node在操作的过程中其实还是以document的元素结构为主 ,常态而言 , 比较不建议用html的方案来操作 , 而是透过建立元素跟新增/移除元素为主. 也就是透过appendChild / removeChild 跟 createElement来做 , 不过这部 份对开发者而言还蛮麻烦的 , 笔者以前常用一些简单的函式来协助简化. 为避免非必要的重复 , 这里仅提供参考文摘 , 有兴趣者请自行参考 . http://www.ibm.com/developerworks/cn/xml/x-matters41.html 这篇文摘是介绍createElement的简化方案 以及dom删改的一些操作技巧, 是笔者两年前看过就一直印象深刻的参考文章,推荐大家一读. ＠写html不就写html吗？ 能有多少花样？ 简单列出一些有趣的需求，让我们了解这部份为什麽值得开专栏探讨。 异动部份 1.将html新增到指定的元素前方或後方 (before/after) 2.将html新增到指定的元素成员中的最前方或最後方(append,prepend) 3.将某个特定dom搬移到另一个位置（比方说table 两个tr交换） 4.直接改变整个元素中的html （innerHTML) 5.将某段html转换成dom物件 6.复制一个现有的元素 7.在现有的元素外面包上一个指定的父元素 取值部份 取元素已在ch2 selector,ch5 巡览中提过,此处仅提取text/html. 8.取得成员的html (innerHTML) 9.取得含自己与成员的html (outerHTML) 10.取得成员中的纯文字内容（某些状况下只需纯文字,不需要html tag.） ＠虽然不多...但是好像做起来会很复杂？ 目前传统js的作法虽然不是做不到,但仍然缺少一个简单的介面. 理由请看前面文摘 , 这也是以前蛮困扰我的问题, 因为dom提供的工具太少, 所以连要列出一个解决方案列表 , 都需要处理各种复杂的组合. 另外 , 载入html的部份 , 还包含一些其他的议题 , 比方说html中若包含<script> , <style> 也该要被执行之类的. 像 <script src="xxx.js"></script> 的动态载入 , 更是每隔一阵子就会出现在ajax版讨论的问题. ＠那 jQuery 怎麽做？ jQuery提供多种处理方案 , 不过只提一些常用方法, 以达到简化的目的, 首先以 <div id="theNode"></div> 内容改为helloworld 来说. 只要这样写 $("#theNode").html("helloworld"); html("hellowrld")可类比成该成员里面的innerHTML=helloworld , 如果直接呼叫 $("#theNode").html() 则可类比成回传里面的innerHTML . ＠有别的范例吗？ 问的好 , 让我们来举个比较复杂点的例子 ，以底下的book表格为例 <table> <tbody> <tr> <td>author</td> <td>book</td> </tr> </tbody> </table> 要在最後面加入一本书的话 . $("tbody").append("<tr><td>哈利波特</td><td>J.K.罗琳</td></tr>"); 要在tbody的最前面放一本书的话 . $("tbody").prepend("<tr><td>哈利波特</td><td>J.K.罗琳</td></tr>"); 要在table前面加个「这是书单」的话 , $("table").before("这是书单"); 要在table後面加个「真是太有趣了」. $("table").after("真是太有趣了"); 以上我们共用了 html append prepend before after 等五个函式. 简单demo (btw 可以试着多按几下看看重复执行的效果...) http://tonyq.org/jqtalk/jq7_jqHtmlDemo.html ＠等等 , 你刚刚不是告诉我不要用html操作 , 要用dom吗？ 别紧张 , 虽然这里我们都是用html的方式做处理 , 但是jQuery实际在 操作时会透过regex解析文字并视需要转换成dom , 也就是说我们根本 无须考虑到dom跟html之间的转换 , 把问题交给jQuery , 尽管放心的用吧! （有兴趣想细究转换的部份, 可看 jQuery原码中的 clean function.） ＠关於dom元素的移动？ 基本上你可以透过 $(selector).append(dom) 或 $(selector).append($(selector2))的方式移动, 比方说以这个例子, 我们能将table移到div里面. http://tonyq.org/jqtalk/jq7_jqHtmlMove.html 当然 html append prepend before after 等也都是支援这样的处理的. ＠复制一个元素？ 既然我们知道$(sel1).append( $(sel2) )会把原本的资料给搬过去 , 那有时候我不想搬过去 , 那我就会需要给他一个复本 , 这时候我们就会这样写 $(sel1).append($(sel2).clone() ) , clone() 会复制一份不含事件绑定资料的元素. （如果想要连绑定的事件一起复制, 请使用 clone(true) .) ＠取得纯文字内容 ？ $(selector).text() ＠删除元素？ 这就是我们在第二章讨伐表格大魔王时用过的 remove() ＠用特定html把自己包起来？ wrap( html ) 举例来说 , $("table").wrap("<div></div>") 就可以 从 <table>...</table> 变成 <div><table>...</table></div>. ＠那script跟style怎麽办？ 如果是 script src , jQuery 会帮你载入 , 如果是 <script></script>的程式码,jQuery 会帮你eval . 如果是 style 他会帮你create style物件载入. *如果是 link rel="stylesheet" , 他会帮你载入. 过去这些是让开发者伤透脑筋的问题 , 现在几乎都不用自己烦恼了!!!!!! （注：除link rel 在ie6底下测试还是有问题外 , 其他三个经测试都是ie6/fx2能正常处理的.) ＠将html转换为 dom 或 jQuery物件 只要简单的透过 $(html)就可以变身成为 jQuery物件罗. for example $("<div></div>") 就可以建立一个div的jQuery物件. ＠那我可以把 html 都透过 jQuery写吗？ 虽然理论上你可以把大部分的html透过 js 及 jQuery处理 , 但建议是尽量不要直接把html写在 js 中 , 虽然jQuery让html异动变得简单 , 但是把太多的html 嵌在js上是不佳的 , 一来是你的js会很难提出成为公用 , 二来是异动html时容易有漏网之鱼. 变成你在设计html时要异动 js, 异动js时又可能会影响到html, 这样就会 造成很复杂的状况, 除非你是想写widget , 否则非常不建议这麽做. ＠体验时间 我们今天要介绍的是jquery ui中的 datePicker , 也就是日历选单. http://docs.jquery.com/UI/Datepicker 简易demo :p http://tonyq.org/jqtalk/jq7_datePicker.html --- 解释一下为什麽是副标网页元素的工厂美学 , 因为我们只负责给html当input 让他去处理元素并产出结果 , 而不关心过程中是如何转换成dom结构的处理, 在design pattern中有个着名的工厂方法就是以这个概念为出发模式, 我不关心你怎麽产的 , 我只关心你这间工厂出来的东西的品质对不对.:p -- 这章比较偏 usage , 因为这章的方法其实都很简单 , 所以在内容上比较没什麽好着墨的 ,下一章我们将接着介绍 ajax 议题, 预期将 ajax 做基本的名词解释 , 带过 server side 对ajax设计的问题 , 介绍 jQuery 提供的ajax函式 , 并对ajax 几个历史性的问题 , 做一些基本的解释与提供简易解法 , 让读者不至於被ajax给唬住了 .:p -- 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 来自: 220.132.59.247 (08/18 02:14) -- 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 来自: 220.132.59.247 (08/18 02:21) ※ 编辑: TonyQ 来自: 220.132.59.247 (08/18 02:37) ※ 编辑: TonyQ 来自: 220.128.219.202 (10/09 15:10) ※ 编辑: TonyQ 来自: 61.224.239.208 (12/16 00:01)