仿写一个简单的jQuery（学习笔记）

jQuery学习笔记：

function myAddEvent(obj, sEv, fn)
{
	if(obj.attachEvent)
	{
		obj.attachEvent('on'+sEv, function (){
			if(false==fn.call(obj))
			{
				event.cancelBubble=true;
				return false;
			}
		});
	}
	else
	{
		obj.addEventListener(sEv, function (ev){
			if(false==fn.call(obj))
			{
				ev.cancelBubble=true;
				ev.preventDefault();
			}
		}, 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];
	}
}

function VQuery(vArg)
{
	//用来保存选中的元素
	this.elements=[];
	
	switch(typeof vArg)
	{
		case 'function':
			//window.οnlοad=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);
	}
}

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

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

getElementById()：Document对象，语法：document.getElementById("demo");返回值是元素对象。

getElementsByClassName()：元素对象，语法：element.getElementsByClassName(classname)，返回值是
NodeList 对象，表示指定类名的元素集合。是类数组，不能使用数组方法。

var list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";

getElementsByTagName()：元素对象，element.getElementsByTagName(tagname)；返回值是NodeList 对象，表示指定类名的元素集合。是类数组，不能使用数组方法。

var list=document.getElementsByTagName("UL")[0];
list.getElementsByTagName("LI")[0].innerHTML="Milk";

VQuery是一个构造函数，new出的对象有elements属性，用来存放所选择的元素，这是核心。VQuery.prototype原型对象下存在很多函数，例如click，new出来的VQuery对象可以使用这些函数，来操作每个对象下elements存储的DOM元素，例如：

new VQuery('#demo').click(function(){alert(1)});

但是这样写有点麻烦，每次都要写new，于是

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

$('#demo').click(function(){alert(1)});

这样写比较简便，选中ID为#demo的元素，存放在elements中，click等函数可以对this.elements[i],即DOM元素进行操作，this指new出来的VQuery对象。

myAddEvent()中两种情况取消冒泡都是用了cancelBubble，这是因为cancelBubble在新版本chrome,opera浏览器中已经支持。但是cancelBubble不是W3C标准，stopPropagation()才是。

在IE下window.event.returnValue=false;和return false;都可以阻止默认事件。

if(false==fn.call(obj))
{
        event.cancelBubble=true;
	return false;
}

这种写法的目的：当添加事件执行的函数返回false，就同时取消冒泡和默认事件。

click():VQuery对象中elements可能会存放多个DOM元素，所以要进行for循环操作，给每一个DOM元素添加事件，函数返回this，this就是VQuery对象，目的是为了进行链式操作。

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

show(),hide(),hover()函数原理上和click函数相同：进行for循环操作，返回this。

VQuery.prototype.show=function ()
{
	var i=0;
	
	for(i=0;i<this.elements.length;i++)
	{
		this.elements[i].style.display='block';
	}
	
	return this;
};

VQuery.prototype.hide=function ()
{
	var i=0;
	
	for(i=0;i<this.elements.length;i++)
	{
		this.elements[i].style.display='none';
	}
	
	return this;
};

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);
	}
	
	return this;
};

css():首先判断参数的个数：

两个，则进行css设置，

一个，并且是字符串，则进行css读取，

一个，并且是object，即json格式，则进行css设置
读取时，是读取第一个DOM的css格式，即elements[0],不用进行for循环，

设置时，每个DOM元素都要设置相同的样式，多以要进行for循环。

最后返回this，目的是进行链式操作。

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	//获取样式
	{
		if(typeof attr=='string')
		{
		//return this.elements[0].style[attr];
			return getStyle(this.elements[0], attr);
		}
		else
		{
			for(i=0;i<this.elements.length;i++)
			{
				var k='';
				
				for(k in attr)
				{
					this.elements[i].style[k]=attr[k];
				}
			}
		}
	}
	
	return this;
};

attr():如果是两个参数，则对每个DOM元素进行设置，需要for循环操作，如果只有一个参数，则只读取第一个DOM元素的属性值，最后返回this。

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];
	}
	
	return this;
};

toggle():将fn1,fn2,fn3...作为参数传递给toggle函数，给每个元素添加click事件，每次点击执行不同的时间，第一次点击执行fn1，第二次点击执行fn2,循环执行。这是因为addToggle()函数中的myAddEvent()引用了count变量，形成闭包

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);
		});
	}
	
	return this;
};

eq():返回一个VQuery对象，该对象中的elements存放下标对应的DOM元素

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

find():把所有复合要求的元素存放在aResult数组中，新建一个VQuery对象，把 aResult赋值给VQuery对象的elements属性，返回VQuery对象。

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;
};

index():所选元素中的第一个元素，在兄弟元素中的位置。

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]);
};

bind():循环执行myAddEvent()，给每个元素添加事件

VQuery.prototype.bind=function (sEv, fn)
{
	var i=0;
	
	for(i=0;i<this.elements.length;i++)
	{
		myAddEvent(this.elements[i], sEv, fn);
	}
};

extend():

VQuery.prototype.extend=function (name, fn)
{
	VQuery.prototype[name]=fn;
};

animate():

$().extend('animate', function (json){
	var i=0;
	
	for(i=0;i<this.elements.length;i++)
	{
		startMove(this.elements[i], json);
	}
	
	function getStyle(obj, attr)
	{
		if(obj.currentStyle)
		{
			return obj.currentStyle[attr];
		}
		else
		{
			return getComputedStyle(obj, false)[attr];
		}
	}
	
	function startMove(obj, json, fn)
	{
		clearInterval(obj.timer);
		obj.timer=setInterval(function (){
			var bStop=true;		//这一次运动就结束了——所有的值都到达了
			for(var attr in json)
			{
				//1.取当前的值
				var iCur=0;
				
				if(attr=='opacity')
				{
					iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
				}
				else
				{
					iCur=parseInt(getStyle(obj, attr));
				}
				
				//2.算速度
				var iSpeed=(json[attr]-iCur)/8;
				iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
				
				//3.检测停止
				if(iCur!=json[attr])
				{
					bStop=false;
				}
				
				if(attr=='opacity')
				{
					obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
					obj.style.opacity=(iCur+iSpeed)/100;
				}
				else
				{
					obj.style[attr]=iCur+iSpeed+'px';
				}
			}
			
			if(bStop)
			{
				clearInterval(obj.timer);
				
				if(fn)
				{
					fn();
				}
			}
		}, 30)
	}
});

Drag():先计算出事件在元素中的位置(disX,disY),拖动后，用鼠标在屏幕中的位置(clientX,clientY)减去 (disX,disY)。onmouseup时，将document.οnmοusemοve=null;document.onmouseup=null;这是防止松开鼠标键后，元素继续随鼠标移动，注意事项：onmousedown的对象是oDiv,即oDiv.onmousedown；onmousemove和onmouseup的对象的document

$().extend('drag', function (){
	var i=0;
	
	for(i=0;i<this.elements.length;i++)
	{
		drag(this.elements[i]);
	}
	
	function drag(oDiv)
	{
		oDiv.οnmοusedοwn=function (ev)
		{
			var oEvent=ev||event;
			var disX=oEvent.clientX-oDiv.offsetLeft;
			var disY=oEvent.clientY-oDiv.offsetTop;
			
			document.οnmοusemοve=function (ev)
			{
				var oEvent=ev||event;
				
				oDiv.style.left=oEvent.clientX-disX+'px';
				oDiv.style.top=oEvent.clientY-disY+'px';
			};
			
			document.οnmοuseup=function ()
			{
				document.οnmοusemοve=null;
				document.οnmοuseup=null;
			};
		};
	}
});