其中提到了一个非常重要的概念就是事件委托。事件委托的概念是基于事件触发的冒泡机制的。

在以前firefox还有一个 事件捕捉机制，事件捕捉机制就是先从最顶层的元素一层一层向子元素触发。 但是我用这个demo在新版本的firefox里面没有检查出来。。《JavaScript高级程序设计》　第一版里面提及到的，firefox采用的先捕捉，在冒泡的机制。不过现在测试这个demo并没有发现捕获动作（在firefox最新版本里面测试demo，点击span的时候并没有先打印出html的click事件内容。）

事件委派实际上基于冒泡机制，任何一个子元素的事件，都会冒泡到父元素。 事件委派的概念就是 当子元素自身触发一个事件以后，Javascript并没有给子元素提供事件响应，等子元素的事件冒泡到父元素，这个时候Javascript给父元提供事件响应，由父元素的事件来处理子元素的事情。 也就是说，把本来应该子元素自己完成的事件，委派给父元素去完成。

demo2：传统的事件绑定。

事件委托demo：

这个需要在高级浏览器中运行，应为在事件监听的时候使用的是w3C的“addEventListener”方法，ie要另做处理。

 
可以看到，1.6.2版本的运行次数，远远超过两个老版本。尤其是第一条语句，性能有数倍的提高。
其他语句的测试，比如.attr("value")和.val()，也是新版本的jQuery表现好于老版本。
2. 用对选择器
在jquery中，你可以用多种选择器，选择同一个网页元素。每种选择器的性能是不一样的，你应该了解它们的性能差异。
（1）最快的选择器：id选择器和元素标签选择器
举例来说，下面的语句性能最佳：
　　$('#id')
　　$('form')
　　$('input')
遇到这些选择器的时候，jQuery内部会自动调用浏览器的原生方法（比如getElementById()），所以它们的执行速度快。
（2）较慢的选择器：class选择器
$('.className')的性能，取决于不同的浏览器。
Firefox、Safari、Chrome、Opera浏览器，都有原生方法getElementByClassName()，所以速度并不慢。但是，IE5-IE8都没有部署这个方法，所以这个选择器在IE中会相当慢。
（3）最慢的选择器：伪类选择器和属性选择器
先来看例子。找出网页中所有的隐藏元素，就要用到伪类选择器：
　　$(':hidden')
属性选择器的例子则是：
　　$('[attribute=value]')
这两种语句是最慢的，因为浏览器没有针对它们的原生方法。但是，一些浏览器的新版本，增加了querySelector()和querySelectorAll()方法，因此会使这类选择器的性能有大幅提高。
最后是不同选择器的性能比较图。

 
可以看到，ID选择器遥遥领先，然后是标签选择器，第三是Class选择器，其他选择器都非常慢。
3. 理解子元素和父元素的关系
下面六个选择器，都是从父元素中选择子元素。你知道哪个速度最快，哪个速度最慢吗？
　　$('.child', $parent)
　　$parent.find('.child')
　　$parent.children('.child')
　　$('#parent > .child')
　　$('#parent .child')
　　$('.child', $('#parent'))
我们一句句来看。
(1)$('.child', $parent)
这条语句的意思是，给定一个DOM对象，然后从中选择一个子元素。jQuery会自动把这条语句转成$.parent.find('child')，这会导致一定的性能损失。它比最快的形式慢了5%-10%。
(2)$parent.find('.child')
这条是最快的语句。.find()方法会调用浏览器的原生方法（getElementById，getElementByName，getElementByTagName等等），所以速度较快。
(3)$parent.children('.child')
这条语句在jQuery内部，会使用$.sibling()和javascript的nextSibling()方法，一个个遍历节点。它比最快的形式大约慢50%。
(4)$('#parent > .child')
jQuery内部使用Sizzle引擎，处理各种选择器。Sizzle引擎的选择顺序是从右到左，所以这条语句是先选.child，然后再一个个过滤出父元素#parent，这导致它比最快的形式大约慢70%。
(5)$('#parent .child')
这条语句与上一条是同样的情况。但是，上一条只选择直接的子元素，这一条可以于选择多级子元素，所以它的速度更慢，大概比最快的形式慢了77%。
(6)$('.child', $('#parent'))
jQuery内部会将这条语句转成$('#parent').find('.child')，比最快的形式慢了23%。
所以，最佳选择是$parent.find('.child')。而且，由于$parent往往在前面的操作已经生成，jQuery会进行缓存，所以进一步加快了执行速度。
具体的例子和比较结果，请看这里。
4. 不要过度使用jquery
jQuery速度再快，也无法与原生的javascript方法相比。所以有原生方法可以使用的场合，尽量避免使用jQuery。
请看下面的例子，为a元素绑定一个处理点击事件的函数：
　　$('a').click(function(){
　　　　alert($(this).attr('id'));
　　});
这段代码的意思是，点击a元素后，弹出该元素的id属性。为了获取这个属性，必须连续两次调用jQuery，第一次是$(this)，第二次是attr('id')。
事实上，这种处理完全不必要。更正确的写法是，直接采用javascript原生方法，调用this.id：
　　$('a').click(function(){
　　　　alert(this.id);
　　});
根据测试，this.id的速度比$(this).attr('id')快了20多倍。
5. 做好缓存
选中某一个网页元素，是开销很大的步骤。所以，使用选择器的次数应该越少越好，并且尽可能缓存选中的结果，便于以后反复使用。
比如，下面这样的写法就是糟糕的写法：
　　jQuery('#top').find('p.classA');
　　jQuery('#top').find('p.classB');
更好的写法是：
　　varcached = jQuery('#top');
　　cached.find('p.classA');
　　cached.find('p.classB');
根据测试，缓存比不缓存，快了2-3倍。
6. 使用链式写法
jQuery的一大特点，就是允许使用链式写法。
　　$('div').find('h3').eq(2).html('Hello');
采用链式写法时，jQuery自动缓存每一步的结果，因此比非链式写法要快。根据测试，链式写法比（不使用缓存的）非链式写法，大约快了25%。
7. 事件的委托处理（EventDelegation）
javascript的事件模型，采用"冒泡"模式，也就是说，子元素的事件会逐级向上"冒泡"，成为父元素的事件。
利用这一点，可以大大简化事件的绑定。比如，有一个表格（table元素），里面有100个格子（td元素），现在要求在每个格子上面绑定一个点击事件（click），请问是否需要将下面的命令执行100次？
　　$("td").bind("click", function(){
　　　　$(this).toggleClass("click");
　　});
回答是不需要，我们只要把这个事件绑定在table元素上面就可以了，因为td元素发生点击事件之后，这个事件会"冒泡"到父元素table上面，从而被监听到。
因此，这个事件只需要在父元素绑定1次即可，而不需要在子元素上绑定100次，从而大大提高性能。这就叫事件的"委托处理"，也就是子元素"委托"父元素处理这个事件。
具体的写法有两种。第一种是采用.delegate()方法：
　　$("table").delegate("td","click", function(){
　　　　$(this).toggleClass("click");
　　});
第二种是采用.live()方法：
　　$("table").each(function(){
　　　　$("td", this).live("click",function(){
　　　　　　$(this).toggleClass("click");
　　　　});
　　});
这两种写法基本等价。唯一的区别在于，.delegate()是当事件冒泡到指定的父元素时触发，.live()则是当事件冒泡到文档的根元素后触 发，因此.delegate()比.live()稍快一点。此外，这两种方法相比传统的.bind()方法还有一个好处，那就是对动态插入的元素也有效，.bind()只对已经存在的DOM元素有效，对动态插入的元素无效。
根据测试，委托处理比不委托处理，快了几十倍。在委托处理的情况下，.delegate()又比.live()大约快26%。
8. 少改动DOM结构
（1）改动DOM结构开销很大，因此不要频繁使用.append()、.insertBefore()和.insetAfter()这样的方法。
如果要插入多个元素，就先把它们合并，然后再一次性插入。根据测试，合并插入比不合并插入，快了将近10倍。
（2）如果你要对一个DOM元素进行大量处理，应该先用.detach()方法，把这个元素从DOM中取出来，处理完毕以后，再重新插回文档。根据测试，使用.detach()方法比不使用时，快了60%。
（3）如果你要在DOM元素上储存数据，不要写成下面这样：
　　var elem = $('#elem');
　　elem.data(key,value);
而要写成
　　var elem = $('#elem');
　　$.data(elem,key,value);
根据测试， 后一种写法要比前一种写法，快了将近10倍。因为elem.data()方法是定义在jQuery函数的prototype对象上面的， 而$.data()方法是定义jQuery函数上面的，调用的时候不从复杂的jQuery对象上调用，所以速度快得多。（此处可以参阅下面第10点。）
9. 正确处理循环
循环总是一种比较耗时的操作，如果可以使用复杂的选择器直接选中元素，就不要使用循环，去一个个辨认元素。
javascript原生循环方法for和while，要比jQuery的.each()方法快，应该优先使用原生方法。
10. 尽量少生成jquery对象
每当你使用一次选择器（比如$('#id')），就会生成一个jQuery对象。jQuery对象是一个很庞大的对象，带有很多属性和方法，会占用不少资源。所以，尽量少生成jQuery对象。
举例来说，许多jQuery方法都有两个版本，一个是供jQuery对象使用的版本，另一个是供jQuery函数使用的版本。下面两个例子，都是取出一个元素的文本，使用的都是text()方法。你既可以使用针对jquery对象的版本：
　　var $text = $("#text");
　　var$ts = $text.text();
也可以使用针对jQuery函数的版本：
　　var $text = $("#text");
　　var$ts = $.text($text);
由于后一种针对jquery函数的版本不通过jQuery对象操作，所以相对开销较小，速度比较快。

