jQuery实例方法及属性相关的代码结构如下

    jQuery.fn=jQuery.prototype={
jQuery:core_version,
constructor:jQuery,
selector:'',
length:,
init:function(selector,context,rootjQuery){},
toArray:function(){},
get:function(num){},
pushStack:function(elems){},
each:function(callback,args){},
ready:function(fn){},
slice:function(){},
first:function(){},
last:function(){},
eq:function(){},
map:function(){},
end:function(){},
push:core_push,
sort:[].sort,
splice:[].splice,
};

下面将逐一对上述方法进行讲解;

一、相关属性 jQuery,selector,length,还有一个prevObject属性在pushStack中指定,context属性在init中指定

        jQuery:core_version,//其实就是版本字符串2.0.3
constructor:jQuery,//还原constructor指向
selector:'',//含有连续的整型属性、length属性、context属性,selector属性(在jQuery.fn.init中设置),preObject属性(在pushStack中设置)
length:,

二、构造函数jQuery.fn.init,详见jQuery源代码解析1

三、其他方法的介绍详见下面代码的注释

        //将jQuery类数组对象转换为数组
toArray:function(){
return core_slice.call(this);
},
//如果传递了参数num,代表获取下标num的DOM元素(num可以为负数)
//如果没有传递num,则将jQuery对象转换为数组后整体返回
get:function(num){
if(num==null){//注意这里不能用!num,因为num可以为0
return this.toArray();
}
return num<?this[num+this.length]:this[num];
},
//入栈
pushStack:function(elems){ var ret=jQuery.merge(this.constructor(),elems); ret.prevObject=this;
ret.context=this.context;
return ret;
},
//遍历jQuery对象
each:function(callback,args){
//在静态方法已经指定了callback的执行上下文
return jQuery.each(this,callback,args);
},
//加载完成事件方法,这里暂不考虑
ready:function(fn){},
slice:function(){
//注意apply和call的区别
return this.pushStack(core_slice.apply(this,arguments));
},
first:function(){
return this.get();
},
last:function(){
return this.get(-);
},
eq:function(i){
var length=this.length,
j=+i+(i<?length:);
return this.pushStack(j>=&&j<length?[this[j]]:[]);
},
map:function(callback){
//这种写法不能指定callback的执行环境,因为在静态方法jQuery.map并没有指定callback的执行上下文
// return this.pushStack(jQuery.map(this,callback));
return this.pushStack(jQuery.map(this,function(elem,i){
return callback.call(elem,i,elem);
}));
},
//与pushStack方法相对应,返回栈的上一级
end:function(){
return this.prevObject||this.constructor();
},
push:core_push,
sort:[].sort,
splice:[].splice,

截止目前版本的myjQuery.js

