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




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值