封装自己的js库(一)---仿照JQuery

最新推荐文章于 2020-03-24 10:44:45 发布

凌-志

最新推荐文章于 2020-03-24 10:44:45 发布

阅读量4.7k

点赞数 5

分类专栏： Javascript

本文链接：https://blog.csdn.net/yanlzhl/article/details/54136724

版权

Javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这一篇代码初步实现最基础的功能：元素选择（3种方式:id选择器，类选择器，元素选择器），事件绑定，show(),hide()...

1.index.html

<!DOCTYPE>
<html>
	<head>
		<meta charset="utf-8" />
		<title>VQuery</title>
		<style>
			#div{
				width: 200px;
				height: 200px;
				background-color: red;
				}
				
		</style>
		<!--<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>-->
		<script src="js/VQuery.js"></script>
		<script type="text/javascript">

			$(function(){   //相当于window.οnlοad=function(){}
//				new VQuery('#btn1').click(function(){
//					alert('a');
//				});
//				new VQuery('.one').click(function(){
//					alert('b');
//				});
//				$('input').click(function(){
//					alert('c');
//				});
//				$('#btn1').click(function(){
//					$('#div').show();
//				});
//				$('#btn2').click(function(){
//					$('#div').hide();
//				});
				$('#div').hover(function(){
					$(this).css('background-color',"red");
				},function(){
					$(this).css('background-color',"black");
				});
//				$('#div').click(function(){
//					alert($('#div').css('width'));
//				});
			});
			
			
		</script>
	</head>
	<body>
		<input id="btn1" type="button" value="显示" />
		<input id="btn2" type="button" value="隐藏" />
		<div id="div" ></div>
		<!--<input class="one" type="button" value="按钮3" /><br />
		<input class="one" type="button" value="按钮4" /><br />-->
	</body>
</html>

2.VQuery.js

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

function myAddEvent(obj,evt,fn){  //事件绑定，将会让一个事件发生多个
	if(obj.attachEvent){ 
		obj.attachEvent('on'+evt,fn); //attachEvent方法只支持IE浏览器,执行顺序是，后绑定的先执行．
	}else{    
		//功能相同的指令是addEventListener,该指令支持FF等浏览器，并且是W3C标准
		obj.addEventListener(evt,fn,false); //执行顺序是，先绑定的先执行
	}
}

function getByClass(oparent,oclass){  //指定标签名下的className
	var aEle=oparent.getElementsByTagName('*');
	var result=[];
	var i=0;
	for (i=0;i<aEle.length;i++) {
		if (aEle[i].className==oclass) {
			result.push(aEle[i]);
		}	
	}
	return result;
} 

function getStyle(obj,attr){
	if(obj.currentStyle){  //行内样式
		return obj.currentStyle[attr];
	}else{					//嵌入样式，外联样式
		return getComputedStyle(obj,false)[attr];
	}
}

//arg类型：
//1.函数
//2.字符串:  #xxx,.xxx,X
//3.对象
function VQuery(arg){
	//用来保存选中的元素
	this.elements=[];
	
	switch(typeof arg){
		case 'function':
				myAddEvent(window,'load',arg);  //使用window.onload当多个时间发生时，会产生覆盖
				break; 
		case 'string':
				switch(arg.charAt(0)){
					case '#':	//Id
						//#id
						var obj=document.getElementById(arg.substring(1));
						this.elements.push(obj);
						break;
					case '.':   //className
						//.class
						this.elements=getByClass(document,arg.substring(1));
						break;
					default:	//TagName	
						this.elements=document.getElementsByTagName(arg);
				}
				break;
		case 'object':
				this.elements.push(arg);
	}
}
//点击事件
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(){
	for (var i=0;i<this.elements.length;i++) {
		this.elements[i].style.display='block';
	}
};
VQuery.prototype.hide=function(){
	for (var i=0;i<this.elements.length;i++) {
		this.elements[i].style.display='none';
	}
};
VQuery.prototype.hover=function(over,out){
	for (var i=0;i<this.elements.length;i++) {
		myAddEvent(this.elements[i],'mouseover',over);
		myAddEvent(this.elements[i],'mouseout',out);
	}
};
VQuery.prototype.css=function(attr,value){
	if(arguments.length==2){
		for (var i=0;i<this.elements.length;i++) {
			this.elements[i].style[attr]=value;
		}
	}else{
		return getStyle(this.elements[0],attr);
	}
}

以上代码整理自妙味课堂JS学习视频！