javascript 建立並匯入自定義庫
//先建立一個js格式寫入
//建立物件 function $(){ return new Base(); }
function Base(){ this.ele=[];//儲存節點物件 }
//新增方法 Base.prototype.getID=function(id){ var o=document.getElementById(id); this.ele.push(o); return this; };
Base.prototype.getTagName=function(tagName){ var os=document.getElementsByTagName(tagName); for(var i =0;i<os.length;i++){ this.ele.push(os[i]); } return this; };
Base.prototype.getClass=function(cls){ var os=document.getElementsByClassName(cls); for(var i=0;i<os.length;i++){ //遍歷節點，儲存 this.ele.push(os[i]); } return this;//返回當前物件，為了連綴 };
//修改樣式 //1.既能設定樣式，又能獲取樣式 //2.批量設定樣式 Base.prototype.css=function(property,value){ //取出節點物件 for(var i in this.ele){ //修改樣式 this.ele[i].style[property]=value; } return this;//返回當前物件，目的為了連綴 };
//修改內容 /* 1.有引數：修改內容 2.無參：獲取指定節點的內容 */ Base.prototype.text=function(value){ //arguments //有引數 if(value!=undefined){ //遍歷節點 for(var i=0;i<this.ele.length;i++){ this.ele[i].innerHTML=value; } return this; }
return this.ele[0].innerHTML;//返回第一個節點的內容 };
//在建立一個html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src='js/3.js'></script> </head> <body> <div>嘎哈</div> <div id="menu">Hello World</div> <div class="one">拉開距離科技</div> <div class="one">坎坎坷坷擴</div>
<script type="text/javascript"> $().getID('menu').css('color','blue'); $().getClass('one').css('color','red'); </script> </body> </html>