<!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>
js面向过程与面向对象编程示例(使用jquery库)
最新推荐文章于 2021-12-13 14:07:06 发布