整体把握jQuery -jQuery 的原型关系图


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

       下面将结合 jQuery 源码,对上图的各个部分逐一解释。在图中,圆圈数字代表的是 jQuery 源码的位置,圆圈数字一样的位置表明这几个地方出自同块(block)代码。
  1. /**
  2. * ① 何为 jQuery?
  3. *
  4. * window 是对象,它有两个属性,分别为 jQuery 和 $,其值是一函数,此函数的名字是 jQuery。在函数
  5. * 的定义实体中,其实是通过 jQuery.fn.init 函数来构造对象的,init 函数才是真正的构造函数。也就是说,
  6. * 我们通过 ${ ... ) 得到的其实就是 jQuery.fn.init 的实例。
  7. */  
  8. var jQuery = window.jQuery = window.$ = function( selector, context ) {  
  9.     // The jQuery object is actually just the init constructor 'enhanced'  
  10.     return new jQuery.fn.init( selector, context );  
  11. };
复制代码
  1. /**
  2. * ② 所谓的 jQuery 的体魄  
  3. *
  4. * jQuery 函数有两个属性,分别为 fn 和 prototype,其值是一匿名对象(json 对象)。
  5. */  
  6. jQuery.fn = jQuery.prototype = {  
  7.     init: function( selector, context ) {  
  8.         ...  
  9.     },  
  10.       
  11.     jquery: "1.2.6",  
  12.       
  13.     get: function( num ) {  
  14.         ...  
  15.     },  
  16.          ...  
  17. }  
复制代码
  1. /**
  2. * ③ 赋予 jQuery 力量吧
  3. *
  4. * 这段代码别看就一句话,很短,不是吗?但这段代码是非常重要的。
  5. *
  6. * 首先,init 只是一个函数,通过 jQuery.fn.init 构造出来的对象,只是 jQuery.fn.init 的实例而已,
  7. * jQuery.fn 之前也说了,它是一匿名的 json 对象,包含 init 等等函数,我们想让 jQuery.fn.init 构造
  8. * 出来的对象具备很多行为的话,prototype 就是最好的手段之一。假设我们定义一个 function,名字叫做 Car
  9. * 吧,使用 prototype 为其添加行为的方式我们很熟悉吧:
  10. * function Car(owner) {
  11. *   this.owner = owner;
  12. * }
  13. * Car.prototype = {
  14. *   go: function() { ... }
  15. *   brake: function() { ... }
  16. * }
  17. * 这样,通过 new Car() 构造出来的对象就具备了 go 和 brake 行为。
  18. *
  19. * 因此,就因为下面的一句话,被 init 构造出来的对象就具备了 jQuery.fn 所定义的所有行为了,很帅吧!
  20. */  
  21. // Give the init function the jQuery prototype for later instantiation  
  22. jQuery.fn.init.prototype = jQuery.fn;  
复制代码
  1. /**
  2. * ④ 给我扩展的自由好吗
  3. *
  4. * 诚然,jQuery 或 jQuery.fn 定义的 function 你有可能会觉得不够用,没关系,John Resig 为我们提供了
  5. * 扩展的空间。jQuery 和 jQuery.fn 都有一个名字为 extend 的属性,该属性的类型就是一个 function,
  6. * 这个 function 本身就已经为我们提供了扩展功能。
  7. *
  8. * extend 属性所代表的 function,不过 50 行代码,写的太精辟了,有时间的话,大家可以一步一步的调试下,
  9. * 见识下 John Resig 的神功~
  10. */  
  11. jQuery.extend = jQuery.fn.extend = function() {  
  12.     ......  
  13. }  
复制代码
       整个 jQuery 的核心内容就是以上四块代码,诸如事件处理的代码,你都可以从以上四块代码找到影子。Enjoy jQuery~
标签: jqueryjquery事件

更多 jquery 相关资讯

又到毕业季:程序员Web面试之JQuery

又到毕业季:程序员Web面试之JQuery

又到了一年一度的毕业季了,青春散场,却等待下一场开幕。 在求职大军中,IT行业的程序员、码农是工科类**的热门选择之一,尤其是近几年Web的如火如荼,更是吸引了成

提高jQuery执行效率需要注意几点

1. 使用最新版本的jQuery jQuery的版本更新很快,你应该总是使用最新的版本。因为新版本会改进性能,还有很多新功能。 下面就来看看,不同版本的jQuery性能差异有多大。这里是

6款强大的 jQuery 网页布局创建及优化插件

6款强大的 jQuery 网页布局创建及优化插件

本文将为您介绍6款功能强大的jQuery插件,它们能够帮助您方便快捷地创建复杂的网络布局并进行优化。 1.UI.Layout 该插件可以创建任何你想要的UI形式:包括从

9个实用jQuery日历插件

9个实用jQuery日历插件

