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="+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="+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 = ;//给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=;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面向对象的更多相关文章

  1. javascript面向对象的写法及jQuery面向对象的写法

    文章由来:jQuery源码学习时的总结 在JS中,一般的面向对象的写法如下: function Cao(){}//定义一个构造函数 Cao.prototype.init = function(){}/ ...

  2. jQuery面向对象的写法

    定义的写法 //构造函数 function test(){ //construct code } //初始化方法 test.prototype.init = function(){ //init co ...

  3. jquery面向对象写法

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  4. 4、jQuery面向对象之简单的插件开发

    1.alert例子 (function($){ $.alert = function(msg){ window.alert(msg); } $.fn.alert = function(msg){ wi ...

  5. jQuery源码笔记(二):定义了一些变量和函数 jQuery = function(){}

    笔记(二)也分为三部分: 一. 介绍: 注释说明:v2.0.3版本.Sizzle选择器.MIT软件许可注释中的#的信息索引.查询地址(英文版)匿名函数自执行:window参数及undefined参数意 ...

  6. jquery插件写法

    //传统写法 //全局方法 ;(function($){ $.method = function(){ } //or $.obj = { method1:function(){}, method2:f ...

  7. javascript笔记—面向对象

    什么是对象: 对象是一个整体,对外提供一些操作. 什么是面向对象: 使用对象时,只关注对象提供的功能,不关注其内部细节,例如jquery 面向对象是一种通用思想,并非只有编程中能用,任何事情都可以用. ...

  8. JavaScript面向对象①

    什么是对象 对象是一个整体,对外提供一些操作 什么是面向对象 使用对象时,只关注对象提供的功能,不关注其内部细节:比如jQuery 面向对象编程(OOP)的特点(自己理解的特点:把书本上多态放在类继承 ...

  9. 2014年5月份第3周51Aspx源码发布详情

    HGM简单连连看游戏源码  2014-5-19 [VS2010]源码描述:这是一款基于WinForm窗体程序的简单水果连连看的小游戏.界面比较美观, 功能如下:该游戏可以显示当前关卡,还有剩余时间.重 ...

随机推荐

  1. JetBrains CLion

    JetBrains CLion 2017.2.4 ①.激活时选择License server: http://idea.irfen.me/ http://idea.imsxm.com/

  2. CSS-使整个页面上的全部元素可编辑

    # [在线预览](https://jsfiddle.net/1010543618/6zu1gush/) ## 方法一 - 使用 html 的 contenteditable 属性: [HTML 5 全 ...

  3. ZwQueryDirectoryFile用法

    1. 当返回值为STATUS_SUCCESS时,返回的字节数保存在IoStatusBlock.Information字段中: 2. 如果FileName字段被指定了,那么对于同时指定的FileHand ...

  4. 视区相关单位vw, vh ,vm,CSS/CSS3长度、时间、频率、角度单位大全

    一.CSS长度值 em 相对于父元素的字体大小 ex 相对于小写字母"x"的高度 gd 一般用在东亚字体排版上,这个与英文并无关系 rem 相对于根元素字体大小 vw 相对于视窗的 ...

  5. CentOS7版本中locate: 未找到命令,详细解决方案

    在学习Linux(CentOS7)文件搜索命令:locate 时,遇到错误“locate: 未找到命令”. 原因:CentOS7默认没有安装该命令 解决方案: 1.安装"locate&quo ...

  6. if语句基本练习需求

    1.需求:键盘录入一个成绩,判断并输出成绩的等级. 90-100 优 80-89 良好 70-79 中等 60-69 及格 0-59 不及格 import java.util.Scanner; cla ...

  7. intellij中maven不能导入pom文件中指定的jar包

    pom文件配置依赖的jar包版本,可以有默认的版本,如下 <profiles> <profile> <id>default_version</id> & ...

  8. [Python]判断序列是否为空的正确姿势

    本篇文章起源于StackOverflow上一个热度非常高的问题: 我该如何判断一个Python列表是否为空? @Ray Vega (提问者) 举例说明,现在我得到了如下代码: a = [] 我如何该检 ...

  9. Ecplise无法启动“failed to create the JAVA Virtual Machine”

    打开Ecplise时报错:“failed to create the JAVA Virtual Machine”,java配制也没有问题,然后尝试运行eclipsec.exe,报错了另一个信息:“Co ...

  10. GIT 的常见用法

    git init 新建代码库 git clone新建项目 git branch 查看分支 git config 显示配置 git config -e 显示配置文件 git config user.na ...