本系列是针对jquery2.0.3版本进行的讲解。此版本不支持IE8及以下版本。

(function(){

  (21, 94)      定义了一些变量和函数,   jQuery = function(){};

  (96,283)     给jQuery对象添加一些属性和方法(实例方法,通过$("div")这类的jQuery实例对象来调用)

  (285,347)    extend : jQuery的继承方法

  (349,817)    jQuery.extend():扩展一些工具方法(静态方法,直接通过$来调用的,比如:$.trim)

  (877,2856)  Sizzle:复杂选择器的实现。比如:$("ul li + p ");

  (2880,3042)  Callbacks:回调对象-》函数的统一管理。

  (3043,3183)  Deferred:延迟对象-》对异步的统一管理

  (3184,3295)  support:功能检测

  (3308,3652)  data(): 数据缓存

  (3653,3797)  queue():队列管理,dequeue.

  (3803,4299)  attr(),prop(),val(),addClass(),对元素属性的操作

  (4300,5128)  on(),trigger() 事件操作的相关方法

  (5140,6057)  DOM操作:添加,删除,获取(next),包装(wrap),Dom筛选

  (6058,6620)  css():样式的操作

  (6621,7854)  提交的数据和ajax的操作:load,ajax

  (7855,8584)  animate():运动的操作。 show,hide,fadeIn。

  (8585,8792)  offset(),位置和尺寸的一些方法

  (8804,8821)  jQuery支持模块化的模式

  (8826)             window.jQuery = window.$ = jQuery;

})()

(function(window,undefined){

  //window局部化,1.查找速度快。2.利于代码压缩,可以把window压缩成a。

  //undefined,有些浏览器的undefined可以被修改,为了防止undefined被修改,所以传了一个undefined给了jQuery

  core_strundefined = typeof undefined;

    //为了防止ie9以及以下版本,判定一个xmlNode方法为undefined时出问题。  

    //比如:a.b== undefined(a为xmlNode,并且在IE9以下浏览器下,b不存在a中,出问题);  typeof a.b== "undefined"(没问题)

  class2type = {};

     //类型判断,里面存的是{"[object String]":"string",....}。先去了解object.prototype.toString.call()

  core_version = "2.0.3";

  core_concat = [].concat;    //缓存数组方法以及对象方法。利于压缩。可以对core_concat压缩。

  ......

  var rootjQuery,

  _jQuery = window.jQuery,       //以防在引入jQuery库时,已经有其他库引用jQuery和$标示符了。

  _$ = window.$,         //因此先把他们保存起来。(prototype.js就引用了$标识)

  jQuery = function(selector, context){

    return new jQuery.fn.init(selector,context,rootjQuery);

  }

  ......

  window.jQuery = window.$ = jQuery;

})(window)

这里我要详细的讲下new jQuery.fn.init(selector,context,rootjQuery);我看了太多别人写的jQuery源码解析,大多写的不详细,导致刚开始看的时候,没看懂。

我们平常新建一个jQuery对象:$("div"),jQuery("div"),调用的就是new jQuery.fn.init(selector,context,rootjQuery);

很多人会有疑问,怎么new一个init,就是jQuery对象。除非init.prototype 就是jQuery.prototype。

大家可以在283行看到这样一句话:jQuery.fn.init.prototype = jQuery.fn;96行看到这样一句话:jQuery.fn = jQuery.prototype = {}

印证了上面的观点。jQuery.fn.init.prototype 就是jQuery.prototype。

当你们去看init方法的时候,会发现它返回的是this,this指的就是new出来的jQuery对象,而大家都知道,当访问一个实例对象的方法和属性时,如果实例对象没有,那么就去找原型对象,因此jQuery.prototype对象中的属性和方法,都可以通过new 出来的jQuery实例对象访问。也就是$("div")这种jQuery的实例对象可以调用各种在jQuery.prototype对象中的属性和方法。

而对于这种静态属性和方法,$.trim,jQuery.trim,是在构造函数的属性上定义的,跟实例对象没有什么关系。举个例子:function Person(){},Person.prototype={};

new Person()就是实例对象,它可以调用Person.prototype中的所有属性和方法。而Person.trim = function(){},就是静态方法,只能通过构造函数Person.trim才能进行调用。

有一个知识点,-webkit-margin-left   ->js访问时,会转化成webkitMarginLeft,而-ms-margin-left会转换成MsMarginLeft。

加油!

转载于:https://www.cnblogs.com/chaojidan/p/4127380.html

