<?xml version="1.0" encoding="UTF-8"?><!-- generator="WordPress/2.9.2" -->
<rss version="0.92">
<channel>
	<title>F2E-Doc</title>
	<link>http://f2e.aliued.com</link>
	<description>Just another WordPress weblog</description>
	<lastBuildDate>Sat, 12 Jun 2010 12:57:30 +0000</lastBuildDate>
	<docs>http://backend.userland.com/rss092</docs>
	<language>en</language>
	
	<item>
		<title>[译] 工欲善其事, 必先利其器, 性能指标参考工具之 page speed指南 [一]</title>
		<description><![CDATA[原文链接: Using Page Speed
使用 Page Speed


运行 Page Speed

			在运行Page Speed这个工具时, 它会基于页面的状况生成分析结果. 为了确保最精确的分析结果, 你最好在页面完全载入完成后再运行Page Speed. 否则, Page Speed无法分析那些还没有载入的资源的情况.
		

			或者你可以选择激活 当载入完成后自动运行选项 而让Page Speed在任何页面载入完成后自动进行分析. 具体可参照下文中 高级选项 .
		

			如何使用 Page Speed 对页面进行分析:
		

运行Firefox.
选择 工具 &#62; Firebug &#62; 打开Firebug.
在FireBug窗口中, 选择 Page Speed 页签.
访问你需要进行分析的页面. 等到浏览器状态栏里显示 完成 并且进度条消失的时候开始使用Page Speed. 如果页面上因为有流媒体视频而没有显示 完成 信息的情况下, 等到视频开始播放时就可以开始使用Page Speed了.


点击 性能分析(Analyze Performance). 当页面分析完成时, Page Speed会显示 网页性能最佳实践 的列表和当前页面针对每项结果的得分, 结果是按照当前页面的重要性和优先级排列的.



接下来就可以做以下这些事情了:

点击打开任意规则来看可改进的建议.
点击任何规则的标题来看针对该规则的文档.
点击 资源 展示当前页面引用的资源的详细列表.
选择 导出 &#62; [...]]]></description>
		<link>http://f2e.aliued.com/%e8%af%91%e4%bd%bf%e7%94%a8-page-speed/</link>
			</item>
	<item>
		<title>关于YUI2里面 onDOMReady 和 window.onload执行顺序一些问题</title>
		<description><![CDATA[    YUI在IE浏览器里DOM元素加载很快的时候window.onload执行的要比domready快。这个执行顺序的问题应该算是一个bug，但是在jQuery我做个类似的实验，发现jQuery里没有类似的问题。
    对这个问题确实比较好奇，看了看YUI2和jQuery关于DOM ready实现的部分源码。在IE实现DOM Ready基本都是用Diego Perini提出的方法：http://javascript.nwbox.com/IEContentLoaded/
但是jQuery的开发者已经意识到IE浏览器有时存在onload执行的比DOM Ready快的问题，因为这样确实会出现风险。jQuery是这么解决的，我节选了部分解决这个问题的jQuery代码(版本-1.4.2)：
DOMContentLoaded = function() {
    if ( document.readyState === &#8220;complete&#8221; ) {
        document.detachEvent( &#8220;onreadystatechange&#8221;, DOMContentLoaded );
        jQuery.ready();
    }
};
document.attachEvent(&#8220;onreadystatechange&#8221;, DOMContentLoaded);
YUI没有这样做，我估计是因为效率问题，上面的代码虽然让domready执行的比window.onload快，但是因为绑定了onreadystatechange事件，效率会低一点。
而jQuery采用了更加安全的策略，慢就慢一点，安全一点更重要。如果在使用YUI2的时候确实遇到了这个安全问题，我们也可以牺牲一点效率，修改一下YUI的源码。
终于搞清楚了，又是一个需要权衡的问题。
但是我也抛出一个我没有想明白的问题，YUI2里面为什么不去尝试
document.documentElement.doScroll(&#8216;left&#8217;);来判断domready，而是先要在超空间先创造一个p节点，然后再doScroll，domready以后再把这个p节点清空掉，这样做有什么好呢？为什么不采用jQuery和Diego Perini的做法呢？个人觉得创造一个p节点，再释放掉效率更低呀。
]]></description>
		<link>http://f2e.aliued.com/%e5%85%b3%e4%ba%8eyui2%e9%87%8c%e9%9d%a2-ondomready-%e5%92%8c-window-onload%e6%89%a7%e8%a1%8c%e9%a1%ba%e5%ba%8f%e4%b8%80%e4%ba%9b%e9%97%ae%e9%a2%98/</link>
			</item>
	<item>
		<title>如何使CSS渲染更高效</title>
		<description><![CDATA[原文：Efficiently Rendering CSS
我承认我并不经常想这个问题&#8230;&#8230;我们写的css的效率是怎么样的呢，浏览器渲染的速度又如何呢？
这是应该是浏览器开发者应该关心的(页面加载更快，用户就会更愉快)。Mozilla有一篇文章： about best practices . Google 当然也很关心这个问题，他们也有这样一篇文章：Optimize browser rendering 。
让我们了解下他们主要倡导的东东，然后讨论他们的实用性。
从右到左
浏览器如何读取你的CSS选择器有一个很重要的原则，那就是它们从右到左读取。这意味这像 ul &#62; li a[title="home"] 这样的选择器，a[title="home"] 将是最先被读取的。这一部分通常被称为 “key selector” （可否称为“目标选择器” -_-!）选择器的最后一部分，也是被选择的标签。
ID&#8217;s 是最有效率的，通用符是最慢的
有四种目标选择器：ID, class, tag和通用符。看下他们各自的效率如何:

#main-navigation &#123; &#125; /* ID (最快) */
body.home #page-wrap &#123; &#125; /* ID */
.main-navigation &#123; &#125; /* Class */
ul li a.current &#123; &#125; /* Class *
ul { } /* Tag */
ul li [...]]]></description>
		<link>http://f2e.aliued.com/%e5%a6%82%e4%bd%95%e4%bd%bfcss%e6%b8%b2%e6%9f%93%e6%9b%b4%e9%ab%98%e6%95%88/</link>
			</item>
	<item>
		<title>JavaScript trim函数大赏 (转)</title>
		<description><![CDATA[W3C那帮人的脑袋被驴踢了，直到javascript1.8.1才支持trim函数（与trimLeft，trimRight），可惜现在只有firefox3.5支持。由于去除字符串两边的空白实在太常用，各大类库都有它的影子。加之，外国人都很有研究精神，搞鼓了相当多实现。
实现1
  String.prototype.trim = function() {
    return this.replace(/^\s\s*/, &#8221;).replace(/\s\s*$/, &#8221;);
  }
看起来不怎么样，动用了两次正则替换，实际速度非常惊人，主要得益于浏览器的内部优化。一个著名的例子字符串拼接，直接相加比用Array做成的StringBuffer还快。base2类库使用这种实现。
实现2
  String.prototype.trim = function() {
    return this.replace(/^\s+/, &#8221;).replace(/\s+$/, &#8221;);
  }
和实现1很相似，但稍慢一点，主要原因是它最先是假设至少存在一个空白符。Prototype.js使用这种实现，不过其名字为strip，因为Prototype的方法都是力求与Ruby同名。
实现3
  String.prototype.trim = function() {
    return  this.substring(Math.max(this.search(/\S/), 0),this.search(/\S\s*$/) + 1);
  }
以截取方式取得空白部分（当然允许中间存在空白符），总共调用了四个原生方法。设计得非常巧妙，substring以两个数字作为参数。Math.max以两个数字作参数，search则返回一个数字。速度比上面两个慢一点，但比下面大多数都快。
实现4
  String.prototype.trim = function() {
    return  this.replace(/^\s+&#124;\s+$/g, &#8221;);
  }
这个可以称得上实现2的简化版，就是利用候选操作符连接两个正则。但这样做就失去了浏览器优化的机会，比不上实现3。由于看来很优雅，许多类库都使用它，如JQuery与mootools
实现5
  String.prototype.trim = function() {
    var str = this;
    str = str.match(/\S+(?:\s+\S+)*/);
    return str ? str[0] : &#8221;;
  }
match是返回一个数组，因此原字符串符合要求的部分就成为它的元素。为了防止字符串中间的空白符被排除，我们需要动用到非捕获性分组（?:exp）。由于数组可能为空，我们在后面还要做进一步的判定。好像浏览器在处理分组上比较无力，一个字慢。所以不要迷信正则，虽然它基本上是万能的。
实现6
  [...]]]></description>
		<link>http://f2e.aliued.com/javascript-trim%e5%87%bd%e6%95%b0%e5%a4%a7%e8%b5%8f-%e8%bd%ac/</link>
			</item>
	<item>
		<title>DQA 设计质量保证之道</title>
		<description><![CDATA[无论是交互设计、前端开发还是视觉设计，我们都要为产品负责，为用户负责，那到底是谁去负责? 从传统角度来看，很多人会认为资历深辈分老的人就可以负责设计质量的管理，但是恰恰相反，资历越深辈分越老的人越会用主观去区分设计的好坏，通常也不会利用项目管理的手段(之前我参加的项目管理培训的讲师说过很多老员工在参加培训的时候很难客观地理清项目管理要素)去完善设计。虽然很多公司都说以能力说话，资历并不能代表一切，但是在现在社会的现状来讲，资历还是主导一切。那到底什么才能推翻资历去保证设计质量呢?
　　最近看到淘宝的招聘上多出一个职位叫做设计质量保证(DQA)，粗看他的名称类似于风险质量管理的岗位，但又落在设计团队中。他的职务内容如下：
　　1、管理设计规范，流程，各种机制;并保证过程的有效实施，同时组织对内培训
　　2、为项目过程的事实提供咨询和指导
　　3、按计划执行过程的审计，跟踪协调质量问题的解决
　　4、根据度量指标，建立度量体系，收集过程数据，分析度量指标的达成情况
　　5、收集过程改进建议，制定改进方案，持续开展过程改进工作
　　6、熟悉软件功能，具有良好的文档写作能力、沟通能力和协调能力
　　淘宝的设计质量保证招聘页面，点此应聘
　　从他的职务内容可以看出，对设计负责是客观的数据和指标，而并非是主观的资历。当然要能够制定规范、流程以及各种机制也一定要实际经验的人才能领悟其中的奥妙，昨天部门内部做了一次分享，我们老大觉得只要在公司的SQA(风险质量管理)的流程中加上一步来规范设计便可以起到管理的效果，但是SQA并非设计人员，他对里面的各个环节的把控没有一个亲身体验的过程，他很难去融入到每个环节中去。要做到一个DQA必须要有设计经验，至少要能够把设计流程中的每个角色都经历一次，才能有管理的能力。一个DQA不仅要管理流程并要不断创新，让流程中的问题越来越少。沟通文化是项目管理中必不可少的文化，但是一个好的流程管理可以避免沟通的浪费，最到效益最大化。既然是管理那肯定离不开数据跟踪和分析，这又要求DQA对数据的敏感性和分析能力，并且有数据挖掘的能力。
　　产品开发是一个环：想法(产品经理)&#8212;>策划(交互设计师)&#8212;>实施(视觉设计、前端开发、系统开发)&#8212;>测试、发布&#8212;>新想法(产品经理)&#8230;，称为循环式生命周期，这种方式有利于不断改进和突破创新。但是在很多情况下这个环会变成一条直线，称为终结式生命周期，这种方式不利于设计师提升产品价值，而且这种对产品始终不负责任的方式,让产品进入“有娘生没娘养”的地步。这就是缺乏设计质量管理的结果。产品就像一个点，分布在公司中，设计师如果过多的注重点就很难去考虑面，如此继续会导致恶性循环。
　　那怎么样才能做一个好的DQA来保证设计质量呢?从设计角度来讲可以分为两个部分：
　　一、产品设计：
　　1、在产品设计前期的用户分析中，交互设计师要根据产品特征建立相应地有效用户模型，并要符合产品用户模型等式：
　　其中有效用户模型(Available User Model)是产品上线后对于使用用户的一个数量和特征的描述，设计用户模型(Designed User Model)是用户测试工程师建立的理想用户数量和特征描述，产品用户模型(Producted User Model )是产品经理所定义的预期用户数量和特征描述。等式中将设计用户和产品用户相加除以二的目的是为了得出交集，不仅从数量上给出更贴近设计要求和商业目标，而且从特征描述上能够更有针对性地进行参考设计。
　　DQA工作内容：这一步的DQA主要是对用户模型的管理和完善，充分协调交互设计师、产品经理和用户测试工程师之间的沟通问题，降低沟通成本，并且做好用户模型分类存档的工作。一个好的交互设计师会不断积累用户特征，并会给出和完善不同方案下的用户模型。(这个可以做成一个搜索引擎，将条件设置为产品目标人群，摘录设置为用户生理特征，内容包括用户的生理心理活动和特征以及典型用户脚本)
　　2、在友好分析(亦称为竞争对手分析)中，交互设计师要针对新产品的同行竞争者进行分析，并给出关键设计数据，从而使设计更有目的性。
　　DQA工作内容：这一步的DQA主要是管理关键设计数据并形成一个库，便于二次使用。
　　3、在故事板等流程图设计的时候，交互设计师所做的就是将有效用户模型中的用户脚本进行编译成为一个可用性流程，这一步是为前期分析和后期设计做一个承上启下的作用，也是关键步骤。很多设计师并不关注这一步，但其实在设计的时候我们往往都会在头脑中过一遍这个流程，之所以要写出来也是为了保证产品设计质量(避免遗漏等问题)、提高二次利用效率。故事板还有个作用是通过故事形式的“起承转合”让设计师更多地去探索如何让用户去使用，如何让用户用得顺，如何让用户喜欢用的方法。
　　DQA工作内容：这一步DQA主要是要把故事板等流程图进行整理归类，并且给出用户脚本的度量指标，并预估整个设计过程中出现的流程和模块问题，这里谈及的模块是指流程模块间的配合，比如A流程中有B\C\D三个模块，那个DQA要根据项目需要对B\C\D进行模块分解，如果B模块是已经有现成的，那么直接给到交互设计师即可;如果C模块是现成的，但是要根据现有产品进行改良，那么DQA要根据改良目的和方法和交互设计师进行沟通，并协调整个设计团队间的改良工作。
　　4、在实施过程中，线框图的设计要求精准。管理这块内容的时候需要最仔细，因为往往这就是产品的雏形，如果最终产品的样子和线框图中描述的大相径庭，那么这个设计肯定是出了问题的，设计质量也是最差的。在我的设计中，我要求线框图必须和产品最终样子是基本一致，甚至连每个元素中的间距和排布都要完成，当然色彩上应当交给视觉设计师去把握(线框图是黑白灰的表述方式)。所以这一步也要求交互设计师一定要有坚实的视觉基础和实现能力，并且对前端开发有深入的了解和判断(有些设计天花乱坠，前端开发工程师叫苦不迭，甚至是影响了整个产品的实际体验效果)。
　　DQA工作内容：这一步中DQA主要是把握需求变更的问题，解决多方沟通和确定的时间和方式，从项目本身的利益出发使工作效率最大化。还有就是要整理每个实施阶段出现的问题和结果，并提交反馈给相应的团队进行补丁制作(Bug Fix)。例如视觉设计师觉得有必要突破原有规范进行创新型设计，那么在完成设计之后DQA要将结果保存归类并提交给设计研究的流程中做成一个新的视觉场景规范。
　　5、最终产品的测试阶段的设计质量管理更是整个质量的关键步骤，他要掌握测试Bug的数量并且和设计质量预估目标中的数据进行比较，才能够得出真正设计师应该注意的问题，并反馈给设计师进行二次确认。
　　DQA工作内容：这一步DQA主要是把问题列表和实际情况进行对比审计，得出修改意见和实施方案，以最快的速度完成Bug的修复和产品的上线。
　　6、大家可能觉得这样已经结束了，其实还有一步就是上线之后对于产品的数据和用户反馈的跟踪也是设计质量保证中必不可少的步骤，这样也保证了产品既有娘生也有爹养。
　　DQA工作内容：这一步也是DQA的一个日常运营的工作，他要定期检查线上每个产品的运行情况、监视反馈数据，并进行跟踪回报，得出新的设计建议和设计流程改进方案，为下次工作做好预估能力的积累。
　　二、设计研究
　　1、在交互研究中交互设计师要针对实际项目中的经验教训结合设计质量保证的反馈进行设计的创新研究，从有效用户模型、用户脚本和创新性设计等方面去提高自身的设计能力。
　　2、视觉设计师更多在前期的视觉规范制定和创新设计中起到决定作用，视觉设计师在实际项目中所碰到的问题和创新问题都要在视觉研究中有所体现，并且设计质量保证也要进一步把控研究成果。
　　3、前端研究主要是让前端开发工程师能够将前端开发的代码进行整理打包成为可二次利用的插件，不仅提高效率而且也提升了自身实力。
　　4、产品线上研究，这一步是现在很多公司都没有的一步，应该说是都交给了其他部门去研究的一步。其实作为“生母”的设计师来讲，关注线上产品才能有更多好的idea的产生，设计质量保证也要进行配合管理，让产品的输入输出通路能够打通，不再让研究始终只是研究。
　　在设计研究中，DQA扮演的往往是指引和提供数据方向的角色，他更多的是让所有设计师对设计流程能够达成一致，在以数据为前提下了解每个人的个性和合作方式并合理安排团队成员进行设计研究和产品开发。
　　三、DQA的其他职责
　　DQA的还有个职责是制定设计流程，之前我也写过将流程模块化的管理方案，大家有兴趣可以去看看。
　　要管理好一个团队很难，但是只要获得人心，一切都会很顺利。但是要管理好一个设计团队间的协作和流程，单单靠人心和资历都是没用的，一切以数据和现状分析为导向，加入适当的协调才能真正让一个团队的设计质量有大幅度的提高，才能把产品效益最大化。
]]></description>
		<link>http://f2e.aliued.com/dqa-%e8%ae%be%e8%ae%a1%e8%b4%a8%e9%87%8f%e4%bf%9d%e8%af%81%e4%b9%8b%e9%81%93/</link>
			</item>
	<item>
		<title>2010-04-29 前端会议纪要</title>
		<description><![CDATA[会议主题: Q1前端bug总结和分析以及后续的行动计划
参与人员: Sourcing和Wholesale今天在公司的所有同学
会议进程:

公布2010年Q1前端同学Bug情况, 总数计1900分, 主要引起Bug产生的几大方面:

a. 多彩秀(富文本编辑器)产品: 682.57
b. minisite产品(sourcing): 541.51
c. 前端文件编码问题: 538.56


几大问题剖析:

a. 多彩秀:

多彩秀团队资源有限, 无后续更新修复资源, 导致产品不完善而造成最基础的产品级别问题
多彩秀产品上线产品规划的问题, 为对相应风险有足够的预估以及风险对策设立, (对历史数据的处理存在非常大的风险)
多彩秀产品上线时资源没有保障, 开发测试环节缺失严重


b. Minisite:

minisite本身架构古老, 无法在延展性上符合目前的业务复杂性, 且结构复杂, 不利于维护与测试
minisite相应的需求只考虑自身模块的功能实现, 相关模块的牵扯风险预估不到位
测试不彻底


c. 文件编码问题:

缺失相关的规范
测试不充分
国际站的文件编码混乱




问题总结及相应的行动计划:

风险预估不到位
责任感不强
代码质量检测及测试缺失


风险预估保障: 专家评估
				找熟知的人进行相应风险的评估, 确保风险预估的完整性
			
风险预估结果的推动:
				预估风险的知晓, 风险不可控的应对策略的向上走机制
			
代码Review:
				保证在实现层面的代码质量问题
			
测试环节加强: ?

从问题出发的架构机制保障及推动




]]></description>
		<link>http://f2e.aliued.com/2010-04-29-%e5%89%8d%e7%ab%af%e4%bc%9a%e8%ae%ae%e7%ba%aa%e8%a6%81/</link>
			</item>
	<item>
		<title>看图学习：编写简洁并符合语义的HTML代码</title>
		<description><![CDATA[1、删除不必要的&#60;div&#62;标签
例1：

例2：

2、使用具有语义的标签

3、尽量减少使用的&#60;div&#62;标签
例1：

例2：

4、使用缩进格式化代码

5、对代码注释使用结束标记

结论：养成好的编码习惯，尽量编写简洁的符合语义的代码，会无形中提高搜索引擎对你网页的可访问性！当然对SEO会起到事半功倍的效果！
]]></description>
		<link>http://f2e.aliued.com/%e7%9c%8b%e5%9b%be%e5%ad%a6%e4%b9%a0%ef%bc%9a%e7%bc%96%e5%86%99%e7%ae%80%e6%b4%81%e5%b9%b6%e7%ac%a6%e5%90%88%e8%af%ad%e4%b9%89%e7%9a%84html%e4%bb%a3%e7%a0%81/</link>
			</item>
	<item>
		<title>JavaScript框架比较:实用函数 [zt]</title>
		<description><![CDATA[实用函数
许多JavaScript框架都带有大量的实用函数，这些函数使得应用JavaScript开发应用程序更加容易。这篇文章有太多内容需要补充，所以我将讨论大多数框架中更为引人注目的函数中的一个。
如果你曾经使用过JavaScript数组，你可能对使用循环来迭代数组操作其值非常熟悉。例如，想想清单2的代码：
清单2：迭代JavaScript数组的传统方法

var fruit = &#91;'apple', 'banana', 'orange'&#93;;
for&#40;var i = 0; i &#38;lt; fruit.length; i++&#41; &#123;
alert&#40;fruit&#91;i&#93;&#41;;
&#125;

清单2中的代码没错，但有点麻烦。大多数JavaScript框架包括each功能，它为数组中的每一个元素调用一个特定的函数。使用MooTools，用清单3中的代码可以完成清单2中相同的操作。
清单3：使用MooTools的each函数

&#91;'apple', 'banana', 'orange'&#93;.each&#40;function&#40;item&#41; &#123;
alert&#40;item&#41;;
&#125;&#41;;

清单3中在语法上与Prototype和jQuery是相同的，YUI 和 ExtJS.略微不同。但是，当应用到hash或对象时，不同的框架语法是不同的。例如，在MooTools中，你可以使用下面清单中的代码：
清单4：对键/值对的各个对象使用MooTools的each函数

var hash = new Hash&#40;&#123;name: &#34;Joe Lennon&#34;, email: &#34;&#60;a href=&#34;mailto:joe@joelennon.ie&#34;&#62;joe@joelennon.ie&#60;/a&#62;&#34;&#125;&#41;;
hash.each&#40;function&#40;value, key&#41; &#123;
alert&#40;key + &#34;: &#34; + value&#41;;
&#125;&#41;;

但是，使用Prototype库，这看起来就像清单5的代码：
清单5：对键/值对的各个对象使用Prototype的each函数

var hash = $H&#40;&#123;name: &#34;Joe Lennon&#34;, email: &#34;&#60;a href=&#34;mailto:joe@joelennon.ie&#34;&#62;joe@joelennon.ie&#60;/a&#62;&#34;&#125;&#41;;
hash.each&#40;function&#40;pair&#41; &#123;
alert&#40;pair.key + &#34;: &#34; + pair.value&#41;;
&#125;&#41;;

每个框架包含了许多更实用的函数，通常分为String函数、 Number函数、Array函数、Hash函数、 Date函数等等。要了解更多信息，请参阅相关JavaScript框架的API手册。
]]></description>
		<link>http://f2e.aliued.com/javascript%e6%a1%86%e6%9e%b6%e6%af%94%e8%be%83%e5%ae%9e%e7%94%a8%e5%87%bd%e6%95%b0-zt/</link>
			</item>
	<item>
		<title>JavaScript框架比较:DOM操作 [zt]</title>
		<description><![CDATA[DOM操作
在此之前，你已经看到JavaScript框架使用选择器和DOM遍历可以很容易的获得特定的元素。但是，为了改变网页上特定元素的内容和外观，你需要操作DOM并应用改变。使用纯粹的JavaScript将是一件繁重的工作，但幸运的是，大多数JavaScript框架提供有用的函数，可以很容易地做到这些。
假设你有一个ID为the-box的盒子。

&#60;div id=&#34;the-box&#34;&#62;Message goes here&#60;/div&#62;

使用jQuery将其文本改变为“Message goes here”，可以很简单的这样使用：

$&#40;'#the-box'&#41;.html&#40;'This is the new message!'&#41;;

事实上，你可以在函数中使用HTML代码，它能被浏览器解析，例如：

$&#40;'#the-box'&#41;.html&#40;'This is the &#38;lt;strong&#38;gt;new&#38;lt;/strong&#38;gt; message!'&#41;;

在本例中，DIV元素中的内容看起来像这样：

&#60;div id=&#34;the-box&#34;&#62;This is the &#60;strong&#62;new&#60;/strong&#62; message!&#60;/div&#62;

当然，在实例中你需要使用大于或小于等特殊字符，而不是指定特殊的HTML实体代码。你可以使用jQuery的text函数来代替：

$&#40;'#the-box'&#41;.text&#40;'300 &#38;gt;200'&#41;;

div元素更新后代码如下：

&#60;div id=&#34;the-box&#34;&#62;300 &#38;gt; 200&#60;/div&#62;

在上面的例子中，现有的内容被替换为新的内容。如果你只想给文本附加一些信息该怎么办？幸运的是，jQuery提供append函数达到此目的。

$&#40;'#the-box'&#41;.append&#40;', here goes message'&#41;;

对原始的div作如上操作后，div元素里的内容看起来是这样的：

&#60;div id=&#34;the-box&#34;&#62;Message goes here, here goes message&#60;/div&#62;

除了追加，你可以在前面追加内容，将其插入到现存内容的前面而不是后面。此外，jQuery提供的函数可以在给定元素内插入内容，要么在前要么在后。还有函数替换内容、清空内容、移除元素、克隆元素等等。
除了DOM操作函数外，JavaScript框架通常还包含几个函数操作元素的样式和class。例如，你有一个表格，当鼠标经过时高亮显示某行。你可以创建一个特殊的类名hover，你可以将该类动态的添加到某行。利用YUI你可以使用下面的代码判断该行是否拥有hover类名，有则免之，无则加之。

if&#40;row.hasClass&#40;'hover'&#41;&#41; row.removeClass&#40;'hover'&#41;; else row.addClass&#40;'hover'&#41;;

同样，大多数JavaScript框架都拥有操作CSS的内置函数。
]]></description>
		<link>http://f2e.aliued.com/javascript%e6%a1%86%e6%9e%b6%e6%af%94%e8%be%83dom%e6%93%8d%e4%bd%9c-zt/</link>
			</item>
	<item>
		<title>JavaScript框架比较:DOM遍历 [zt]</title>
		<description><![CDATA[DOM遍历
基于ID、元素类型、类名查找元素非常有用，但是如果你想基于它在DOM树中的位置来查找元素该怎么办？换句话说，你有一个给定的元素，你想查找它的父元素、子元素中的一个、它的上一个或下一个节点兄弟节点。例如，采用下面这段零碎的HTML代码：
清单1：HTML碎片（一个table）

&#60;table&#62;
&#60;thead&#62;
&#60;tr&#62;
&#60;th&#62;Name&#60;/th&#62;
&#60;th&#62;Email Address&#60;/th&#62;
&#60;th&#62;Actions&#60;/th&#62;
&#60;/tr&#62;
&#60;/thead&#62;
&#60;tbody&#62;
&#60;tr id=&#34;row-001&#34;&#62;
&#60;td&#62;Joe Lennon&#60;/td&#62;
&#60;td&#62;joe@joelennon.ie&#60;/td&#62;
&#60;td&#62;&#60;a href=&#34;#&#34;&#62;Edit&#60;/a&#62;
                &#60;a href=&#34;#&#34;&#62;Delete&#60;/a&#62;&#60;/td&#62;
&#60;/tr&#62;
&#60;tr id=&#34;row-002&#34;&#62;
&#60;td&#62;Jill Mac Sweeney&#60;/td&#62;
&#60;td&#62;jill@example.com&#60;/td&#62;
&#60;td&#62;&#60;a href=&#34;#&#34;&#62;Edit&#60;/a&#62;
                &#60;a href=&#34;#&#34;&#62;Delete&#60;/a&#62;&#60;/td&#62;
&#60;/tr&#62;
&#60;/tbody&#62;
&#60;/table&#62;

tml&#8221;&#62;
清单1使用缩进来说明其中每个元素节点在DOM树中的位置。在这个实例中，table元素是根元素，有两个子节点thead和tbody。thead元素有一个tr子节点，tr有三个孩子－－所有的th元素。tbody元素有两个tr子节点，每个tr节点有三个孩子。在上述每一行的第三个节点中进一步包含子节点，都是两个链接标记。
正如你知道的那样，你可以使用一个JavaScript框架的选择函数通过ID很轻松的选择一个元素。在这个实例中，有两个元素拥有ID，它们是ID分别为row-001和row-002的tr元素。使用Prototype库选择第一个tr，可以使用下面的代码：

var theRow = $&#40;'row-001'&#41;;

在上一章，你还了解到，基于元素的类型或class使用选择器来获取元素。在这个实例中，你可以使用下面的语法来得到所有的td元素。

var allCells = $$&#40;'td'&#41;;

改代码的主要问题在于它返回了每一个td 元素。但是，如果你只想得到ID为row-001的tr的所有td元素该怎么办？这正是DOM遍历函数发挥作用的地方。首先，让我们使用原型来选择ID为row-001的tr的所有的子级。

var firstRowCells = theRow.childElements&#40;&#41;;

这将返回theRow变量（你最初设置的ID为row-001的tr）所有子元素的数组。
接下来，我们假设你只想得到该行的第一个子元素。在本例中，即包含“Joe Lennon”文本的td元素。要做到这一点，使用下面的语句：

var firstRowFirstCell [...]]]></description>
		<link>http://f2e.aliued.com/javascript%e6%a1%86%e6%9e%b6%e6%af%94%e8%be%83dom%e9%81%8d%e5%8e%86-zt/</link>
			</item>
</channel>
</rss>

