对于jQuery大家都非常熟悉了，也许大家也早早就认识了jQuery UI，但是因为其可用的控件非常少所以放弃了，但是jQuery UI的设计与构造却是非常不错的。 基于Widget Factory的组件模式 从1.8版本开始jQuery UI把核心分为widget与core并且widget不依赖于core。 这样来讲，所有的组件都是基于Widget Factory所构建的，并且都继承于Widget Factory。 对于开发前端组件来说，需要更多的是一种规范，这种规范是可以让多人来合作的，并且对产出的组件有统一的编码风格与相同的基础方法。 Widget Bridge 如何实现把组件（Widget）与jQuery API相关联呢？ jQuery UI提供了$.widget.bridge方法。 其实如果了解设计模式的话，应该会想到Bridge Pattern 中文详解 概念：【GOF95】在提出桥梁模式的时候指出，桥梁模式的用意是"将抽象化(Abstraction)与实现化(Implementation)脱耦，使得二者可以独立地变化"。这句话有三个关键词，也就是抽象化、实现化和脱耦。 如果细心的话，你可能会发现，$.widget.bridge的源码在处理event其实就是jQuery Plugin的编写建议。 所以jQuery UI就是规范化的jQuery Plugin组合。 详细介绍见其开发指导见 Developer Guide jQuery其实只是冰山一角，在你使用中，会发现有更多东西可以去挖掘也非常值得去深入的挖掘。

这两个方法一直都觉得挺难理解的，但是今天写程序时发现这两个方法的区别就在于$.extend是作用于一个object的静态方法（static method），而$.fn.extend是在作用于prototype的一个实例方法（instance method）。 构造jQuery时会实例化一个对象 // Define a local copy of jQuery var jQuery = function( selector, context ) { // The jQuery object is actually just the init constructor ‘enhanced’ return new jQuery.fn.init( selector, context ); }, 对于$.extend相当于对jQuery Object自身进行扩展。查看源码 … } else if ( copy !== undefined ) { target[ name ] = copy; } [...]

选择器的优化 如何提高Sizzle选择器的性能? 不同的选择器引擎解析是不同的 测试地址：http://alexsexton.com/selectors/ 我们看到Sizzle的方法与querySelectorAll的方法是一至的 关于querySelectorAll请到MDC查看 下面是我们平常写jQuery时需要注意的： 左轻右重 bad div.grid2col .column better .grid2col td.column 尽量让左边只放一个选择器tag或者Class 如果需要tag.class这种选择器，最好放在右边 ID优先 bad $(‘#item div.column’) better $(‘#item’).find(‘div.column’) 能简则简 bad div.grid2col .content .column better .grid2col .column DOM操作优化 尽量减少DOM操作 bad $.each(array, function(){    var li = ‘<li>’ + item + ‘</li>’;    $(‘#ballers’).append(li); }); better var frag = document.createDocumentFragment(); $.each(array, function(){    [...]

.find() Description: Get the descendants of each element in the current set of matched elements, filtered by a selector. 查找子元素，反回一个新的jQuery Object，与.children()选择器相同，而两个选择器唯一不同的是.children()只能返回一个级别的元素。 e.g. <div id="t1" class="demo1"><div class="demo2"><div class="demo3"></div></div> </div> $("#t1").children(); //return [div.demo2] $("#t1").find("div"); //return [div.demo2, div.demo3] $("#t1").children(".demo3"); //return [] .fliter() Description: Reduce the set of matched elements to those that match the selector or pass the [...]

$是jQuery里最常用的符号（当然其他类库也喜欢用$，可能看到后就想到Dollar），在jQuery里的含义非常广泛，详见jQuery() 今天用Ajax返回HTML时遇到一个$(html)的问题，顺便看了一下jQuery处理HTML的方法。 $.get({ url: "test.html",function(data){ var $d=$(data);    }}); 这样得到的$(data)是一个数组（NodeList类型） 如果是正常的data应该是一个HTML   jQuery是怎么去掉那些多余的HTML代码的呢？ 从jQuery的源码可以看出，当$()里面包含了一个String类型的参数，就会判断是否需要添加或者重构。 重构的代码： ret = buildFragment( [ match[1] ], [ doc ] ); 在buildFragment里面jQ用createDocumentFragment的方法重建了HTML文档也是清理的第一步。 然后又一翻天书（正则）去空格与调整为全是小写字母后，到了关键一步。 这里jQ用了一个比较有趣的方法来清理HTML 截取部分代码： var div = context.createElement("div"); // Go to html and back, then peel off extra wrappers div.innerHTML = elem //html document div.childNodes; 这个方法可真是太爽了，直接用div里面包含整个HTML文档，然后用childNodes的方法直接把HTML文档直接转换为NodeList类型，并且轻松的去除了其他额外的标签。 然后： fragment.appendChild( ret[i] ); 这样只需要刷新一次DOM结构就可以把HTML文档处理的比较干净，里面不仅包含了body里面的所有DOM元素而且还包含meta与title等有用信息当然jQ有对script与style标签特殊处理，这里就不说了。 [...]

转载自:岁月如歌 源文地址：http://lifesinger.org/blog/2010/01/study-jquery-in-a-simplified-way/ 学习复杂代码的最好方法是简化： (function(win, undefined) { var jQuery = function(selector, context) { // jQuery 对象就是 init 函数的一个实例 return new jQuery.fn.init(selector, context); }, document = window.document, push = Array.prototype.push, slice = Array.prototype.slice; jQuery.fn = jQuery.prototype = { init: function(selector, context) { // 选择器 var ret = (context || document).querySelectorAll(selector); // 转换为普通数组 ret = slice.call(ret); // jQuery [...]

原文：101 on jQuery Selector Performance by Andreas Grabner, Nov 09, 09 译文：关于jQuery 不同选择器的性能比较 by Unmi 上周我认真分析了一个 Web 页面，它在 onLoad 事件中处理一段定制脚本文件用了 4.8 秒。结果是其中 2.8 秒消耗在动态菜单库上(将会在博客中单独记录)，剩下的 2 秒花费在 jQuery 的选择器上。分析显示多数选择器不返回任何对象，而那些会返回对象的选择器可考虑用不同的选择器来改善性能。 关于 jQuery 选择器 有大量的日志文章论述了 jQuery 选择器及它们的性能影响。正如你所知，可以通过 ID, TagName 或 ClassName 选择元素。依赖于不同的选择器， jQuery 会使用浏览器本地方法，如 通过 ID 或标签来选择元素，或者在使用类名选择时须手工从 DOM 中遍历获得元素(因为在 IE  中不存在相应的 getElementsByClssName). 分析我的页面时间中这 2 秒 在 onLoad 处理器中对页面中某些特定的元素使用 [...]