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

最新推荐文章于 2021-06-09 13:03:54 发布

wen66

最新推荐文章于 2021-06-09 13:03:54 发布

阅读量170

点赞数

分类专栏： ajax 文章标签： jQuery prototype Visio json Go ViewUI

本文链接：https://blog.youkuaiyun.com/wen66/article/details/83771502

版权

本文通过一张jQuery对象间关系图，结合源码详细解释了jQuery的核心内容，包括四个关键代码区块，帮助读者直观地理解和掌握jQuery的内部机制。附件提供Visio格式的文件供下载参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

/**
 * ① 何为 jQuery？
 *
 * window 是对象，它有两个属性，分别为 jQuery 和 $，其值是一函数，此函数的名字是 jQuery。在函数
 * 的定义实体中，其实是通过 jQuery.fn.init 函数来构造对象的，init 函数才是真正的构造函数。也就是说，
 * 我们通过 $( ... ) 得到的其实就是 jQuery.fn.init 的实例。
 */
var jQuery = window.jQuery = window.$ = function( selector, contex

最低0.47元/天解锁文章