首页 > 代码库 > 3、jQuery面向对象

3、jQuery面向对象

1、首先介绍callback.js对ajax进行了封装

function ajaxFunction(){  var xmlHttp;  try{ // Firefox, Opera 8.0+, Safari    xmlHttp=new XMLHttpRequest();  }  catch (e){    try{// Internet Explorer      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");    }    catch (e){        try{          xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");        }        catch (e){}    }  }  return xmlHttp;}window.onload=function(){  //    ajax("../AjaxServlet","post",null,function(data){//data为回调函数的形参  //    alert(data);  //    });  ajax2({    url:‘../AjaxServlet‘,    method:‘post‘,    data:null,    callback:function(data){    /**    * ajaxJSON.callback(xmlHttp.responseText);//xmlHttp.responseText为回调函数的实参    * 这里的this代表this所在的json对象    * ajaxJSON.callback.call(window,xmlHttp.responseText);//xmlHttp.responseText为回调函数的实参    * 这里的this代表window    */    alert(this);    }  });}function ajax(url,method,data,callback){  //获取xmphttpRquest对象  var xmlHttp=ajaxFunction();  //事件处理程序  xmlHttp.onreadystatechange=function(){    //alert(xmlHttp.readyState);    //alert(xmlHttp.status)    if(xmlHttp.readyState==4){      if(xmlHttp.status==200||xmlHttp.status==304){        callback(xmlHttp.responseText);//xmlHttp.responseText为回调函数的实参      }    }  }      //打开连接  xmlHttp.open(method,url,true);  //设置响应头  xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  //发送请求  xmlHttp.send("data="http://www.mamicode.com/+data);}function ajax2(ajaxJSON){    //获取xmphttpRquest对象    var xmlHttp=ajaxFunction();    //事件处理程序    xmlHttp.onreadystatechange=function(){    //alert(xmlHttp.readyState);    //alert(xmlHttp.status)    if(xmlHttp.readyState==4){      if(xmlHttp.status==200||xmlHttp.status==304){        ajaxJSON.callback.call(window,xmlHttp.responseText);//xmlHttp.responseText为回调函数的实参      }    }}    //打开连接xmlHttp.open(ajaxJSON.method,ajaxJSON.url,true);//设置响应头xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//发送请求xmlHttp.send("data="http://www.mamicode.com/+ajaxJSON.data);}

 

 

2、jquery面向对象,get,set

/*** 在函数内部定义的函数,在外部要使用* 闭包的一个使用场景:* 继承的封装* 匿名函数* 写4个函数setName,getName,aaa,bbb,让setName和getName成为公开的函数,让aaa,bbb成为私有的函数*/(function(window){  function Person(){    return {      setName:setName,      getName:getName    };  }  /**  * 公开的函数  * @param {Object} name  */  function setName(name){    this.name = name;  }  function getName(){    return this.name;  }  /**  * 私有函数  */  function aaa(){  }  function bbb(){  }  //给window对象动态的添加了一个属性Person  window.Person = Person;})(window);  var Person = window.Person();  Person.setName("aaa");  alert(Person.getName());

 

 

3、jQuery面向对像,event添加

  $().ready(function(){  /**  * 给指定的区域中的指定的元素添加指定的事件  * 能给未来的元素添加指定的事件  * @param {Object} "input[type=‘button‘]"  */  $("body").delegate("div","click",function(){    alert("aaaa");  });  $("input[type=‘button‘]").unbind("click");  $("input[type=‘button‘]").bind("click",function(){    $("body").append($("<div/>").text("aaaaa"));  });  for(var i=0;i<3;i++){  /**  * 用click的方法声明事件,事件是可以叠加的  * 该方法不能给未来的元素添加事件  */  //    $("div").click(function(){    //    alert("aaa");  //    });  /**  * 也不能给未来的元素添加事件  */  //    $("div").unbind("click");//使该属性从该对象上移除  //    $("div").bind("click",function(){    //    alert("aaa");  //    });  }});

 

 

4、jQuery面向对象3(自定义事件) event定义

  /**  * 自定义事件  * 事件必须满足三个条件:  * 1、事件必须有名称  * 2、事件必须绑定在某一个对象上  * 3、事件必须有触发条件  */  /**  * 给div添加一个事件,该事件的名称为"itheima12很牛",当点击div的时候,触发click事件的同时触发"itheima12很牛"事件  */  $().ready(function(){    $("div").unbind("click");    $("div").bind("click",function(){        /**        * 在点击div的时候,触发itheima12很牛事件        */        //$(this).trigger("itheima12很牛",5);        //$(this).trigger("itheima12很牛",[5,6]);        $(this).trigger("itheima12很牛",{          aa:‘aa‘,          bb:‘bb‘        });     });    $("div").unbind("itheima12很牛");    $("div").bind("itheima12很牛",function(event,json){      alert(json.aa);      alert(json.bb);    });  });

 

 

5、jQuery面向对象4(对象)

 

 /**  * 该函数是一个对象,该对象是由Function产生的  */  function Person(){  }  alert(Person.constructor);  Person.a = 5;//给Person对象添加了一个属性为a,值为5  function Student(){  }  Person.b = Student;//给Person对象添加了一个属性为b,值为Student的对象  var json = {    aa:aa  };  Person.c = json;//给Person对象天界另一个属性为c,值为json对象  alert(Person.c.aa);  /**  * A.B.C.D.E.F.G.H()  */  function A(){  }  function b(){  }  function c(){  }  function d(){  }  function e(){  }  function f(){  }  function g(){  }  function h(){    alert("hh");  }  A.B = b;  A.B.C = c;  A.B.C.D = d;  A.B.C.D.E = e;  A.B.C.D.E.F = f;  A.B.C.D.E.F.G = g;  A.B.C.D.E.F.G.H = h;  A.B.C.D.E.F.G.H();//A.B.C.D.E.F.G是命名空间  var AA = {};  AA.BB = b;  AA.BB.CC = c;  AA.BB.CC.DD = d;  AA.BB.CC.DD.EE = e;  AA.BB.CC.DD.EE.FF = f;  AA.BB.CC.DD.EE.FF.GG = g;  AA.BB.CC.DD.EE.FF.GG.HH = h;  AA.BB.CC.DD.EE.FF.GG.HH();  /**  * a.b.c.d.e.f  */  function namespace(namespaceString){    var temp = [];//声明了一个空的数组    var array = namespaceString.split(".");    for(var i=0;i<array.length;i++){      temp.push(array[i]);      /**      * 把多个json对象添加了window上      */      eval("window."+temp.join(".")+"={}");      //把多个function添加到了window上      //eval("window."+temp.join(".")+"=function(){}");    }  }  /**  * 把com.itheima12动态的添加到了window对象上  */  var tempnamespace = namespace("com.itheima12");  alert(window); 

6、jQuery面向对象,protype

(function(window){    /**      *   jQuery是一个函数                                  是一个对象                                  是一个构造器函数      */    var jQuery = function( selector, context ) {        return new jQuery.fn.init( selector, context );    },        //fn就是jQuery对象上的一个属性,该属性指向了prototype    //jQuery的 prototype中的方法是根据jQuery的选择器获取到的jQuery对象,然后jQuery对象调用这些方法的    //利用jQuery的选择器得到的jQuery对象就相当于利用jQuery的构造器创建出来的对象    jQuery.fn = jQuery.prototype = {        each: function( callback, args ) {            return jQuery.each( this, callback, args );        },        ready:function(){}    };    //window对象动态的添加了一个属性jQuery,把匿名函数中的jQuery对象赋值给了window的jQuery对象    //$实际上是window的一个属性,也是jQuery对象    window.jQuery = window.$ = jQuery;        jQuery.fn = jQuery.prototype = $.prototype = $.fn = window.$.fn = window.jQuery.fn = window.jQuery.prototype            //在jquery中,可以把一个方法加入到jQuery或者$本身上, 直接利用jQuery或者$调用,这样的方法称为全局方法,也称为全局插件    //在jquery中,可以把一个方法加入到jQuery或者$的prototype或者fn上,可以利用jquery的选择器获取到的jquery对象调用这些方法,这样的方法也称为插件方法})(window);

7、jQuery prototype

function Person(){    }alert(Person.prototype); //Person是一个函数对象,有一个默认的属性为prototype={},该特点在json对象中是不存在的Person.prototype.aa = 5;//Person.prottype[‘aa‘] = 5;Person.prototype.bb = function(){    alert("bb");}var p = new Person();alert(p.aa);var json = {};alert(json.prototype);/** * 模拟一个类,创建一个对象,设置属性,并进行输出 */function Student(){    }Student.prototype.setId = function(id){    this.id = id;}Student.prototype.setName = function(name){    this.name = name;}Student.prototype.getId = function(){    return this.id;}Student.prototype.getName = function(){    return this.name;}var s = new Student();s.setId(4);s.setName("王二麻子");alert(s.getId());alert(s.getName());s.bb = 5;alert(s.bb);var ss = new Student();alert("---------"+ss.bb);

8、jQuery的继承

function Student(){    }Student.prototype.setName = function(name){    this.name = name;}Student.prototype.getName = function(){    return this.name;}function SuperStudent(){    }SuperStudent.prototype = Student.prototype;SuperStudent.prototype = new Student();var superStudent = new SuperStudent();superStudent.setName("aaa");alert(superStudent.getName());

9、jQuery继承2

/** * 在extend函数内部定义了一个函数,把传递进来的json对象的每一个key,value值动态的添加到了 * 内部函数的prototype中 * @param {Object} json */namespace("com.itheima12");com.itheima12.extend = function (json){    /**     * 声明了一个函数     */    function F(){            }    /**     * 遍历json对象中的每一个key,value值,把每一个key,value值赋值给F.prototype     */    for(var i in json){        F.prototype[i] = json[i];    }    return F;//F就是一个对象}//var Person = extend({//    aa:‘aa‘,//    bb:‘bb‘//});var Person = com.itheima12.extend({    aa:‘aa‘,    bb:‘bb‘});var p = new Person();alert(p.aa);

10、jquery继承3

/** * 写一个命名空间com.itheima12,在该命名空间下有一个方法extend * 该方法有两个参数json,prop *   该方法会调用两次,第一次传递一个参数,该参数是json对象 *                第二次传递两个参数,第一个参数是function,第二个参数是prop */namespace("com.itheima12");/** * 创建出来一个Person函数 */com.itheima12.extend = function(json,prop){    function F(){            }    /**     * 第一次调用extend方法     */    if (typeof json == "object") {//json参数是一个json对象        for(var i in json){//把json对象中的每一个key,value赋值给F的prototype            F.prototype[i] = json[i];        }    }        /**     * 第二次调用extend方法     */    if(typeof json == "function"){        /**         * 让F的prototype指向json的prototype         */        F.prototype = json.prototype;        /**         * 再把prop的每一个key,value值赋值给F的prototype         */        for(var j in prop){            F.prototype[j] = prop[j];        }    }    return F;}var Person = com.itheima12.extend({    aa:‘aa‘,    bb:‘bb‘});var p = new Person();alert(p.aa);var SuperPerson = com.itheima12.extend(Person,{    cc:‘cc‘});var sp = new SuperPerson();alert(sp.cc);

11、jQuery继承4

/** * 写一个函数,该函数的名称是extend,有两个参数:destination,source   1、如果destination和source都是json对象,完成从source到destination的复制   2、如果destination是一个函数,source是一个json对象,则把source中的每一个key,value对赋值给destination的prototype   3、如果destination,source都是函数,则把source的prototype中的内容赋值给destination的prototype */namespace("com.itheima12");com.itheima12.extend = function(destination,source){    if(typeof destination == "object"){//destination是一个json对象        if(typeof source == "object"){//source是一个json对象            //把source中的每一个key,value值赋值给destination            for(var i in source){                destination[i] = source[i];            }        }    }        if(typeof destination == "function"){        if(typeof source == "object"){            for(var i in source){                destination.prototype[i] = source[i];            }        }        if(typeof source == "function"){            destination.prototype = source.prototype;        }    }    return destination;}var destination = com.itheima12.extend({    cc:‘cc‘},{    aa:‘aa‘,    bb:‘bb‘});alert(destination.aa);function Person(){    }com.itheima12.extend(Person,{    aa:‘aa‘});

12、namespace.js

function namespace(namespaceString){    var temp = [];//声明了一个空的数组    var array = namespaceString.split(".");    for(var i=0;i<array.length;i++){        temp.push(array[i]);        /**         * 把多个json对象添加了window上         */        eval("window."+temp.join(".")+"={}");        //把多个function添加到了window上        //eval("window."+temp.join(".")+"=function(){}");    }}

3、jQuery面向对象