var i=10;

function a() {
 alert(i);
 var i = 2;
 alert(i);
};
a();

</script>

别运行，给出答案。

这个问题涉及到2个问题，第一个是作用域的问题，第二个是javascript特殊的编译方式的问题。

第一个i，属于全局变量，第二个函数a里面的i，应为使用了 var申明，所以他的作用域属于函数体（花括号）里面。

首相必须明白函数的创建和执行原理 作用域的原理，
函数在创建的时候会生成一个 一个作用域（Scope）属性【这个属于是内部属性】，这个属性里会被 作用域链（Scope chain）填充，作用域链 会在按顺序存放每个可访问 对象集合。
也就是说，函数a被创建的时候，最近的第一个可访问对象的集合 会被翠芳在 ScopeChain[0]的位置。之后全局对象集合会存放在 ScopeChain[1]的位置。

函数在执行的时候，也会生成“执行期上下文”（execution context）的内部对象。“执行期上下文”定义了函数在运行的时候当时做的环境。应为每个函数在多次运行的时候并不是每次都会一样所以需要"执行期上下文"来记录每次运行的环境。当次执行结束以后，这个对象会自动销毁（当然，很多情况下这种销毁机制被自身代码所牵制或则浏览器一些特殊的设定导致不能销毁，所以才出现了内存泄漏）。

