昨天和我们可爱的后端架构师在争论这个问题，我很多UI组件中大量使用了jQuery live进行事件绑定，众所周知它最直观的好处在于可以一直“监听”我们操作，对于新增的DOM节点也会有效，而不需要重新绑定。也许是因为这个“监听”让我们很多人联想到他会不断的去绑定、判断，会造成性能问题，这也是他给我的意见，真的是这样吗？ 在我开始认识live之前，我也看过网上很多文章说live会降低性能，昨天架构师也给我这么一篇：《jQuery性能优化指南》，此文说到live上完全就是避重就轻，原因都还没谈直接给出定结论——“虽然我把绑定事件重新写了一次，代码多了点，但这种方式的效率明显高于live()方式，特别是在频繁的DOM操作中，这点非常明显。”，鄙视之。 在此之前，我认为我这篇文章是毫无意义的，因为live是类似于绑定父节点，去监听子节点产生的冒泡才去执行相应的事件，这种代理的好处几乎已经得到js编程哥公认了。可是前端面对环境的问题往往要比后端复杂，这也是前端经常需要与人分享的原因，通过前端工程师不断的积累让很多浏览器的问题明朗起来，让彼此避免陷入泥潭中。理论上的争执永远比不过一个实测来得直观。下面是我对live与普通绑定的内存占用测试： 环境：IE8。 工具：sIEve。 jQuery:1.42 普通方式： jQuery(function($){ var li = ‘<li><a href="#">test</a></li>’, newLi = li; for (i = 0; i < 6000; i++) { newLi += li; }; $(‘#test’).html(newLi); $(‘#test a’).click(function(){ alert(0); return false; }); }); 测试结果：绑定前 20880KB | 绑定后 64932KB | 执行事件后 64980KB live 代理方式： jQuery(function($){ var li = ‘<li><a href="#">test</a></li>’, newLi [...]

artTxtCount是一个基于jQuery的简单输入字符统计与限制的插件，可以实现类似twitter、新浪微博、腾讯微博等字符统计的效果。 虽然网上已经有好几个同类型的插件了，但是封装过度，实际应用中总是有那么一丝牵绊，因为它们不能指定提示消息的容器。其实我们只需要一个简单的效果就可以了： 预览：http://www.planeart.cn/downs/artTxtCount/

(本文示例脚本于2010-05-28更新) 如果说09年是SNS年，那10年肯定微博年，各大网站都推出或者准备推出自己的微博。我这几天都在看新浪微博，对新浪微博的用户体验很欣赏，有些细节我自己也琢磨了下，据我所知其界面是大名鼎鼎的eico设计的，其前端架构很非常不错。 步入正题。 我点击新浪微博缩略图的时候会快速的置换一张大图，并且鼠标会显示放大或者缩小的指针，新浪前端工程师吧视口的大图片都预加载了，所以点击缩略图后替换大图的过程很爽快（PS：大家都知道点击Qzone的缩略图会出现什么）。 这种简约的效果非常适合插在内容区域单幅图片显示，放大后也不会干预用户操作，难怪很多微博客都采用（如：聚友旗下的911微博）。 其中有一个令我很惊讶的功能，图片可以自由旋转，这功能如何实现？ CSS属性？貌似只有IE可以用CSS私有滤镜 javascript？还没有听说过有这个内置方法 服务端处理？极度消耗服务器资源，而且响应会很迟钝 最用用firebug查看才知道是canvas实现的，它是未来的WEB标准的新产物，目前只有IE浏览器不支持它，但IE有个私有滤镜可以实现图片旋转。 图片展示用jQuery做是最轻松不过的是事情，一个预加载图片，一个动画基本上就可以搞定，而canvas图片旋转有个jQuery插件支持，于是我的”artZoom”就踏在前人的肩膀上出来了。 写完最后检测的时候发现IE8对其私有滤镜处理与IE6，IE7不一样，图片旋转后不会替换原来高度，结果把下面的元素盖住了。而新浪微博在IE8下这个BUG也没有修复。 我尝试用js对IE8置换图片长宽处理，仍然无法实现，最后动态改变图片外包元素高度来修复了这个问题。 查看文件： artZoom [需要jQuery库支持，artZoom.js 4kb多一点]

在蓝色理想转载的一篇文章： .codeTextarea { width:100%; height:10em; font-size:12px; } function runCode(obj){var newwin=window.open(”,”,”);newwin.opener = null;newwin.document.write(obj.value);newwin.document.close();} 随着时代发展，javascript阵营里面出现了越来越多的优秀的框架，大大简化了我们的开发工作，在我们使用这些框架的时候是不是也应该饮水思源想想它们都是怎样构建起来的呢？如果你不满足于仅仅是使用一些现成的API，而是深入了解它们内部的实现机制(照某人的说法, API是贬值最快的东西)，最好的办法就是阅读它们的源代码了，前提是你读得懂。 最近两天研究了一下jQuery的源码，在这里将本人一些粗浅认识分享出来，不当之处请各位指正。好了，下面我们就来看看jQuery大概是怎样工作的，我假定你已经具备了一些基本的javascript知识，如果基础不够俺推荐你阅读《JavaScript高级程序设计》和《悟透JavaScript》这两本书。本文不适合对js里面的类、对象、函数、prototype等概念没有了解的朋友。

逛网站的时候发现一个会‘呼吸’的图片，乍一看以为是flash做的。网站地址：dragoninteractive 后来才知道它是基于jquery与CSS结合制作的效果，代码很少，顿时被作者的创意折服。 一、先学习下 HTML代码： <a id=”logotype” href=”#”></a> CSS代码： a#logotype { background: url(logotype.jpg) no-repeat top left; display: block; position: relative; height: 70px; width: 119px; text-indent:-999em; overflow:hidden; } a#logotype .hover { background: url(logotype.jpg) no-repeat bottom left; display: block; position: absolute; top: 0; left: 0; height: 70px; width: 119px; } 上面有个.hover类，是用jquery生成的，javascript代码： $(function() { var fadeSpeed = ($.browser.safari ? [...]