网页制作学习3----实现连缀功能

        沿用我们上一次的Base对象，连缀功能就像下面这样调用，用一个对象连续利用各个方法，避免代码冗余：

Base.getId('box').css('color','red').html('标题').click(function () {alert('a')});

<divid="box">box</div>

        主要思想： Base是一个基础库的核心对象，但是Base.getId('box')返回的是一个divElement，这个对象是没有css方法的。所以我们只要将Base.getId('box')返回改成Base，返回Base对象，然后为Base对象添加css,html,click方法,而且Base.getId('box').css('color','red')返回的也是Base对象，无论后面加多少个，返回的都会是Base对象。

         

         改进第一步，先把var改成function：

         function Base(){    //这里要注意和var Base的写法做区分

         this.getId=function(id){

                  Return document.getElementById(id);

         }

}

上面的写法相当于还是没有返回Base对象，所以还是一个一个地写。

这时候在调用的时候也是alert(Base.getId('box').innerHTML);这样直接写，但是前面需要new一下，varbase=new Base();

         base.getId('box').style.color= 'red';//可以把字改成红色的

         base.getId('box').style.backgroundColor= 'black';//把背景改成黑色的

         base.getId('box').innerHTML= 'pox';//把文字改成Pox

         base.getId('box').onclick= function () {//鼠标点击会弹出这个对象的文本

                   alert(this.innerHTML);

         };

改进第二步：创建一个数组来存

         functionBase() {

         //创建一个数组，来保存获取的节点和节点数组

         this.elements= [];

         //获取ID节点；用的是this后面接函数名，而且不再是冒号，是等号

         this.getId= function (id) {

                   this.elements.push(document.getElementById(id));//这里相当于把它压进数组里

                   returnthis;//然后再return this

         };

//获取元素节点  像这种标签就会有很多个了，所以要附很多遍。

         this.getTagName= function (tag) {

                   vartags = document.getElementsByTagName(tag);

                   for(var i = 0; i < tags.length; i ++) {

                            this.elements.push(tags[i]);

                   }

                   returnthis;

         };

}

这时候如果我再写base.getId(‘box’).style.color已经不行了，已经不是divelement了。

alert(base.getId('box').elements.length); 但是这时候elements是可以调用到的。

 

         改进第三步：开始添加css方法

   最好不要写在刚才function Base(){}里面，不好区分。可以在外面写  Base.prototype.css=function(){  alert(“abc”);} 加一个prototype原型就可以了。

具体正确写法如下：

在window.onload=function(){

 varbase=new Base();

base.getId(‘box’).css(‘color’,’red’)

}

Base.prototype.css = function (attr, value){

         for(var i = 0; i < this.elements.length; i ++) {

                   this.elements[i].style[attr]= value;

         }   //这样去利用style.color=’red’;

         returnthis;//还要返回原来这个对象才行哦。

}

再来做一个,这个是改字的

Base.prototype.html = function (str) {

         for(var i = 0; i < this.elements.length; i ++) {

                   this.elements[i].innerHTML= str;

         }

         returnthis;

}

再来做一个事件的话，里面的参数是函数

Base.prototype.click = function (fn) {

         for(var i = 0; i < this.elements.length; i ++) {

                   this.elements[i].onclick= fn;

         }

         returnthis;

}

         调用的话就像之前说的那样：Base.getId('box').css('color','red').html('标题').click(function () {alert('a')}); 就行了

改进第四步：

         这里会出现一个错误，就是用的一个对象会覆盖掉前面别的div的那些操作，导致混乱，原因就是我们这里调用的时候只用了一个var base=new Base();

所以在Base定义的地方，也就是base.js里面要写下面这个函数：

var $ = function () {

         returnnew Base();

}//每次返回一个新的Base对象。

然后调用的时候我们就不要var base =new Base()这些了，将前面改成$().就行了

$().getId('box').css('color','red').css('backgroundColor', 'black');

         $().getTagName('p').css('color','green').html('标题').click(function () {

                   alert('a');

         }).css('backgroundColor','pink');