jquery源码解析:代码结构分析相关推荐

  1. jQuery源码解析(架构与依赖模块)

    jQuery设计理念 引用百科的介绍: jQuery是继prototype之后又一个优秀的Javascript框架.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1. ...

  2. jQuery源码解析(架构与依赖模块)第一章 理解架构

    1-1 jQuery设计理念 引用百科的介绍: jQuery是继prototype之后又一个优秀的Javascript框架.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, F ...

  3. JQuery 源码解析资料

    2019独角兽企业重金招聘Python工程师标准>>> jQuery源码分析系列目录 jQuery源码解读-理解架构 jQuery源码解析(架构与依赖模块) jQuery v1.10 ...

  4. jquery源码解析:jQuery数据缓存机制详解2

    上一课主要讲了jQuery中的缓存机制Data构造方法的源码解析,这一课主要讲jQuery是如何利用Data对象实现有关缓存机制的静态方法和实例方法的.我们接下来,来看这几个静态方法和实例方法的源码解 ...

  5. jQuery 源码解析一:jQuery 类库整体架构设计解析

    如果是做 web 的话,相信都要对 Dom 进行增删查改,那大家都或多或少接触到过 jQuery 类库,其最大特色就是强大的选择器,让开发者脱离原生 JS 一大堆 getElementById.get ...

  6. jQuery源码解析之on事件绑定

    本文采用的jQuery源码为jquery-3.2.1.js jquery的on方法用来在选定的元素上绑定一个或多个事件处理函数. 当参数selector存在时,通常会用来对已经存在的元素或将来即将添加 ...

  7. 浅谈jquery源码解析

    本文主要是针对jquery  v3.x版本来描述的,将从以下几个方面谈谈我对jquery的认识, 总体架构 $与$.fn jQuery.fn.init  (重要) jQuery.extend  与jQ ...

  8. jQuery源码解析之position()

    position() 作用: 返回被选元素相对于父元素(parent)的偏移坐标 使用: 直接调用$().position()即可,该方法没有 arguments(参数对象) <body> ...

  9. jQuery源码解析(5)—— Animation动画

    闲话 jQuery的动画机制有800行, 虽然不如样式的1300行,难度上却是不减.由于事前不了解animate接口的细节使用规则,看代码期间吃了很多苦头,尤其是深恶痛绝的defaultPrefilt ...

最新文章

  1. 打包图片上传cdn_紧抓5G新时代机遇 又拍云创新发展CDN行业
  2. 关于笔记本电脑玩一些游戏不能全屏的注册表修改法
  3. 一起来看流星雨剧情简介/剧情介绍/剧情分集介绍第三十五集
  4. 如何将OpenCV中的Mat类绑定为OpenGL中的纹理
  5. 程序员的节日怎么过?
  6. c++静态成员变量成员函数
  7. HTTP状态码415 springboot项目
  8. 【报告分享】华为2019年财报.pdf(附下载链接)
  9. windows下数据库mysql8.0安装
  10. 生信c语言面试题,c语言入门 java
  11. angularJS使用编写KindEditor,UEidtor,jQuery指令,双重绑定
  12. 【转】hadoop2.6 配置lzo压缩
  13. 我所认为的KVC和KVO
  14. html 实现页面加载进度,网页加载进度条实现方案
  15. Hibernate二级缓存
  16. css中自适应字体问题等
  17. 248 中心对称数 III
  18. 毕设过程中使用WPS的自定义生成目录中混入图片等非相关元素
  19. C# dynamic是什么
  20. 苹果照片未删却不见了_删掉的照片怎样找回?教你打开手机这个功能,可以立马恢复...

热门文章

  1. 云合影程序_活动回顾丨阿里云ACE同城会开发者云workshop圆满落幕
  2. 雷电模拟器多开ip修改器_模拟器怎样才能更换不同ip地址?
  3. Eugeny and Array(水题,注意题目描述即可)
  4. 【Luogu3383】【模板】线性筛素数
  5. 查询score中选学多门课程的同学中分数为非最高分成绩的记录。
  6. 再起航,我的学习笔记之JavaScript设计模式23(中介者模式)
  7. 以整体思维看问题:解决单页应用,系统角色请求覆盖身份唯一标识(本项目中是session_id命名的)发送请求问题...
  8. 爬取京东商品分类和链接
  9. centos7编译安装pure-ftpd-1.0.42
  10. Java Web学习(二)数据加密