js面向过程与面向对象编程示例（使用jquery库）

最新推荐文章于 2024-03-07 18:57:40 发布

微枫1993

最新推荐文章于 2024-03-07 18:57:40 发布

阅读量2.8k

点赞数

分类专栏： web前端文章标签： javascript jquery 面向对象面向过程

本文链接：https://blog.csdn.net/xiongqiangwin1314/article/details/47214355

版权

web前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<style type="text/CSS">
			.firstDiv{ float:left; background:pink;}
			.firstDiv:hover{ cursor:pointer;}
			.noSelected{ -moz-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none;}
			.secondDiv{ background:gray; width:200px; height:400px; float:left; display:none; padding-top:30px; padding-left:30px;}
		</style>
	</head>
	<body>
		<div id="firstDiv" class="firstDiv"><span class="noSelected">鼠标滑动查看信息。</span></div>
		<div id="secondDiv" class="secondDiv">
			<p>qq:1900098</p>
			<p>tel:99998888</p>
			<p>user:xq</p>
		</div>
		<script type="text/JavaScript" src="../publicJQuery/jquery-2.1.4.js"></script>
		<script type="text/JavaScript">
		
			/*面向过程编程，首先得到某某，然后执行某某操作，叙事般往下走
			$("#firstDiv").hover(function(){$("#secondDiv").css("display","block");} , function(){$("#secondDiv").css("display","none");});
			$("#secondDiv").hover(function(){$("#secondDiv").css("display","block");} , function(){$("#secondDiv").css("display","none");});
			*/
			/*创建一个showAndHideDiv对象，属性为传入的参数，方法为show()跟hide()方法*/
			function showAndHideDiv(element){
				/* 不明显的面向对象
				this.show=function(){
					$(element).css("display","block");
				}
				
				this.hide=function(){
					$(element).css("display","none");
				}
				*/
				this.element=element;
			}
			
			showAndHideDiv.prototype={
				show:function(){
					$(this.element).css("display","block");
				},
				hide:function(){
					$(this.element).css("display","none");
				}
			}
			var divForChange=new showAndHideDiv("#secondDiv");
			$("#firstDiv,#secondDiv").hover(function(){divForChange.show();} ,function(){divForChange.hide();});
			//$("#secondDiv").hover( function(){divForChange.show();}, function(){divForChange.hide();});
				
		</script>
	</body>
</html>