前端学习-jQuery源码学习

jQuery 2 的版本与jQuery 1的版本相比,没有再考虑IE6,7,8的兼容问题,因此使用时如果不用考虑IE6,7,8就用jQuery 2的版本,如果需要考虑IE6,7,8就使用jQuery 1的版本。

jQuery对象是一个以DOM为对象的特殊数组,并包含大量方法,简单可以理解为:

function jQuery(){

    var jquery = [dom1, dom2, dom3];

    jquery.fn1 = function(){…};

    jquery.fn2 = function(){…};

    return jquery;

}

 

 

jQuery源码中的精髓:初始化的设计思路,选择器的设计方法,事件处理的设计方法,动画效果的设计机制,ajax封装的设计思路,插件机制的设计,兼容性处理的设计方法等。

jQuery-2.0.3.js源码一共8829行,下面划分几个部分对每部分的功能作个简单概括。

(14) 第14行到8829行,(function(window,undefined){})(); 定义自执行匿名函数,所有源码都包括在匿名函数中。

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

(96, 283)  jQuery.fn = jQuery.prototype = {…}; jQuery.fn.init.prototype = jQuery.fn; 这里看到prototype,就是jQuery对象的原型,主要给JQ对象,添加一些方法和属性

(285, 347) extend: JQ的继承方法, 为添加后续代码提供良好的扩展性,同时扩展插件也是从该继承该应地中扩展。   jQuery.extent = jQuery.fn.extent = function(){…};

(349, 817)  jQuery.extend({…});  扩展一些工具方法(静态方法),如$.trim(), $.proxy()等。

(877, 2856) Sizzle: 复杂选择器的实现

(2880, 3042) Callbacks: 回调对象: 对函数的统一管理, add, remove, has, empty, disable, fireWith, fire 等。

(3043, 3183) Deferred: 延迟对象: 对异步的统一管理(定时器,ajax,script,DOM等一些需要异步处理作一下统一管理)

(3184, 3295) support: 浏览器的功能检测

(3308, 3652) data(): 数据缓存,避免大数据量的元素挂载,预防内存泄露。

(3653, 3797) queue(): 队列管理,入队,出队,执行顺序的管理

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

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

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

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

(6621, 7854) 序列化操作,数据提交和ajax方法:ajax() load() getJSON() 等

(7855, 8584) animate(): 运动(动画)的实现方法

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

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

(8826) window.jQuery = window.$ = jQuery; jQuery的符号简写为$,把jQuery挂载到window下,这样我们使用时就可以直接用jQuery(),或$()来调用jQuery,否则jQuery在局部内,调用不到。

时间: 2025-01-11 03:26:06

前端学习-jQuery源码学习的相关文章

jquery源码学习

jQuery 源码学习是对js的能力提升很有帮助的一个方法,废话不说,我们来开始学习啦 我们学习的源码是jquery-2.0.3已经不支持IE6,7,8了,因为可以少学很多hack和兼容的方法. jquery-2.0.3的代码结构如下 首先最外层为一个闭包, 代码执行的最后一句为window.$ = window.jquery = jquery 让闭包中的变量暴露倒全局中. 传参传入window是为了便于压缩 传入undefined是为了undifined被修改,他是window的属性,可以被修

菜鸟的jQuery源码学习笔记(二)

jQuery对象是使用构造函数和原型模式相结合的方式创建的.现在来看看jQuery的原型对象jQuery.prototype: 1 jQuery.fn = jQuery.prototype = { 2 //成员变量和方法 3 } 这里给原型对象起了一个别名叫做jQuery.fn.要注意的是这个jQuery.fn可不是jQuery对象的属性,而是jQuery构造方法本身的属性,它是不会传给它所创建的对象的.如果你在控制台敲$().fn的话输出的结果会是undefined.接下来看看原型对象里面有些

jquery源码学习(一)core部分

这一部分是jquery的核心 jquery的构造器 jquery的核心工具函数 构造器 jQuery = function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' // Need init if jQuery is called (just allow error to be thrown if not included) return new jQu

jquery源码学习(二)sizzle部分 【转】

一,sizzle的基本原理 sizzle是jquery选择器引擎模块的名称,早在1.3版本就独立出来,并且被许多其他的js库当做默认的选择器引擎.首先,sizzle最大的特点就是快.那么为什么sizzle当时其他引擎都快了,因为当时其他的引擎都是按照从左到右逐个匹配的方式来进行查找的,而sizzle刚好相反是从右到左找的. 举个简单的例子 “.a .b .c”来说明为什么sizzle比较快.这个例子如果按照从左到右的顺序查找,很明显需要三次遍历过程才能结束,即先在document中查找.a,然后

jquery源码学习-构造函数(2)

最近几天一直在研究jquery源码,由于水平太低看得昏头转向.本来理解的也不是很深刻,下面就用自己的想法来说下jquery是如何定义构造函数初始化的.如果有什么不对的地方,希望个位高手指出.  一般写构造函数如下 function Aaa(){} Aaa.prototype.init = function(){}; Aaa.prototype.css = function(){}; var a1 = new Aaa(); a1.init(); //初始化 a1.css(); jQuery写法如下

jquery源码学习-初始(1)

最近几天一直在研究jquery源码,由于水平太低看得昏头转向.本来理解的也不是很深刻,下面就用自己的想法来说下jquery是如何定义构造函数初始化的.如果有什么不对的地方,希望个位高手指出. 首先要了解下什么时候自执行匿名函数 ,它的用途就是 相当于创建一个命名空间,只要把自己所有的代码写在这个特殊的函数包装内,外部不能访问,除非你允许. 基本格式 (function(){ //代码 })(); (function(){ var a = 10; function $(){ alert(a); }

jQuery源码学习笔记:总体架构

1.1.自调用匿名函数: (function( window, undefined ) { // jquery code })(window); 这是一个自调用匿名函数,第一个括号内是一个匿名函数,第二个括号立即执行,传参是window. 1.为什么有自调用匿名函数? 通过定义匿名函数,创建了一个"私有"空间,jQuery必须保证创建的变量不能和导入它的程序发生冲突. 2.为什么传入window? 传入window使得window由全局变量变成局部变量,jQuery访问window时,

jQuery源码学习:常用正则表达式

常用的数字正则(严格匹配) 正则 含义 ^[1-9]\d*$ 匹配正整数 ^-[1-9]\d*$ 匹配负整数 ^-?[1-9]\d*$ 匹配整数 /^(([1-9]\d*)|(0+))$/; 匹配非负整数(正整数 + 0) ^-[1-9]\d*|0$ 匹配非正整数(负整数 + 0) /^(([1-9]\d*)|0)\.\d+$/ 匹配正浮点数 ^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ 匹配负浮点数 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\

jQuery源码学习笔记:构造jQuery对象

3.1源码结构: (function( window, undefined ) { var jQuery = (function() { // 构建jQuery对象 var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); } // jQuery对象原型 jQuery.fn = jQuery.prototype = { constructor: