javascipt之博客前端自定义下拉菜单代码笔记

最新推荐文章于 2021-02-17 23:45:46 发布

chenchudongsg

最新推荐文章于 2021-02-17 23:45:46 发布

阅读量630

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/chenchudongsg/article/details/39852593

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

自定义封装库base.js:

/**
博客前端+封装库


var Base={
	$:function(id){
		return document.getElementById(id);
	},
	$$:function(name){
		 return document.getElementsByName(name);
	},
	$$$:function(tag){
		return document.getElementsByTagName(tag);
	}
};

var Base={
	getById:function(id){
		return document.getElementById(id);
	},
	getByName:function(name){
		 return document.getElementsByName(name);
	},
	getByTageName:function(tag){
		return document.getElementsByTagName(tag);
	}
};

*/
/********************自定义封装***************************/
function $(_this){
 return new Base(_this);//每次创建一个Base对象，防止页面共用同一个Base对象
}
//基础库
function Base(){
	this.elements=[];//创建一个临时数组。存放元素节点对象
	if(_this!=undefined){//undefined这里是一个对象，区别与tyoeof带单引号有区别
		this.elements[0]=_this;	
	}
}
//通过id获取节点
Base.prototype.getById=function(id){
		this.elements.push(document.getElementById(id));
		return this;
	};

//通过元素名称获取节点
Base.prototype.getByTagName=function(tag){
        var	tags=document.getElementsByTagName(tag);
		for(var i=0;i<tags.length;i++){
			this.elements.push(tags[i]);
		}
		return this;
	};


//获取class节点数组
Base.prototype.getClass=function(className,idName){
		var node=null;
		if(arguments.length==2){//指定区域div中的所有class集合
			node=document.getElementById(idName);
		}else{
			node=document;
		}
		var all=node.getElementsByTagName('*');
		for(var i=0;i<all.length;i++){
			if(all[i].className==className){
				this.elements.push(all[i]);
			}
		}
		return this;
	}

//获取class节点集合中的某一个节点
Base.prototype.getElement=function(num){
		var element=this.elements[num];
		this.elements=[];//清空原来的节点集合
		this.elements[0]=element;
		return this;
	}

//添加class
Base.prototype.addClass=function(className){
	for(var i=0;i<this.elements.length;i++){
		if(this.elements[i].className.match(new RegExp('(\\s|^)'+className+ '(\\s|$)'))){//避免重复相同的class
			this.elements[i].className+=" "+className;
		}
	}
	return this;
}

//移除class
Base.prototype.removeClass=function(className){
	for(var i=0;i<this.elements.length;i++){
		if(this.elements[i].className.match(new RegExp('(\\s|^)'+className+ '(\\s|$)'))){//避免重复相同的class
			this.elements[i].className= this.elements[i].className.replace(new RegExp("\\s|^"+className+'(\\s|$)'));
		}
	}
	return this;
}

//设置样式
Base.prototype.css=function(attr,value){
	for(var i=0;i<this.elements.length;i++){
		if(arguments.length==1){
			//获取外部样式表的设置
			if(typeof window.getComputedStyle!='undefined'){//W3C
				return window.getComputedStyle(this.elements[i],null)[attr];
			}else if(typeof this.elements[i].currentStyle !='undefined'){//IE
				return this.elements[i].currentStyle[attr];
			}
			//return this.elements[i].style[attr];//获取css属性内容
		}
		this.elements[i].style[attr]=value;
	}
	return this;
}
//设置节点内容
Base.prototype.html=function(text){
	for(var i=0;i<this.elements.length;i++){
		if(arguments.length==0){
			return this.elements[i].innerHTML;//获取节点内容
		}
		this.elements[i].innerHTML=text;
	}
	return this;
}

//设置hover的onmouseover和onmouseout事件
Base.prototype.hover=function(over,out){
	for(var i=0;i<this.elements.length;i++){
		this.elements[i].οnmοuseοver=over;
		this.elements[i].οnmοuseοut=out;
	}
	return this;
};

