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="+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面向对象的更多相关文章
- javascript面向对象的写法及jQuery面向对象的写法
文章由来:jQuery源码学习时的总结 在JS中,一般的面向对象的写法如下: function Cao(){}//定义一个构造函数 Cao.prototype.init = function(){}/ ...
- jQuery面向对象的写法
定义的写法 //构造函数 function test(){ //construct code } //初始化方法 test.prototype.init = function(){ //init co ...
- jquery面向对象写法
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- 4、jQuery面向对象之简单的插件开发
1.alert例子 (function($){ $.alert = function(msg){ window.alert(msg); } $.fn.alert = function(msg){ wi ...
- jQuery源码笔记(二):定义了一些变量和函数 jQuery = function(){}
笔记(二)也分为三部分: 一. 介绍: 注释说明:v2.0.3版本.Sizzle选择器.MIT软件许可注释中的#的信息索引.查询地址(英文版)匿名函数自执行:window参数及undefined参数意 ...
- jquery插件写法
//传统写法 //全局方法 ;(function($){ $.method = function(){ } //or $.obj = { method1:function(){}, method2:f ...
- javascript笔记—面向对象
什么是对象: 对象是一个整体,对外提供一些操作. 什么是面向对象: 使用对象时,只关注对象提供的功能,不关注其内部细节,例如jquery 面向对象是一种通用思想,并非只有编程中能用,任何事情都可以用. ...
- JavaScript面向对象①
什么是对象 对象是一个整体,对外提供一些操作 什么是面向对象 使用对象时,只关注对象提供的功能,不关注其内部细节:比如jQuery 面向对象编程(OOP)的特点(自己理解的特点:把书本上多态放在类继承 ...
- 2014年5月份第3周51Aspx源码发布详情
HGM简单连连看游戏源码 2014-5-19 [VS2010]源码描述:这是一款基于WinForm窗体程序的简单水果连连看的小游戏.界面比较美观, 功能如下:该游戏可以显示当前关卡,还有剩余时间.重 ...
随机推荐
- 老牌激活工具– Microsoft Toolkit 2.4.3 + 详细图文教程【转】
老牌激活工具-- Microsoft Toolkit 2.4.3 + 详细图文教程 windowsToolkit是一个一键激活MS Office 2010的工具.原理就是利用KMS来激活,不是新的激活 ...
- Windows-Windows下使用Linux系统(WSL)
Install Windows Subsystem for Linux (WSL) on on Windows 10 | Microsoft Docs WSL(Windows Subsystem fo ...
- iphone-命令行编译之--xcodebuild
参考 : https://www.cnblogs.com/xiaodao/archive/2012/03/01/2375609.html
- Php单元测试 phpunit & codecept
phpunit: Windows版本 整体上说,在 Windows 下安装 PHAR 和手工在 Windows 下安装 Composer 是一样的过程: 下载链接:http://pan.baidu.c ...
- linux的echo命令整理
linux的echo命令, 在shell编程中极为常用, 在终端下打印变量value的时候也是常常用到的, 因此有必要了解下echo的用法 echo命令的功能是在显示器上显示一段文字,一般起到一个提示 ...
- sqlserver怎么copy一张表为另一张表
SQL Server中,如果目标表存在:insert into 目标表 select * from 原表;SQL Server中,,如果目标表不存在:select * into 目标表 from 原表 ...
- kaggle-制作评分卡
https://blog.csdn.net/zpxcod007/article/details/80118580 制作A卡,申请评分卡 数据集:15万个样本,特征 主要预处理手段:缺失值,异常值,样本 ...
- java中四种访问修饰符区别及详解全过程
客户端程序员:即在其应用中使用数据类型的类消费者,他的目标是收集各种用来实现快速应用开发的类. 类创建者:即创建新数据类型的程序员,目标是构建类. 访问控制存在的原因:a.让客户端程序员无法触及他们不 ...
- centos 7.2 离线安装 gcc
1.查看有没有挂载 centos 7.2 的镜像源文件 2.如果没有就通过服务端挂载 如果不知怎么挂载,就解压CentOS-7-x86_64-DVD-1511.iso 镜像文件,在Packages找到 ...
- CSS3 3D旋转下拉菜单--兼容性不太好
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...