一、jquery源码1-60行
该部分代码主要完成jquery对象的创建,以及全局变量$与jQurey类的映射;
/* * jQuery - New Wave Javascript * * Copyright (c) 2006 John Resig (jquery.com) * Dual licensed under the MIT (MIT-LICENSE.txt) * and GPL (GPL-LICENSE.txt) licenses. * * $Date: 2006-10-27 23:14:48 -0400 (Fri, 27 Oct 2006) $ * $Rev: 509 $ */// Global undefined variablewindow.undefined = window.undefined;function jQuery(a,c) { // Shortcut for document ready (because $(document).each() is silly) if ( a && a.constructor == Function && jQuery.fn.ready ) return jQuery(document).ready(a); // Make sure that a selection was provided a = a || jQuery.context || document; // Watch for when a jQuery object is passed as the selector if ( a.jquery ) return $( jQuery.merge( a, [] ) ); // Watch for when a jQuery object is passed at the context if ( c && c.jquery ) return $( c ).find(a); // If the context is global, return a new object if ( window == this ) return new jQuery(a,c); // Handle HTML strings var m = /^[^<]*(<.+>)[^>]*$/.exec(a); if ( m ) a = jQuery.clean( [ m[1] ] ); // Watch for when an array is passed in this.get( a.constructor == Array || a.length && !a.nodeType && a[0] != undefined && a[0].nodeType ? // Assume that it is an array of DOM Elements jQuery.merge( a, [] ) : // Find the matching elements and save them for later jQuery.find( a, c ) ); // See if an extra function was provided var fn = arguments[ arguments.length - 1 ]; // If so, execute it in context if ( fn && fn.constructor == Function ) this.each(fn);}// Map over the $ in case of overwriteif ( $ ) jQuery._$ = $;// Map the jQuery namespace to the '$' onevar $ = jQuery;
二、关于window.undefined
window.undefined = window.undefined;
这样写无论window有没定义undefined,window.undefined都能正确表示它的意思,在有些早期浏览器中window并没有定义undefined变量,所以jquery1.0中这样写;
三、关于ready函数
if ( a && a.constructor == Function && jQuery.fn.ready ) return jQuery(document).ready(a);
ready方法为jquery对象的原型方法,在源文件1093行中利用jquery的extend方法扩展的;
jquery中ready函数有两种写法:
1、直接调用原型方法ready
$(document).ready(function(){ /* do something */ })
2、直接往jQuery方法传入function对象
$(function(){ /* do something */ })
三、a = a || jQuery.context || document;
确保选中一个对象,如果a和jQuery.context都没定义,则会返回一个封装了document的jquery对象,如下:
var $obj = $(); //$obj等同于$(document)
四、jquery对象作为参数传入
if ( a.jquery ) return $( jQuery.merge( a, [] ) );
注意每个jquery对象都有jquery属性,值为它的版本号,因此可用此属性判断对象是否是jquery对象;
如果是jquery对象,则返回一份它的拷贝,注意jquery对象里面的DOM对象指的还是同一个引用,其它属性有各自的空间,具体可看merge和get方法内部实现,后续会讨论到;
例:
var objTmp = $("23
"); var objTmp2 = $(objTmp); objTmp2.jquery = 'ss'; var test1 = objTmp.jquery; //test1="$Rev: 509 $" var test2 = objTmp2.jquery; //test2="ss" var objTmp = $("12323
sds"); var objTmp2 = $(objTmp); objTmp2.html("hello"); var test1 = objTmp.html(); //test1 = "hello" var test2 = objTmp2.html(); //test2 = "hello"
五、返回某jquery对象context下的jquery对象
if ( c && c.jquery ) return $( c ).find(a);
例:
var objTmp4 = $(".testDIv", $obj); //返回$obj节点下所有clss为testDIv的jquery对象
六、new jQuery
if ( window == this ) return new jQuery(a,c);
如果context是全局的,则new一个jquery对象并返回;
例如:$("#id");
该情况context是全局的,第一次运行到该语句,条件成立(window==this),因为js代码都是在window作用于下运行的,第二次运行到该语句的时候,jquery对象已经new出来了,此时this为new出来的对象,条件不成立(window!=this),跳过;
七、匹配处理html字符串
var m = /^[^<]*(<.+>)[^>]*$/.exec(a); if ( m ) a = jQuery.clean( [ m[1] ] );
注意第一句, 该正则表达式^[^<]*(<.+>)[^>]*$,
[^<] * //匹配n个非 <字符,(> <.+>) // 匹配 <除“\r\n”之外的任何单个字符> [^>]* //匹配n个非>字符, 除“\r\n”之外的任何单个字符> 字符,(>
第二句,当匹配成功时,调用clean函数处理,参数为尖括号里面的字符串,clean函数通过document.createElement("div")创建一个临时div对象,然后将参数赋给innerHTML,最后将临时div的childNodes压入数组返回给a;
八、为jquery对象里的Dom对象、length赋值
this.get( a.constructor == Array || a.length && !a.nodeType && a[0] != undefined && a[0].nodeType ? jQuery.merge( a, [] ) : jQuery.find( a, c ) );
往get函数传入数组或者类数组对象,get方法通过该数组参数生成Dom对象和length值,关于这部分的get源码如下
this.length = 0; [].push.apply( this, num ); return this;
简单的说,就是在jquery对象中push进数组中的dom对象,由于jquery对象通过apply调用数组中的push方法,length也自动++;
push完成后,该jquery对象就拥有了length和一系列dom元素(如果有的话);
通过调用merge和find函数,会返回数组;
九、最后一个参数是函数的情况
var fn = arguments[ arguments.length - 1 ]; if ( fn && fn.constructor == Function ) this.each(fn);
如果最后一个参数是函数,则遍历执行;
十、全局变量$
if ( $ ) jQuery._$ = $; var $ = jQuery;
如果已经定义$,则将$保存到 jQuery下,防止overwrite;
将jQuery namespace映射到$下,可少写5个字符;