(function(window,undefined){
var rootjQuery,
core_version='2.0.3',
idExpr=/^#([\w\-]*)$/,
//下面两个正则用于转驼峰
rmsPrefix = /^-ms-/,
rdashAlpha = /-([\da-z])/gi,
class2type={},
core_deletedIds=[],
core_version='2.0.3', _jQuery=window.jQuery,
_$=window.$, core_toString=class2type.toString,
core_hasOwn=class2type.hasOwnProperty,
core_trim=core_version.trim,
core_indexOf=core_deletedIds.indexOf,
core_push=core_deletedIds.push,
core_concat=core_deletedIds.concat,
core_slice=core_deletedIds.slice, //用于jQuery.camelCase转驼峰函数中
//当replace函数只有一个匹配项时,第二个参数可以是一个函数
//如果repalce中的正则没有捕获组,会向这个函数传递三个参数:模式的匹配项,模式匹配项在字符串中的位置,原始字符串
//如果replace中的正则有捕获组,也会向这个函数传递三个参数,模式的匹配项,捕获组的匹配项,模式匹配项在字符串中的位置
fcamelCase=function(all,letter){
return letter.toUpperCase();
},
jQuery=function(selector,context){
return new jQuery.fn.init(selector,context,rootjQuery);
}; //jQuery相关实例方法和属性
jQuery.fn=jQuery.prototype={
jQuery:core_version,//其实就是版本字符串2.0.3
constructor:jQuery,//还原constructor指向
selector:'',//含有连续的整型属性、length属性、context属性,selector属性(在jQuery.fn.init中设置),preObject属性(在pushStack中设置)
length:,
init:function(selector,context,rootjQuery){
var match,elem;
//selector是选择器表达式
if(!selector){
return this;
} if(typeof selector ==='string'){
match=idExpr.exec(selector);
if(match&&!context){
elem=document.getElementById(match[]);
if(elem&&elem.parentNode){
this[]=elem;
this.length=;
}
this.selector=selector;
this.context=document;
return this;
}else{
//说明是复杂的选择器表达式,这里暂不考虑
}
}
//处理selector是DOM元素的情形
if(selector&&selector.nodeType){
this[]=selector;
this.length=;
this.context=selector;
return this;
}
//处理selector是函数的情形
if(jQuery.isFunction(selector)){
return rootjQuery.ready( selector );
}
//处理selector是jQuery对象的情形
if(selector.selector){
this.selector=selector.selector;
this.context=selector.context;
}
//处理其他情形
return jQuery.makeArray(selector,this); },
//将jQuery类数组对象转换为数组
toArray:function(){
return core_slice.call(this);
},
//如果传递了参数num,代表获取下标num的DOM元素(num可以为负数)
//如果没有传递num,则将jQuery对象转换为数组后整体返回
get:function(num){
if(num==null){//注意这里不能用!num,因为num可以为0
return this.toArray();
}
return num<?this[num+this.length]:this[num];
},
//入栈
pushStack:function(elems){ var ret=jQuery.merge(this.constructor(),elems); ret.prevObject=this;
ret.context=this.context;
return ret;
},
//遍历jQuery对象
each:function(callback,args){
//在静态方法已经指定了callback的执行上下文
return jQuery.each(this,callback,args);
},
//加载完成事件方法,这里暂不考虑
ready:function(fn){},
slice:function(){
//注意apply和call的区别
return this.pushStack(core_slice.apply(this,arguments));
},
first:function(){
return this.get();
},
last:function(){
return this.get(-);
},
eq:function(i){
var length=this.length,
j=+i+(i<?length:);
return this.pushStack(j>=&&j<length?[this[j]]:[]);
},
map:function(callback){
//这种写法不能指定callback的执行环境,因为在静态方法jQuery.map并没有指定callback的执行上下文
// return this.pushStack(jQuery.map(this,callback));
return this.pushStack(jQuery.map(this,function(elem,i){
return callback.call(elem,i,elem);
}));
},
//与pushStack方法相对应,返回栈的上一级
end:function(){
return this.prevObject||this.constructor();
},
push:core_push,
sort:[].sort,
splice:[].splice,
};
jQuery.fn.init.prototype=jQuery.fn; //可接受的参数类型如下:jQuery.extend([deep],target,object1,[objectN])
jQuery.extend=jQuery.fn.extend=function(){
var target=arguments[]||{},//指向目标对象
deep=false,//是否进行深度复制
i=,//表示源对象的起始下标
length=arguments.length,//表示参数个数;
options,name,src,copy,copyIsArray;//options指向某个源对象,name指向源对象的某个属性名,src目标对象某个属性的原始值,copy某个源对象的某个属性的值,copyIsArray指示变量copy是否为数组
//首先进行参数修正
if(typeof target==='boolean'){
deep=target;
target=arguments[]||{};
i=;
}
//此时target就是jQuery或jQuery.fn
if(i===length){
target=this;
i--;
}
//处理target是字符串或者其他情形,这在深度复制中可能出现
// if(typeof target!=='object'||!jQuery.isFunction(target)){
// target={};
// }
for(i;i<length;i++){
options=arguments[i];
for(name in options){
src=target[name];
copy=options[name];
if(deep&&copy&&(jQuery.isPlainObject(object)||(copyIsArray=jQuery.isArray(object)))){
if(copyIsArray){
copyIsArray=false;
clone=src&&jQuery.isArray(src)?src:[];
}else{
clone=src&&jQuery.isPlainObject(src)?src:{};
}
target[name]=jQuery.extend(deep,clone,copy);
}else{
target[name]=copy;
}
}
}
return target;
};
//检查是否是数组或者类数组
function isArrayLike(obj){
var length=obj.length,
type=jQuery.type(obj);
if(obj&&jQuery.isWindow(obj)){
return false;
}
if(obj.nodeType===&&length){
return true;
} if(type==='array'){
return true;
}
if(typeof length==='number'&&(length==||(length>&&(length-) in obj))){
return true;
}
return false;
}
jQuery.extend({
//一堆静态方法和属性
expando:'jQuery'+(core_version+Math.random()).replace(/\D/g,''),
// 该函数用于释放jQuery对于全局变量$的控制权,可选的参数deep代表是否释放对全局变量jQuery的控制权
noConflict:function(deep){
if(window.$===jQuery){
window.$=_$;
}
if(deep&&window.jQuery===jQuery){
window.jQuery=_jQuery;
}
return jQuery;
},
/********isReady,readyWait,holdReay,ready与加载事件有关,暂且略过***********/
isReady:false,
readyWait:,
holdReady:function(hold){},
ready:function(){},
/*******/ /****下面是一系列类型检测的静态方法*******/
isFunction:function(obj){
//如果使用typeof,在有些浏览器中,正则也会返回function,因此这里采用jQuery处理后的方法,jQuery.type
return jQuery.type(obj)==='function';
},
isArray:Array.isArray,
isWindow:function(obj){
return obj!==null&&obj===obj.window;
},
//判断obj是否为数字或者数字类型的字符串,并且是有效数字
isNumeric:function(obj){
return !isNaN(parseFloat(obj))&&isFinite(obj);
},
type:function(obj){
if(obj===null){
return String(null);
}
//Date,Array等类型typeof都会返回object,function、正则(部分浏览器)中 typeof都会返回function if(typeof obj==='object'||typeof obj==='function'){
return class2type[core_toString.call(obj)];
}
return typeof obj;
},
//判断是否为以下两种情况:1,对象字面量;2,通过new Object()创建
isPlainObject:function(obj){
if(jQuery.type(obj)!=='object'||obj.nodeType||jQuery.isWindow(obj)){
return false;
} //如果是纯粹的对象,那么obj一定有constructor属性,并且方法hasOwnPropertyOf一定就在构造函数本身的原型中,而不用通过原型链查找得到
if(obj.constructor&&!core_hasOwn.call(obj.constructor.prototype,'isPrototypeOf')){
return false;
}
return true; },
//检查是否是空对象
isEmptyObject:function(obj){
for(var name in obj){
return false;
}
return true;
},
/******类型检测静态方法结束********/ error:function(msg){
throw new Error(msg);
},
//将html字符串转换为html DOM结构,
parseHTML: function( data, context, keepScripts ){ },
parseJSON:JSON.parse,
parseXML:function(data){
var xml, tmp;
if ( !data || typeof data !== "string" ) {
return null;
} // Support: IE9
try {
tmp = new DOMParser();
xml = tmp.parseFromString( data , "text/xml" );
} catch ( e ) {
xml = undefined;
} if ( !xml || xml.getElementsByTagName( "parsererror" ).length ) {
jQuery.error( "Invalid XML: " + data );
}
return xml;
},
noop:function(){},
//用于在全局作用域执行javascript代码,这里暂略
globalEval:function(data){},
//转换连字符字符串为驼峰类型
camelCase:function(string){
return string.replace(rmsPrefix,'ms-').replace(rdashAlpha,fcamelCase);
},
//判断elem的nodeName是否=name
nodeName:function(elem,name){
return elem.nodeName&&elem.nodeName.toLowerCase()==name.toLowerCase();
},
//jQuery遍历方法,其中args是传递给回调callback的参数,仅供jQuery内部使用;外部调用该方法时,回调的参数默认为数组下标/对象key,对应数组值/对象value
each:function(object,callback,args){
var i,
value,
length=object.length,
isArray=isArrayLike(object); if(args){//说明是内部调用
if(isArray){
for(i=;i<length;i++){
value= callback.call(object[i],args);
if(value===false){
break;
}
}
}else{
for(i in object){
value=callback.call(object[i],args);
if(value===false){
break;
}
}
}
}else{
if(isArray){
for(i=;i<length;i++){
value=callback.call(object[i],i,object[i]);
if(value===false){
break;
}
}
}else{
for(i in object){
value=callback.call(object[i],i,object[i]);
if(value===false){
break;
}
}
}
}
return object;
},
trim:function(str){
return str==null?'':core_trim.call(str);
},
//将一个类数组对象转换为真正的对象
//results参数仅供jquery内部使用,此时在该参数的基础上添加元素
makeArray:function(array,results){
var ret=results||[],
type=jQuery.type(array);
//undefined,null都会==null
if(array!=null){
//1,没有length属性,或者具有length属性,但是是以下几种情况的
//2.如果array是string 的length表示字符串的长度
//3.如果array是函数,其length代表函数生命时的参数个数
//4,如果array是window对象,属性Length返回窗口中的框架(frame,iframe)个数
if(array.length==null|| type=='string' || type=='function' ||type=='regexp'||jQuery.isWindow(array)){
core_push.call(ret,array);
}else{//否则说明是类数组对象
jQuery.merge(ret,array);
}
}
return ret;
}, inArray:function(elem,array,i){
return array==null?-:core_indexOf.call(array,elem,i);
},
//用于合并两个数组的元素到第一个数组中
//事实上,jquery源代码中第一个参数可以是数组或者类数组对象,第二个参数可以是数组、类数组对象或任何含有连续整型属性的对象
//第一个参数是数组,最后返回数组;第一个参数是类数组,则返回类数组
merge:function(first,second){
var l=second.length,
i=first.length,
j;
if(typeof l=='number'){
for(j=;j<l;j++){
first[i++]=second[j];
}
}else{
while(second[j]!=undefined){
first[i++]=second[j++];
}
} first.length=i;
return first;
},
//用于查找数组中满足过滤函数的元素,形成新的数组之后返回,原数组不受影响
//如果inv未传入或者是false,元素只有在过滤函数返回true时,才会被保存在最终的结果数组中
//如果参数inv是true,则恰好相反
grep:function(elems,callback,inv){
var i,
ret=[],
length=elems.length,
retVal;
inv=!!inv;
for(i=;i<length;i++){
retVal=!!callback.call(elems[i],i);
if(retVal!==inv){
ret.push(elems[i]);
}
}
return ret;
},
//用于对数组中每个元素执行callback操作,并将结果形成新的数组返回
//参数arg仅仅是jQuery内部使用
map:function(elems,callback,arg){
var ret=[],
retVal,
i,
length=elems.length,
isArray=isArrayLike(elems);
if(isArray){
for(i=;i<length;i++){
retVal=callback(elems[i],i,arg);//注意不是callback.call
if(retVal!=null){
ret.push(retVal);
}
}
}else{
for(i in elems){
retVal=callback(elems[i],i,arg);
if(retVal!=null){
ret.push(retVal);
}
}
}
//保证最终返回的是一维数组
return core_concat.call([],ret);
},
guid:,
//该方法用于更改函数的执行上下文
//源代码中有两种传参形式,这里仅考虑最常见的一种
proxy:function(fn,context){
if(!jQuery.isFunction(fn)){
return undefined;
}
var args=core_slice.call(arguments,);
proxy=function(){
return fn.call(context||this,core_concat.call(args,core_slice.call(arguments)));
};
proxy.guid=fn.guid=fn.guid||jQuery.guid++;
return proxy;
},
//用一个方法同时实现get和set操作
//如何设置或者获取由回调函数fn确定
//这个方法的实现等用到的时候结合来看
access: function( elems, fn, key, value, chainable, emptyGet, raw ){ },
now:Date.now,
//该方法用于交换css样式,在support模块较多用到
//要交换的样式由参数options传递
swap: function( elem, options, callback, args ){
var name,ret,
old={};
for(name in options){
old[name]=elem.style[name];
elem.style[name]=options[name];
}
ret=callback.call(elem,args||[]);
for(name in options){
elem.style[name]=old[name];
}
return ret;
}, }); //目前,js中typeof的返回值有六种:"number," "string," "boolean," "object," "function," 和 "undefined."
//通过object.prototype.toString/或者{}.toString 返回值有九种:Boolean Number String Function Array Date RegExp Object Error,其中的Array,Date,RegExp,Object,Error都属于Object类型,在有些浏览器中typeof 正则会返回function
jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "),function(i,name){
class2type["[object "+name+"]"]=name.toLowerCase();
});
//console.log(class2type,class2type);
rootjQuery=jQuery(document);
window.jQuery=window.$=jQuery;
})(window);