//显示ul
Base.prototype.show=function(){
	for(var i=0;i<this.elements.length;i++){
		this.elements[i].style.display="block";
	}
	return this;
};

//隐藏ul
Base.prototype.hide=function(){
	for(var i=0;i<this.elements.length;i++){
		this.elements[i].style.display="none";
	}
	return this;
};

//设置点击事件
Base.prototype.click=function(fn){
	 for(var i=0;i<this.elements.length;i++){
		this.elements[i].οnclick=fn;
	}
	return this;
}

html页面：

<!DOCTYPE html>
<html>
<head>
	 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	 <link rel="stylesheet" type="text/css" href="style.css">
	<script type="text/javascript" src="Base.js"></script>
	<script type="text/javascript" src="demo3.js"></script>
	<script type="text/javascript">
	</script>
</head>
	<body>	
		<div id="head">
			<div class="logo"><img src="images/topbar_logo.gif"/></div>
			<div class="member">个人设置
				<ul>
					<li><a href="#">修改密码</a></li>
					<li><a href="#">博客管理</a></li>
					<li><a href="#">私信管理</a></li>
					<li><a href="#">好友管理</a></li>
					<li><a href="#">设置管理</a></li>
				</ul>
			</div>
		</div>
		<div id="aaa">
			<p class='pclass'>段落1</p>
			<p class='pclass'>段落1</p>
			<p class='pclass'>段落1</p>
		</div>

		<div id="bbb">
			<p class='pclass'>段落1</p>
			<p class='pclass'>段落1</p>
			<p class='pclass'>段落1</p>
		</div>
		
	</body>
</html>

style.cssy样式表：

#box{
	color:#FFFF00;
	font-size:25px;
}
body ul{
    margin:0;padding:0;
	font-size:15px;

}
#head{
	width:100%;
	height:40px;
	background:url(images/CP_page.png) repeat-x;
}
#head .logo{
	width:100px;
	height:30px;
	float:left;
}
#head .logo img{
	display:block;
}
#head .member{
	width:100px;
	height:30px;
	background:#C0C0C0;
	float:right;
	text-align:center;
	line-height:30px;
	cursor:pointer;
}

#head .member ul{
	position:absolute;
	width:100px;
	background:#FBF7E1;
	list-style:none;
	float:right;
	top:35px;
	border:1px solid #999;
	display:none;
	
}
#head .member:hover{
	background:#808000;
}
#head .member ul li{
	height:25px;
	line-height:25px;
	display:inline;
	
}
#head .member ul a{
	text-decoration:none;
	color:#333;
	display:block;
	background:url(images/arrow_down.jpg) no-repeat 3px center;
}
#head .member ul a:hover{
	background:#fc0;
	
}

演示的demo3.js:

/***************连缀：链式编程*************************/
/*
	Base.getById('box').css('colr','red').html('').click(function(){
		alert('');
	}));
	Base.getById('box');//返回的divEelement
	Base.getById('box').css('colr','red');//返回的是Base对象
*/

window.οnlοad=function(){
	//alert($().getById('box'));
	//$().getById('box').css('color','red').css('backgroundColor','black');
	//$().getByTagName('p').css('color','green').html('标题').click(function(){
		//alert('测试');
	//});
	//$().getById('box').css('font-size','20px');
	//获取外部样式表的属性值
	//alert($().getById('box').css('font-size'));

	//$().getClass('pclass').css('color','red');

	//$().getClass('pclass').getElement(2).css('color','red');
	//$().getClass('pclass','aaa').css('color','red');
	$().getClass("member").hover(function(){
		 $().getByTagName("ul").show();
	},function(){
		  $().getByTagName("ul").hide();
	});
	
};

下拉菜单效果：

chenchudongsg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascipt之博客前端自定义下拉菜单代码笔记

自定义封装库base.js:/**博客前端+封装库var Base={ $:function(id){ return document.getElementById(id); }, $$:function(name){ return document.getElementsByName(name); }, $$$:function(tag){ return do
复制链接

扫一扫

专栏目录