<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'));
console.log($().getTagName('p'));
console.log($().getName('tel'));
$().getTagName('p').css('color','red').html('我改變了').click(function(){
alert(1);
});*/
//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;
}