首页 > 代码库 > 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面向对象
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。