<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無标題文檔</title>
<script src="index01.js"></script>
<script src="index02.js"></script>
</head>
<body>
<div id="clas">ddd</div>
<div id="ff" style="display:none">fff</div>
<p>我是p1</p>
<p>我是p2</p>
<input type="tel" name="tel" />
</body>
</html>
//這裡調用
window.onload = function(){
//console.log($().getId('clas').html());
$().getId('clas').hover(function(){
$().getId('ff').show();
},function(){
$().getId('ff').hide();
});;
}
// JavaScript Document 封裝的方法
function $(){
return new Base();
}
function Base(){
this.elements = [];
this.getId = function(id){
this.elements.push(document.getElementById(id));
return this;
};
this.getTagName = function(tag){
var targs = document.getElementsByTagName(tag);
for(var i=0;i<targs.length;i++){
this.elements.push(targs[i]);
}
return this; //傳回Base對象
};
this.getName = function(name){
this.elements.push(document.getElementsByName(name));
return this;
}
}
Base.prototype.css = function(attr,value){
for(var i=0;i<this.elements.length;i++){
if(arguments.length ==1){
return this.elements[i].style[attr]; //擷取html的值
}
this.elements[i].style[attr] = value;
}
return this;
};
//擷取元素内容
Base.prototype.html = function(str){
for(var i=0;i<this.elements.length;i++){
if(arguments.length==0){
return this.elements[i].innerHTML
}
this.elements[i].innerHTML = str;
}
return this;
}
//增加點選事件
Base.prototype.click = function(fn){ //給函數體添加方法 用原型
for(var i=0;i<this.elements.length;i++){
this.elements[i].onclick = fn;
}
return this;
}
//增加hover事件
Base.prototype.hover = function(over,out){
for(var i=0;i<this.elements.length;i++){
this.elements[i].onmouseover = over;
this.elements[i].onmouseout = out;
}
return this;
}
//設定顯示
Base.prototype.show = function(){
for(var i=0;i<this.elements.length;i++){
this.elements[i].style.display = 'block';
}
return this;
}
//設定隐藏
Base.prototype.hide = function(){
for(var i=0;i<this.elements.length;i++){
this.elements[i].style.display = 'none';
}
return this;
}
//設定物體居中
Base.prototype.center = function(width,height){
var top = (document.documentElement.clientHeight-width)/2;
var left = (document.documentElement.clientWidth-height)/2;
for(var i=0;i<this.elements.length;i++){
this.elements[i].style.top = top+'px';
this.elements[i].style.left = left+'px';
}
return this;
}
//觸發浏覽器 移動時候 彈出層居中
Base.prototype.resize = function(fn){
window.onresize = fn;
return this;
}
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)