• each()
• 插件机制
• animation
• ajax

//each()

//这里第一个参数指定将this指向每次循环到的那个元素身上，而第三个参数element其实就是this本身所以和第一个参数是一样的，而第二个参数是每次循环的下标

zQuery.prototype.each=function(fn){

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

        fn.call(this.elements[i],i,this.elements[i]);

    }

};

//插件机制

$.fn=zQuery.prototype;  //引用，如果只绑定一个插件，就直接写$.fn.toRed = function(){}...，相当于直接将toRed函数挂到zQuery.prototype上，可以进行zQuery对象调用

//如果是挂多个插件，将函数参数中的json循环，挂在到zQuery.prototype中

$.fn.extend=function(json){

    for(var key in json){

        //key == tored/toYellow

        //json[key]   ==  fn

        zQuery.prototype[key]=json[key];

    }

};

$.ajax = ajax; //将ajax函数挂在到$.ajax上

//animation

zQuery.prototype.animate=function(json,options){

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

        move(this.elements[i],json,options);

    }

};

//ajax封装

function ajax(options){

    //-1.整理options

    options=options||{};

    options.data=options.data||{};

    options.type=options.type||'get';

    options.timeout=options.timeout||0;

    //0.整理data json  --> string

    options.data.t=Math.random();

    var arr=[];

    for(var key in options.data){

        arr.push(key+'='+encodeURIComponent(options.data[key]));

    }

    var str = arr.join('&');

    //1.创建ajax

    if(window.XMLHttpRequest){

        var oAjax=new XMLHttpRequest();

    }else{

        var oAjax=new ActiveXObject('Microsoft.XMLHTTP');

    }

    if(options.type=='get'){//get

        //2.建立连接

        oAjax.open('get',options.url+'?'+str,true);

        //3.发送

        oAjax.send();

    }else {//post

        //2.建立连接

        oAjax.open('post',options.url,true);

        //设置请求头

        oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

        oAjax.send(str);

    }

    //4.接收

    oAjax.onreadystatechange=function(){

        if(oAjax.readyState==4){

            clearTimeout(timer);

            if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){

                options.success && options.success(oAjax.responseText);

            }else{

                options.error && options.error(oAjax.status);

            }

        }

    }

    //5.超时

    if(options.timeout){

        var timer=setTimeout(function(){

            //数据不要了	，你别加载

            oAjax.abort();//中断ajax请求,也会触发readyState==4

        },options.timeout);

    }

}

//运动函数的封装

function move(obj,json,options){

    //整理可选参数

    options = options || {};

    options.duration = options.duration || 300;

    options.complete = options.complete || null;

    options.easing = options.easing || 'ease-out';

    var start={};

    var dis={};

    for(var key in json){

        start[key]=parseFloat(getStyle(obj,key));

        if(isNaN(start[key])){

            switch(key){

                case 'width':

                    start[key]=obj.offsetWidth;

                    break;

                case 'height':

                    start[key]=obj.offsetHeight;

                    break;

                case 'opacity':

                    start[key]=1;

                    break;

                case 'left':

                    start[key]=0;

                    break;

                case 'top':

                    start[key]=0;

                    break;

                //marginLeft/top...	padding

            }

        }

        dis[key]=json[key]-start[key];

    }

    var count=Math.round(options.duration/30);

    var n=0;

    clearInterval(obj.timer);

    obj.timer=setInterval(function(){

        n++;

        for(var key in json){//办事部分包起来

            switch(options.easing){

                case 'linear':

                    var a=n/count;//	匀速运动

                    var cur=start[key]+dis[key]*a;

                    break;

                case 'ease-in':

                    var a=n/count;//	加速运动

                    var cur=start[key]+dis[key]*(a*a*a);

                    break;

                case 'ease-out':

                    var a=1-n/count;//	减速运动

                    var cur=start[key]+dis[key]*(1-a*a*a);

                    break;

            }

            if(key=='opacity'){

                obj.style.opacity=cur;

                obj.style.filter='alpha(opacity='+cur*100+')';

            }else{

                obj.style[key]=cur+'px';

            }

        }

        if(n==count){

            clearInterval(obj.timer);

            options.complete && options.complete();

        }

    },30);

}