myjQuery.js1013

最新文章

  1. 使用Eclipse创建Maven Web工程
  2. JS监听键盘的组合按键
  3. Java for LeetCode 217 Contains Duplicate
  4. 各个平台的mysql重启命令
  5. 区间dp总结
  6. Sql Server服务远程过程调用失败解决
  7. 安装LAMP
  8. NTFS reparse point
  9. aggregation 详解3(bucket aggregation)
  10. poj 1170 Shopping Offers
  11. 关于表格动态添加行并处理相关表单元素的一些修改----优化for重用(2)
  12. linux select 网络模型
  13. &lt;c&gt;----&lt;choose&gt;&lt;when&gt;&lt;otherwise&gt;
  14. SpringBoot之profile详解
  15. luogu P3767 膜法
  16. hdu2594 Simpsons&#39; Hidden Talents【next数组应用】
  17. CyclicBarrier簡介
  18. Spring MVC 中急速集成 Shiro 实践
  19. IOS-异常处理
  20. MVC演化 (转至http://www.cnblogs.com/wubaiqing/archive/2011/10/26/2225438.html)

热门文章

  1. BZOJ1082: [SCOI2005]栅栏 题解
  2. 转:Web页面通过URL地址传递参数常见问题及检测方法
  3. 硬盘分区工具gparted使用
  4. IOS 蓝牙相关-app作为外设被连接的实现(3)
  5. Linux 下找出超過某些容量的檔案
  6. Crossing River
  7. hdu Is It A Tree?
  8. CMD和DOS的区别
  9. Maven3下的java web项目
  10. redis 安装(centos 6.4)