仿写一个简单的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

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

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

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

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

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

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

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

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

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

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

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

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

VQuery.prototype.bind=function (sEv, fn)
{
	var i=0;
	
	for(i=0;i

extend():

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

animate():

$().extend('animate', function (json){
	var i=0;
	
	for(i=0;i0?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