源于jQuery来理解实现原理---第一篇

主要来理解jQuery中的一些常用方法，涉及click（）、show（）、hide（）、hover（）、css（）、

attr（）、toggle（）、eq（）、find（）、index（）；

1、第一步：获取页面中元素

function VQuery(vArg)   //参数可以使fn,oArg(对象),sArg(字符串),所以设置vArg 可以三个当中的任何一种参数
{
	//elements 用来保存选中的元素
	this.elements=[];
	switch( typeof vArg)
	{
		case 'function': 
			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);
	}
}

注意点：对于参数的类型不确实，所以用vArg来表示；

2、通过class来选择元素

function getByClass(oParent, sClass)
{
	var aEle = oParent.getElementsByTagName('*');
	var aResult=[];
	
	for(var i=0; i<aEle.length; i++)
	{
		if(aEle[i].className == sClass)
		{
			aResult.push(aEle[i]);
		}
	}
	
	return aResult;
}

3、用$代替new VQuery，方便书写代码方便

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

4、在写事件前，先绑定事件

function myAddEvent(obj, sEv, fn){
	
	if(obj.attachEvent)
	{	
		obj.attachEvent('on'+sEv, function(){
			
			fn.call(obj);
			});  //通过call来解决绑定事件中出现的this的问题
	}
	else
	{
		obj.addEventListener(sEv, fn, false);
	}
}

注意点：在绑定事件中的this会指向window，所以解决方法用call（）；

注意点：不能使用this的四种情况：1、行间；2、嵌套；3、定时器；4、事件绑定；

5、click事件

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

6、show显示

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

7、hide隐藏

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

8、hover（mouseover、mouseout）

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

9、获取css的方法

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 getStyle(this.elements[0], attr);
		}
	};

注意点：在设置时用style，是没有问题，但是在获取元素的时候，style就只会获取行间的样式，

所以解决方法是：

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

10、attr方法，跟css设置差不多，只是不获取css样式，而是获取html中的属性

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

11、toggle来回切换的事件，可有多个参数，第一次点是第一个，依次出现，然后重复

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);
			count++;
			});
		}
	
};

12、eq方法:类似数组的下标

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

13、find方法是用来找子元素的

VQuery.prototype.find=function(str){ //默认2中情况，一个是标签名，一个是class，不考虑id下的id子选项
	
	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;
			}
		}
	}

注意点：在上面中涉及的concat，不能使用，aLi 是一种类似数组的结构，但是并不是数组，所以

不能使用concat，解决方法，把aLi里面的元素push到一个数组中

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

14、index 方法实际是元素的索引(元素在父级中序号)

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