jQuery1.6.2源码阅读笔记 【一】

本文深入分析了jQuery 1.6.2版本的源码,包括其核心结构、方法定义及实现原理,并特别关注了jQuery如何集成Sizzle.js实现CSS选择器的功能。

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

为了一些需求,在没怎么仔细看源码的状况下写了好多个控件,回头看看缺点一大堆,写得跟屎一样。决心好好读下源码。笔记是让自己坚持下去。以上。


首先来看头部注释吧


/*!
 * jQuery JavaScript Library v1.6.2
 * http://jquery.com/
 *
 * Copyright 2011, John Resig
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * Includes Sizzle.js
 * http://sizzlejs.com/
 * Copyright 2011, The Dojo Foundation
 * Released under the MIT, BSD, and GPL Licenses.
 *
 * Date: Thu Jun 30 14:16:56 2011 -0400
 */

说明了版本号:1.6.2,作者:John Resig ,许可证:MIT或者GPL第二版

包含了sizzle.js  是css选择器的库,jQuery引用了这个库的代码。


主要代码结构,执行一个匿名函数定义jQuery的各种属性和方法。

(function( window, undefined ){

// Use the correct document accordingly with window argument (sandbox)  使用正确的window参数对象的引用

var document = window.document,

navigator = window.navigator,

location = window.location;

//--  开始定义jQuery对象 --//

var jQuery = (function() {

// Give the init function the jQuery prototype for later instantiation  把初始化函数fn付给jQuery的prototype

jQuery.fn.init.prototype = jQuery.fn;


//定义extend和fn.extend共有的属性和方法

jQuery.extend = jQuery.fn.extend = function() {

..................主要是返回target对象

});


//定义extend的方法和属性

jQuery.extend({

............noConflict,isReady,ready,isFunction, isArray, isWindow,isNan,type,isPlainObject,等等

});


// Populate the class2type map 给class2type对象赋值

jQuery.each("Boolean Number String Function Array Date RegExp Object".split(" "), function(i, name) {

class2type[ "[object " + name + "]" ] = name.toLowerCase();

});


//浏览器判定方法的定义

.....略


//定义根jQuery,清楚document ready 的函数

.....略

return jQuery;

})();

//--  结束定义jQuery对象 --//


//support定义

jQuery.support = (function() {

....略

})();


// Keep track of boxModel  跟踪盒子模型

jQuery.boxModel = jQuery.support.boxModel;


// 定义jQuery.data的相关方法,即将数据保存在html元素上

.... 略


//deffered(延期,延后)方法定义  

....略


//队列标记延期方法定义

...略


//fn.extend中定义方法,类似与attr,addClass之类的

...略


//一堆hook方法,针对不同浏览器的

...略


//jQuery.event定义

....略


//--开始jQuery 的css选择器定义方法--//

/*!

 * Sizzle CSS Selector Engine

 *  Copyright 2011, The Dojo Foundation

 *  Released under the MIT, BSD, and GPL Licenses.

 *  More information: http://sizzlejs.com/

 */

....引入sizzle的css选择器代码

// EXPOSE 把sizzle的方法付给jQuery 

jQuery.find = Sizzle;

jQuery.expr = Sizzle.selectors;

jQuery.expr[":"] = jQuery.expr.filters;

jQuery.unique = Sizzle.uniqueSort;

jQuery.text = Sizzle.getText;

jQuery.isXMLDoc = Sizzle.isXML;

jQuery.contains = Sizzle.contains;


// --结束jQuery的css选择器方法定义//


//给fn.extend定义css选择器方法 find等

......略


//给fn.extend定义操作元素的方法,append等

....略


//给fn.extend定义css的方法,css等

....略


//定义表单提交序列化数据和ajax方法

...略


//定义show,hide,animate等简易动画方法

...略


// 定义offset,width,height等位置,长度高度,srcoll等方法

...略


// Expose jQuery to the global object  把jQuery和$变为全局变量

window.jQuery = window.$ = jQuery;

})(window);

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值