"执行期上下文"创建时会被初始化为当前函数的作用域属性中包含的对象。这些对象会被按照出现顺序复制到"执行期上下文"的作用域中。这个过程完成了以后会产生一个“活动对象”（actvation object），这个对象会推入到“执行期上下文”作用域链的最前面（也就是ScopeChain[0]的位置）。当"执行期上下文"被销毁，"活动对象" 也会同时被销毁.

回到问题，第一次执行 alert(i)的时候，作用域链查询，首先会查询 alert这个方法的"执行期上下文"，当查询alert初始化"执行期上下文"时候复制alert作用域链里面的对象集合所生成的"活动对象"里面没有i这个对象的时候，就会查询"执行期上下文"作用域链[1]位置所存储的对象集合，前面所提到，“作用域链 会在按顺序存放每个可访问 对象集合”，所以作用域链[1]所存储的 对象集合 是函数a里面对象集合。假如在函数a里面也没找到i，那么会继续查询作用域链[2]也就是全局对象集合。如果全局对象集合 一起没找到i，那么这个时候就会报错。

那么 第一个alert到底有没有在函数a里面找到i呢？

这里就会涉及到我需要说的第二个问题“javascript特殊的编译方式”

在javascript 里面，存在一个变量声明提升（Hoisting）的概念，JavaScript 会提升变量声明。这意味着 var 表达式和 function 声明都将会被提升到当前作用域的顶部。

