jquery源码的基本介绍

;(function(global, factory) { // 传入window可以将其作为一个局部变量使用，缩短了作用域链，大大加快执行速度 factory(global); }(typeof window !== "undefined" ? window : this, function(window, noGlobal) { // jquery方法 var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context ); }; // jQuery.fn 是 jquery对象的原型对象 jQuery.fn = jQuery.prototype = {}; // 核心方法 // 回调系统 // 异步队列 // 数据缓存 // 队列操作 // 选择器引 // 属性操作 // 节点遍历 // 文档处理 // 样式操作 // 属性操作 // 事件体系 // AJAX交互 // 动画引擎 if ( typeof noGlobal === strundefined ) { window.jQuery = window.$ = jQuery; } return jQuery; }));

(function( global, factory ) { // 因为jquery既要再普通环境下运行，也要再例如AMD、commonJs下运行，所以我们需要做不同的适应 // node CommonJs规范 if ( typeof module === "object" && typeof module.exports === "object" ) { module.exports = global.document ? factory( global, true ) : function( w ) { if ( !w.document ) { throw new Error( "jQuery requires a window with a document" ); } return factory( w ); }; } else { // AMD factory( global ); } // 传入参数（window和一个执行函数） }(typeof window !== "undefined" ? window : this, function( window, noGlobal ) { // 【1】 // 创建jQuery对象, 实际上是jQuery.fn.init所返回的对象 var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context ); // 如果调用new jQuery, 生成的jQuery会被丢弃,最后返回jQuery.fn.init对象 // 因此可以直接调用jQuery(selector, context), 不需要使用new // 如果使用new jQuery()容易出现死循环 // 我们平常使用 $() ,就是直接调用jquery函数了 } // 【2】 // 创建jQuery对象原型，为jQuery添加各种方法 jQuery.fn = jQuery.prototype = { ... } // 【3】 // 在调用new jQuery.fn.init后, jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype // 相当于将所有jQuery.fn的方法都挂载到一开始jQuery函数返回的对象上 // 这里就是jquery的一个独特之处了，非常的巧妙 jQuery.fn.init.prototype = jQuery.fn; // 【4】 // 创建jQuery.extend方法 jQuery.extend = jQuery.fn.extend = function() {、 ... } // 【5】 // 使用jQuery.extend扩展静态方法 jQuery.extend({}); // 【6】 // 为window全局变量添加$对象,在给window全局添加变量的时候很有可可能会导致变量命名冲突哦，我们之后会学习到如何处理这种命名冲突的解决方法 if ( typeof noGlobal === strundefined ) { // var strundefined = typeof undefined window.jQuery = window.$ = jQuery; // $('') // 同 jQuery('') } return jQuery; }));

1. jQuery([selector,[context]]) 2. jQuery(element) 3. jQuery(elementArray) 4. jQuery(object) 5. jQuery(jQuery object) 6. jQuery(html,[ownerDocument]) 7. jQuery(html,[attributes]) 8. jQuery() 9. jQuery(callback) // 9种用法整体来说可以分三大块：选择器、dom的处理、dom加载。

 1 2 3 
 console.log($('.span')); // jQuery.fn.init(3) [span.span, span.span, span.span, prevObject: jQuery.fn.init(1), context: document, selector: ".span"] // 0:span.span // 1:span.span // 2:span.span // context: document // length: 3 // prevObject: jQuery.fn.init [document, context: document] // selector:".span" // __proto__:Object(0)

// 模拟一下 function Ajquery(selecter) { // 如果传入的不是一个对象，则将其转换为对象 if(!(selecter instanceof Ajquery)) { return new Ajquery(selecter); } var elem = document.getElementById(/[^#].*/.exec(selector)[0]); // 获取id this[0] = elem; this.length = 1; this.context = document; this.selector = selector; this.get = function(num) { return this[num]; } return this; } // 使用 $('#show2').append(Ajquery('#book').get(0)); // 因此 $('')获取到的就是一个类数组对象

function ajquery(name){ this.name = name; } ajquery.prototype = function(){ say: function(){ return this.name; } } var a = new ajquery(); a.say();

$().ready() $().noConflict()

var aQuery = function(selector, context) { return new aQuery(); // 直接new一下 } aQuery.prototype = { name:function(){}, age:function(){} } // 如果是上诉的样子，直接new aQuery()则会导致死循环。

// 下面就是jquery的写法了 jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); }, // 但是问题又来了，init中的this指向的是实例init的原型，就导师了jquery类的this分离了， // 解决这个问题的方法是： jQuery.fn.init.prototype = jQuery.fn;

// 精简分析 var ajquery = function(name) { return new ajquery.prototype.init(name); } ajquery.prototype = { init: function(name) { this.name = name; return this; }, get: function() { return this.name; }, name: 'zjj' } ajquery.prototype.init.prototype = ajquery.prototype;//这里使得init内部的this跟ajquery类的this保持了一致。 console.log(ajquery('zmf').get()); // zmf

// 一 $(function() { }) // 二 $(document).ready(function() { }) // 三 $(document).load(function() { })

// 我们先来看一个写DOM文档的加载过程吧 1. html 解析 2. 加载外部引用脚本和外部样式 3. 解析执行脚本 4. 构造DOM原型 // ready 5. 加载图片等文件 6. 页面加载完毕 // load

document.addEventListener("DOMContentLoaded", function () { console.log('DOMContentLoaded回调') }, false); // 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。 window.addEventListener("load", function () { console.log('load事件回调') }, false); console.log('脚本解析一') //测试加载 $(function () { console.log('脚本解析二') }) console.log('脚本解析三') // 观察脚本加载的顺序 // test.html:34 脚本解析一 // test.html:41 脚本解析三 // test.html:38 脚本解析二 // test.html:26 DOMContentLoaded回调 // test.html:30 load事件回调

// 源码分析 jQuery.ready.promise = function( obj ) { if ( !readyList ) { readyList = jQuery.Deferred(); if ( document.readyState === "complete" ) { // Handle it asynchronously to allow scripts the opportunity to delay ready setTimeout( jQuery.ready ); } else { document.addEventListener( "DOMContentLoaded", completed, false ); window.addEventListener( "load", completed, false ); } } return readyList.promise( obj ); };

document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法. function subSomething() { if(document.readyState == "complete"){ //当页面加载状态为完全结束时进入 //你要做的操作。 } } // 用这个可以做一下等待网站图片或者其他东西加载完以后的操作，比如加载时我们可以调用加载动画，当complete也就是加载完成时我们让加载动画隐藏，这样只是一个小例子。还是很完美的。

// Ensure firing before onload, maybe late but safe also for iframes document.attachEvent( "onreadystatechange", completed ); // A fallback to window.onload, that will always work window.attachEvent( "onload", completed ); // If IE and not a frame // continually check to see if the document is ready var top = false; try { // 非iframe中 top = window.frameElement == null && document.documentElement; } catch(e) {} if ( top && top.doScroll ) { (function doScrollCheck() { if ( !jQuery.isReady ) { try { // Use the trick by Diego Perini // http://javascript.nwbox.com/IEContentLoaded/ top.doScroll("left"); } catch(e) { // 每个50ms执行一次 return setTimeout( doScrollCheck, 50 ); } // 分离所有dom就绪事件 detach(); // and execute any waiting functions jQuery.ready(); } })(); }

// jquery导入 jQuery.noConflict(); // 使用 jQuery jQuery("aaron").show(); // 使用其他库的 $() // 别的库导入 $("aaron").style.display = ‘block’;

(function(window, undefined) { var // Map over jQuery in case of overwrite // 设置别名，通过两个私有变量映射了 window 环境下的 jQuery 和 $ 两个对象，以防止变量被强行覆盖 _jQuery = window.jQuery, _$ = window.$; jQuery.extend({ // noConflict() 方法让出变量 $ 的 jQuery 控制权，这样其他脚本就可以使用它了 // 通过全名替代简写的方式来使用 jQuery // deep -- 布尔值，指示是否允许彻底将 jQuery 变量还原(移交 $ 引用的同时是否移交 jQuery 对象本身) noConflict: function(deep) { // 判断全局 $ 变量是否等于 jQuery 变量 // 如果等于，则重新还原全局变量 $ 为 jQuery 运行之前的变量（存储在内部变量 _$ 中） if (window.$ === jQuery) { // 此时 jQuery 别名 $ 失效 window.$ = _$; } // 当开启深度冲突处理并且全局变量 jQuery 等于内部 jQuery，则把全局 jQuery 还原成之前的状况 if (deep && window.jQuery === jQuery) { // 如果 deep 为 true，此时 jQuery 失效 window.jQuery = _jQuery; } // 这里返回的是 jQuery 库内部的 jQuery 构造函数（new jQuery.fn.init()） // 像使用 $ 一样尽情使用它吧 return jQuery; } }) }(window)

//1.包含jQuery之外的库（比如Prototype） //2.包含jQuery库取得对$的使用权  

var jq=jQuery.noConflict();

jQuery.(document).ready(function($){ //这里可以正常使用$ })