1. FullCalendarFullCalendar是很出名的jQuery日历插件,它支持拖拽等功能,整合了Google Calendar,而且可以通过JSON来绑定事件,设计师可以轻松地自定义日历样式,工程师则利用它提

推荐20款基于 jQuery & CSS 的文本效果插件 (上)

推荐20款基于 jQuery & CSS 的文本效果插件 (上)

jQuery 和 CSS 可以说是设计和开发行业的一次革命。这一切如此简单,快捷的一站式服务。jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要

7款很实用的jQuery/CSS3插件及源码下载

7款很实用的jQuery/CSS3插件及源码下载

今天我们要来分享7款很实用的jQuery/CSS3插件,并且把实现的源代码分享出来,这7款jQuery/CSS3插件都是刚整理的,希望可以帮助到你,一起来看看。 1、HTML5 3D立方体动画 立

18 个最新实用的 jQuery 插件

18 个最新实用的 jQuery 插件

1. Simple Effects for Drop-Down Lists 一个jQuery插件用于将普通的select控件转成一个带有一些简单扩展效果的下拉列表。 2. X-editable 这个插件能够让你在页面上创建可

实用的jQuery日历插件推荐

实用的jQuery日历插件推荐

1. FullCalendar FullCalendar是很出名的jQuery日历插件,它支持拖拽等功能,整合了Google Calendar,而且可以通过JSON来绑定事件,设计师可以轻松地自定义日历样式,工程师则

10个最好的 jQuery 视频插件

10个最好的 jQuery 视频插件

在这篇文章中已经收集了10个最佳的jQuery视频插件,帮助开发人员容易地实现网站播放影片功能。可以显示视频和视频播放列表。 1. Bigvideo.js   BigVideo.

11个新鲜出炉的jQuery图像滑块插件

11个新鲜出炉的jQuery图像滑块插件

如今图像滑块已成为一种流行的Web设计元素,通过滑块,你可以在有限的页面空间中展示更多的内容,带给用户更佳的浏览体验。本文将为你带来一些非常实用的jQuery图像滑块

更多 jquery事件 相关资讯

又到毕业季:程序员Web面试之JQuery

又到毕业季:程序员Web面试之JQuery

又到了一年一度的毕业季了,青春散场,却等待下一场开幕。 在求职大军中,IT行业的程序员、码农是工科类**的热门选择之一,尤其是近几年Web的如火如荼,更是吸引了成

提高jQuery执行效率需要注意几点

1. 使用最新版本的jQuery jQuery的版本更新很快,你应该总是使用最新的版本。因为新版本会改进性能,还有很多新功能。 下面就来看看,不同版本的jQuery性能差异有多大。这里是

9个实用jQuery日历插件

9个实用jQuery日历插件

1. FullCalendarFullCalendar是很出名的jQuery日历插件,它支持拖拽等功能,整合了Google Calendar,而且可以通过JSON来绑定事件,设计师可以轻松地自定义日历样式,工程师则利用它提

实用的jQuery日历插件推荐

实用的jQuery日历插件推荐

1. FullCalendar FullCalendar是很出名的jQuery日历插件,它支持拖拽等功能,整合了Google Calendar,而且可以通过JSON来绑定事件,设计师可以轻松地自定义日历样式,工程师则

10个最好的 jQuery 视频插件

10个最好的 jQuery 视频插件

在这篇文章中已经收集了10个最佳的jQuery视频插件,帮助开发人员容易地实现网站播放影片功能。可以显示视频和视频播放列表。 1. Bigvideo.js   BigVideo.

9个最好的 jQuery 视频插件

9个最好的 jQuery 视频插件

在这篇文章中已经收集了9个最佳的jQuery视频插件,帮助开发人员容易地实现网站播放影片功能。可以显示视频和视频播放列表。  1. Bigvideo.js   BigVideo.js 是一个

分享13款最新的超棒jQuery插件

分享13款最新的超棒jQuery插件

jQuery插件 jQuery 在这一期的jQuery插件大荟萃中,我们将精选最棒最新的jQuery插件,希望大家喜爱! Slidebars 这个超轻量级2kb的插件可以帮助你快速创建一款App

忘掉jQuery,使用JavaScript原生API

忘掉jQuery,使用JavaScript原生API

jQuery目前已经成为最流行的JavaScript库,它可以让开发者“write less, do more(写得更少,做得更多)”,这也是它的核心理念。通过它,用户可以更方便地处理HTML documents

jQuery性能优化

1、总是从ID选择器开始继承 在jQuery中最快的选择器是ID选择器,因为它直接来自于JavaScript的getElementById()方法。例如有一段HTML代码: <div id="content"> <form

网站如何做到完全不需要 jQuery ?

网站如何做到完全不需要 jQuery ?

来源:阮一峰jQuery 是现在最流行的 JavaScript 工具库。 据统计,目前全世界 57.3% 的网站使用它。也就是说,10 个网站里面,有 6 个使用 jQuery。如果只考察使用工具库的网