需要注意的是，
1.只有申明被提升了，赋值操作不被提升的；
2.提升操作只能提升到当前作用域的顶部。

所以结论就是，
第一个alert是可以在函数体里面找到变量i的，因为 i使用的var定义，会在编译的时候提升到函数a的顶部。但是由于提升的只有申明，赋值操作不被提升。所以第一个结果是undefined。
第二个alert的"执行期上下文"在作用域链[1]位置的对象中i已经执行了复制操作。所以结果会是2.

最简单能够体现 变量被提升的方式。
<script>
 //测试i的结果
 alert(i);
 //测试i是否是存在的对象   hasOwnProperty只有高级浏览器可以使用
 alert(window.hasOwnProperty(i));
 var i = 2;
</script>

1. <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />  

够简单把，够明了把，不不像其他例子里面有很多颜色。有几个圆。既然是学习，就得先学简单的。

后面的 from 和to  这个就不要说了，问题是 这个不是线性渐变，线性渐变里面from是上to下，或左to右。 圆形渐变（不用径向渐变这一次，这个不是那么直白）里面from是从外到里。

还把，那么现在还有6个数字参数，【 150 150,100,150 150,0】 

怎么会有这么多参数？第一次看晕了有木有啊。这是坑爹爹把~ 好吧， 其实径向渐变是2圆。没错 是2个。那么参数就是 

【圆1坐标，圆1半径，圆2坐标，圆2半径】

我们知道，坐标是x 和y 2个值，所以 6数值 第一个和第二个是没“，”隔开的。同样第四个和第五个也一样。

既然是坐标，所以不想单位就是像素，可以用其他常用单位做定位啦。

不过半径不知道为什么不能用？奇怪呢。

好吧，到现在知道6个参数怎么做渐变呢?  其实，大部分做的时候就是一个颜色到另一个颜色的渐变。也就是说，第2个色是结束点。  所以第二个员压根就没有半径....所以第个参数是0.  如果你需要渐变是结束在这个第一个大员的中心点，那么地第2个圆肯定和第一个圆的xy坐标是一样的，因为径向渐变是从第1圆的最外面的地方渐变到第2个圆的最外面的地方。

的时候测试出来的结果却是"1</option>"，ie6  7 8 都存在这个问题。

经过测试，发现 在用innerHTML输出html 的时候 凡是自定义标签（比如“<x></x>”）都会丢点前面这一部分， 想option必须在 select标签下面的，也不能直接innerHTML。

当然用jq的.html() 方法 不存在这个问题。

其实这类banner广告图主要思路都是一样的。

1.定义一个切换的方法。

2.定义一个方法保证切换的时候 下面的  1  2  3  之类的选中位置正确

我这里用的fadeIn() 方法来实现效果。 如果喜欢可以改成其他的。

demo：http://dabaii.com/demo/20101203/index.html

2010.12.10：ps:最近同事发现1.2版本jQ下面有问题。主要原因是jquery1.2没有通过each 方法给数组对象绑定时间的时候产生不会闭包效果。所以直接绑定事件的时候始终会执行最后一个。

其实在代码设计的时候 按道理也应该使用each 方法，这样就不需要在 切换对象 上添加一个属性 去获取了。

最后通过测试，发现1.2的jpqery 的数组对象有的情况下还是会产生闭包的。具体我也不知道怎么去判断。所以建议只要是数组对象需要给每个元素绑定时间都调用each方法。

由于是自己写的第一个js小游戏，代码规范 算法还有很多地方都很烂。而且好像还有bug，先发出来。有空在该把。

http://dabaii.com/demo/20101129/dadoudou.html

一下是修改记录：

1.头部添加css文件“templates/default/img/bluestyle/blue.css”

2.添加背景图片

3.主体添加上下10像素外边框，添加5像素投影，颜色#aacdea，添加5像素圆角边框。

4.头部添加背景图片

5.整体页面90%的透明度

6.翻页风格修改

7.其他页面页面标题修改

8.存档页面 文字字体修改

9.代码编辑器风格修改，14号宋体增加阅读性

