jQuery 的原型关系图，让你快速对 jQuery 有个整体的把握

若干个月前，在博客园中看到一篇文章，内容很简单，就是一幅图，展示的是 jQuery 中各对象之间的关系，当时就觉得，这就是我想要的最直观的总结 jQuery 的方式。在那篇文章中，也有很多人表示不解，说看不明白。这里我也重画了一幅，并逐一解释。附件提供了 visio 格式的文件。

?

?

下面将结合 jQuery 源码，对上图的各个部分逐一解释。在图中，圆圈数字代表的是 jQuery 源码的位置，圆圈数字一样的位置表明这几个地方出自同块(block)代码。

?

/** * ④ 给我扩展的自由好吗 * * 诚然，jQuery 或 jQuery.fn 定义的 function 你有可能会觉得不够用，没关系，John Resig 为我们提供了 * 扩展的空间。jQuery 和 jQuery.fn 都有一个名字为 extend 的属性，该属性的类型就是一个 function， * 这个 function 本身就已经为我们提供了扩展功能。 * * extend 属性所代表的 function，不过 50 行代码，写的太精辟了，有时间的话，大家可以一步一步的调试下， * 见识下 John Resig 的神功～ */jQuery.extend = jQuery.fn.extend = function() {......}

?整个 jQuery 的核心内容就是以上四块代码，诸如事件处理的代码，你都可以从以上四块代码找到影子

?