Jquery源码探索

封装原理

这里参考的jquery来进行封装的一个常用方法的一个库，可作为自己的一个库

原理：创建一个构造函数，将所有方法放在该构造函数原型里，访问$()方法时，返回这个构造函数的实例化，这样就简单的实现了jquery的用法

function VQuery(vArg)
{
	//用来保存选中的元素
	this.elements=[];

	switch(typeof vArg)
	{
		case 'function':
			//window.onload=vArg;
			myAddEvent(window, 'load', vArg);
			break;
		case 'string':
			switch(vArg.charAt(0))
			{
				case '#':	//ID
					var obj=document.getElementById(vArg.substring(1));

					this.elements.push(obj);
					break;
				case '.':	//class
					this.elements=getByClass(document, vArg.substring(1));
					break;
				default:	//tagName
					this.elements=document.getElementsByTagName(vArg);
			}
			break;
		case 'object':
			this.elements.push(vArg);
	}
}

VQuery.prototype.click=function (fn)
{
	var i=0;

	for(i=0;i<this.elements.length;i++)
	{
		myAddEvent(this.elements[i], 'click', fn);
	}
};

VQuery.prototype.show=function ()
{
	var i=0;

	for(i=0;i<this.elements.length;i++)
	{
		this.elements[i].style.display='block';
	}
};

VQuery.prototype.hide=function ()
{
	var i=0;

	for(i=0;i<this.elements.length;i++)
	{
		this.elements[i].style.display='none';
	}
};

VQuery.prototype.hover=function (fnOver, fnOut)
{
	var i=0;

	for(i=0;i<this.elements.length;i++)
	{
		myAddEvent(this.elements[i], 'mouseover', fnOver);
		myAddEvent(this.elements[i], 'mouseout', fnOut);
	}
};

VQuery.prototype.css=function (attr, value)
{
	if(arguments.length==2)	//设置样式
	{
		var i=0;

		for(i=0;i<this.elements.length;i++)
		{
			this.elements[i].style[attr]=value;
		}
	}
	else	//获取样式
	{
		//return this.elements[0].style[attr];
		return getStyle(this.elements[0], attr);
	}
};

VQuery.prototype.attr=function (attr, value)
{
	if(arguments.length==2)
	{
		var i=0;

		for(i=0;i<this.elements.length;i++)
		{
			this.elements[i][attr]=value;
		}
	}
	else
	{
		return this.elements[0][attr];
	}
};

VQuery.prototype.toggle=function ()
{
	var i=0;
	var _arguments=arguments;

	for(i=0;i<this.elements.length;i++)
	{
		addToggle(this.elements[i]);
	}

	function addToggle(obj)
	{
		var count=0;
		myAddEvent(obj, 'click', function (){
			_arguments[count++%_arguments.length].call(obj);
		});
	}
};

VQuery.prototype.eq=function (n)
{
	return $(this.elements[n]);
};

function appendArr(arr1, arr2)
{
	var i=0;

	for(i=0;i<arr2.length;i++)
	{
		arr1.push(arr2[i]);
	}
}

VQuery.prototype.find=function (str)
{
	var i=0;
	var aResult=[];

	for(i=0;i<this.elements.length;i++)
	{
		switch(str.charAt(0))
		{
			case '.':	//class
				var aEle=getByClass(this.elements[i], str.substring(1));

				aResult=aResult.concat(aEle);
				break;
			default:	//标签
				var aEle=this.elements[i].getElementsByTagName(str);

				//aResult=aResult.concat(aEle);
				appendArr(aResult, aEle);
		}
	}

	var newVquery=$();

	newVquery.elements=aResult;

	return newVquery;
};

function getIndex(obj)
{
	var aBrother=obj.parentNode.children;
	var i=0;

	for(i=0;i<aBrother.length;i++)
	{
		if(aBrother[i]==obj)
		{
			return i;
		}
	}
}

VQuery.prototype.index=function ()
{
	return getIndex(this.elements[0]);
};

function $(vArg)
{
	return new VQuery(vArg);
}

function myAddEvent(obj, sEv, fn)
{
	if(obj.attachEvent)
	{
		obj.attachEvent('on'+sEv, function (){
			fn.call(obj);
		});
	}
	else
	{
		obj.addEventListener(sEv, fn, false);
	}
}

function getByClass(oParent, sClass)
{
	var aEle=oParent.getElementsByTagName('*');
	var aResult=[];
	var i=0;

	for(i=0;i<aEle.length;i++)
	{
		if(aEle[i].className==sClass)
		{
			aResult.push(aEle[i]);
		}
	}

	return aResult;
}

function getStyle(obj, attr)
{
	if(obj.currentStyle)
	{
		return obj.currentStyle[attr];
	}
	else
	{
		return getComputedStyle(obj, false)[attr];
	}
}