10.添加一个头像

11.给头像添加一个QQ交谈的连接，鼠标hover放大图片，ie使用zoom实现。放大1.2倍。

备注：整个风格添加不影响旧版本，去掉样式文件就可以回到以前版本。

延迟滚屏加载主要优势在于他可以让首屏加载速度提高，而在首屏范围外的图片只有在滚屏的时候在加载（默认模式），对于低带宽的用户和高流量的网页来说这个技术有很可观的价值（提高首屏速度，节约CDN流量）。土豆网  和 QQ返利 上面可以预览到这种效果。当你在下拉滚动条的时候，首屏以外的图片才加载（土豆网主要是视频缩略图，QQ返利主要是返利商家logo）。

首先你需要在你的网页里面应用jQuery和lazyload 2个js文件：

最简单的实现方式：

这个代表你网站上所有图片都会有这个效果，提供一个demo效果:http://www.dabaii.com/demo/20100907/index.html图片背景是红色的，你可以打开网页在首屏等图片加载完毕，网页加载完毕（看浏览器右下角出现完成2个字），在拉动滚动条，你会发现首屏以外的图片开始看到的是红色背景，然后才是图片（如果看不到，那恭喜你你的网速很快，我使用的图片比较小 所以 网速快有可能体验不到效果，你可以 用firefox的插件Throttle看控制一下你的带宽看效果）。如果第一次没看到效果ctrl+F5刷可以再次看到。

但是很明显，这个并不是我实际想要的，很明显我不希望所有首屏以外的图片都实行延迟滚品加载机制，我的页面装饰图，体现页面风格的图片不需要使用这个效果。只有特定的产品图 或者说是内容图（和页面效果无关的，是属于内容模块的图片）才使用这种机制。这样不会导致我下拉的时候页面效果很难看。所以使用的时候记得限定范围。另外lazyload 还提供了其他几个参数：

访问 lazyload for jQuery网站（英文）

*内容以上面地址的介绍为准，此文章只不过提供个人的测试结果和解释。只作为参考，不能作为文档。请一定以辨证的眼光看待，免得误人子弟。请勿在未校队改文章内容前提下盲目的转载。如果发现错误或者有更好的建议 请发邮件给我。邮箱 dabai@dabaii.com 我会及时更正。谢谢。

昨天产品需求让我做一个招聘页面，提供了一份word文档里面有一切招聘岗位的描述。于是为让他提一个需求给程序员在后台提供给编辑一个可以发布招聘信息的编辑器。结果产品以招聘岗位很少变更为由（招聘的都是销售 市场推广之类的人才，所以多多不限），让我把5个招聘职位做成静态的。于是我就想把招聘的信息记录在json里面，用js生成页面。

这个是标准的json数据么？ 我用jsonView.(点击下载如果不能下载请百度“json viewer”关键字) 查看显示确实能够用，而且能够体现数据结构（如下图）。

但是我突然想起我有一个基于firefox的火狐插件jsonView（在火狐里面选工具 附加组件 获取附加组件 查询jsonView 就可以找到）。我好奇的把这个结构去验证一下（装了组件以后打开下面这个连接。）http://www.dabaii.com/demo/20100825/1.json(如果显示成文本本件，把json文件另存在本地用firefox打开就可以验证)。

你会发现这个插件会提示你 ：“分析JSON文件时出错。文件格式可能不正确.”

其实在json里面， 属性和值 都需要用引号包含起来。   {job:"文本"} 应该写成{”job":"文本"}

一份json在页面上怎么调用呢 ……如果用jquery的话 里面提供了一个 调用json的方法：

http://www.dabaii.com/demo/20100825/1.json

http://www.dabaii.com/demo/20100825/json.html

看地址 http://www.dabaii.com/demo/20100709/

当然，单单测试position 是不会有问题的。但是这个问题很容易触发。比如说 position 的父标签或者最祖辈标签里有背景。加入机器稍微差点这个时候就会触发。如果机器好点 ，有可能还得加条件。

同样，网上流传的那个清楚浮动的理想方式里面的 

这个也会引起新能问题。

提供一个测试：

试试用你的ie6 测试一下。http://www.dabaii.com/demo/20100701/

注意这个一个测试文件。不要纠结css代码和结构的意义。虽然这个测试文件 这种css 和代码看上去没啥意义，也不符合逻辑。为什么平白无故清浮动？ 为什么A要有position:relative。但是总归有一天会又这样的结构需要这样的css……这里只是展示一下这个bug出现的条件而已。

这行代码有啥用呢？  实际上我在产品布局的时候希望 产品呈方块形一个个排列，一行N个，一共x行。

但是我们知道如果我们使用浮动的话 必须给li定高，要不然 不等高会导致下一行出现错位。原因是 在统一行多个浮动始终会以最高的那个为标准来确定是否换行。 至于为什么要浮动，而使用inline， 主要是我们希望li这个元素拥有block状态下的一些属性。以便更好的控制。

而使用inline-block 可以实现有lnline的显示方式，但是又有block的属性。 但是这个属性版本性支持不理想。

首先我们在ie下面使用*display:inline; zoom: 1;来模拟。 display 可以让对象实现在一行显示， zoom可以让对象获得layout，从而拥有black状态的一些属性。 

vertical-align: top; 解决li之间上下对其的问题

min-height:180px; 主要是让默认状态实现统一的一个高度。

 _hiehgt:180px; 让ie6实现 min-height

这个使用 li的起始位置在剧中的50%的地方，所以需要把li 向左边移动50%。 这里想问题的时候要注意，position:relative所定义的移动百分比不是相对于自身的，而是相对于父元素的。也就是说 li 50% 实际上计算出来的宽度 是 ul宽度的一半，而不是li的。

分析以后才知道，如果box高度是奇数的话，这个bug会出现。笔记一下。

在来看看我们天天抱怨的ie6把（http://baike.baidu.com/view/476980.htm）,2001年末发布的版本。

那看看我们的css版本把（http://baike.baidu.com/view/15916.htm#2）,1998年中旬发布的css2.0。

有何感想？你有理由去抱怨一款8年前的或者3年前的产品么？在你抱怨他的时候是否看到他的伟大，试问如果firefox从现在开始不更新能否3年以后 8年以后还能用来正确有效的浏览90%以上的网页?在抱怨的时候你为啥不想想在这8年的时间里为什么舍不得花费20分钟来升级你的浏览器。

一款不更新的浏览器能够坚持8年已经不错了，你们就放过ie6把，该升级的升级，改写hack的写hack，不要整天骂他了。他只是个孩子。

火狐的版本历史（http://baike.baidu.com/view/3279.htm#2）,太多太多，我很喜欢火狐，但是如果真的说心里话，我很佩服ie。

在线地址：

http://www.dabaii.com/demo/2009/04/index.htm

xls表格下载

http//www.dabaii.com/demo/2009/04/html4_html5.xls

百度文档中心下载

http://wendang.baidu.com/view/2079551810a6f524ccbf8596.html

万恶的 google文档又挂了~~~所以不提供地址。另外我的评论系统坏了，有错误请麻烦各位邮箱联系  dabaicj@gmail.com

http://www.dabaii.com/demo/2009/03/ 

这个效果怎么写标签，于是 我想起了我之前写的一个模范豆瓣评分的（http://dabaii.com/?action=show&id=35）。

显然这次的评分和上次的从标签来说 没什么好说的，主要还是看怎么实现效果。

首先确定结构

首先要确保可以复用 ，所以box是个单独的模块，一个评分条。 f 是现实分值的， s 是评分条。

css代码（不解释）：

关键是思维，其实我一直觉得写前端效果主要还是要想到用什么方式实现效果。我这里采用的是获取鼠标基于评分条位置来确定分数显示版的位置，来判断鼠标位置位于评分条总宽度的百分比，然后确定分数显示版的数值。

步骤
1。给所有评分条绑定事件；
2。获取评分条的位置；
3。获取鼠标位置；
4。计算显示板的需要显示的位置（鼠标位置-评分条位置）；
5。计算显示数值（显示位置/评分条宽度*10；截取小数点1位）；
6。设置到相应页面属性。

提供一个获取鼠标位置的方法。

js代码（基于jQ，别问我js怎么写 不解释）：