`

jquery_js_oop

阅读更多
/**
 * 定义函数的方式定义类
 */
function persion() {
	// 类成员的定义与构造函数
	this.age = 123;
}

// 实例化persion对象
var p = new persion();

// //获取属性的两种方式
// alert(p["age"]);
// alert(p.age);

// 动态添加,修改,删除对象的属性和方法

// 添加属性
p.sex = "male";
// alert(p.sex);

// 添加方法
p.getSex = function() {
	return this.sex;
}
// alert(p.getSex());

// 修改属性
p.sex = "female";
// alert(p.sex);

// 删除属性
p.sex = undefined;
// alert(p.sex);

// 删除方法
p.getSex = undefined;
// alert(p.getSex());

// ---------------------------------------------------

/**
 * 使用{}的语法创建无类型对象
 */
// 定义一个空对象
var obj = {};

var man = {
	
	name : "fy",// 定义了name属性,初始化为fy
	
	favoriteColor : ['black', 'red', 'green'],
	
	sayHello : function() {// 定义了方法sayHello
		alert("hello world!!");
	}
};

//调用man的sayHello方法
//man.sayHello();

// ---------------------------------------------------

/**
 * protoType原型对象
 */
 
 //定义一个空对象
function woman(){
//empty
} 

//对类的prototype对象进行修改,增加方法getSex();
woman.prototype.getSex = function(){
	alert("I'm a woman");
};

//实例化woman类
var w = new woman();
//w.getSex();

// ---------------------------------------------------

/**
 * 实现类的私有成员
 */
function boy(){
	var pp = "peope are private";//私有属性成员pp
	function pm(){//私有方法成员pm
		alert(pp);
	}
	this.getPp = function(){
		//在公有成员中改变私有属性的值
		pp = "peope are private???";
	},
	this.getPm = function(){
		//在公有属性中调用私有方法
		pm();
	};
}

//实例化boy类
var boy = new boy();
//boy.getPm();
//boy.getPp();
//boy.getPm();


// ---------------------------------------------------

/**
 * 实现静态成员
 */
 
 function girl(){
 }
 
 //静态属性
 girl.staticProperty = "class level";
 
 //静态方法
 girl.staticMethod = function(){
	 alert("static method!!!");
 };
 
 //调用静态属性与方法
// alert(girl.staticProperty);
// girl.staticMethod();

 
// ---------------------------------------------------
 
/**
 *使用for(..in..)实现反射机制
 */

 //样式对象
 var style = {
 color:'#FF0000',
 backgroundColor:'#0000FF',
 borderWidth:'2px'
 };
 
 
 function setStyle(_style){
 	//得到改变样式的界面对象
 	var element = getElement();
 	//element.style = _style;
 	for(var p in _style){
 		element.style[p] = _style[p];
 	}
 }
 
 
 function getElement(){
 	return document.getElementById("aa");
 }
 //setStyle(style);
 
 
// ---------------------------------------------------
 
/**
 * 利用共享prototype实现继承
 */
function father(){
	
}

father.prototype = {
m1 : function(){
	alert(1);
}
};


function child(){
}

//让child继承father
child.prototype = father.prototype;

child.prototype.method = function(){
	alert("2");
};

var f = new father();

var c = new child();

//f.method();
//c.method();

// ---------------------------------------------------

/**
 * 利用反射机制和prototype实现继承
 */
 function father1(){
 
 }
 
 father1.prototype = {
 
 	method1:function(){
 	alert(1);
 	},
 	method2:function(){
 	alert(2);
 	}
 };
 
 function child1(){
 }
 
 //让child1继承father1
 for(var p in father1.prototype){
 
 	child1.prototype[p] = father1.prototype[p];
 }
 
 //覆盖定义father1中的method1方法
 child1.prototype.method = function(){
	 alert(11);
 };
 
 //创建两个类的实例
 var f1 = new father1();
 var c1 = new child1();
 //分别调用两个类的method1方法
// f1.method1();
// c1.method();
 
 
 // ---------------------------------------------------
 /**
 * 简化版的利用反射机制和prototype实现继承
 */
 function father2(){
 
 }
 
 //为类添加静态方法inherit表示继承与某类
 Function.prototype.inherit = function(baseClass){
 	for(var p in baseClass){
 		this.prototype[p] = baseClass.prototype[p];
 	}
 }
 
 father2.prototype = {
 
 	method1:function(){
 	alert(1);
 	},
 	method2:function(){
 	alert(2);
 	}
 };
 
 function child2(){
 }
 
 //让child1继承father1
// for(var p in father2.prototype){
// 
// 	child2.prototype[p] = father2.prototype[p];
// }
child2.inherit(father2);
 
 //覆盖定义father1中的method1方法
 child2.prototype.method = function(){
	 alert(11);
 };
 
 //创建两个类的实例
 var f2 = new father2();
 var c2 = new child2();
 //分别调用两个类的method1方法
 f2.method1();
 c2.method();
 

 

分享到:
评论

相关推荐

    oop与javascript

    通过对jQuery的分析,我们可以看到OOP在JavaScript中的应用。jQuery利用了JavaScript的原型继承和动态语言特性,实现了强大的DOM操作功能。同时,它也展示了如何在JavaScript中实现面向对象编程的最佳实践,比如封装...

    jQuery_CrudOOP:没有重新加载页面的 CRUD

    - "jQuery_CrudOOP-master"压缩包可能包含HTML、CSS、JavaScript文件,以及可能的服务器端脚本(如PHP或Node.js),它们共同协作完成无刷新CRUD操作。 - HTML文件用于定义用户界面;CSS用于样式设计;JavaScript...

    Sistema_Ajax_PHP_POO_MySQL_Jquery_Ajax:Sistema de venta Web con PHP 7,Ajax,Jquery和MySQL

    - js/: 存放JavaScript和jQuery脚本,处理客户端逻辑。 - includes/: 可能包含了数据库连接文件、函数库等。 - classes/: 面向对象编程的类文件,如User.class.php、Product.class.php等。 - controllers/: 控制器...

    JavaScript OOP 课程库.zip

    JavaScript OOP 课程库JavaScript 面向对象编程Telerik Academy的JavaScript OOP课程库JavaScript OOP是关于构建低级用户界面的。本课程涵盖 DOM、jQuery、事件、使用 HTML5 Canvas 和模板的图形和动画等主题课程...

    form_builder:jQuery OOP、jQuery UI、CKEditor、基于 Ajax 的表单构建应用程序

    1. `js` 文件夹:存放JavaScript代码,可能包括主应用脚本、jQuery插件、CKEditor配置等。 2. `css` 文件夹:存放CSS样式文件,用于定义表单构建器的外观和布局。 3. `images` 或 `img` 文件夹:存储图标和其他图像...

    JQuery高级编程之面向对象.rar

    在JavaScript的世界里,jQuery是一个非常流行的库,它极大地简化了DOM操作、事件处理以及Ajax交互。本教程将深入探讨jQuery的面向对象编程,这是在实际项目中提高代码组织性和可维护性的重要技能。 面向对象编程...

    the_newsroom:基于 jQuery OOP、Ajax 和 YQL 的新闻应用

    5. `scripts.js`: 主要的 JavaScript 代码,这里包含了利用 jQuery OOP 实现的新闻应用逻辑,以及使用 Ajax 和 YQL 获取数据的函数。 6. `README.md`: 项目介绍和使用指南,通常包括如何运行项目、依赖项和许可信息...

    JQuery 图片延迟加载并等比缩放插件

    最近在学习JS的OOP所以写了这么个东西 使用方法: $(“.viewArea img”).zoom({height:74,width:103}); 效果演示: http://demo.jb51.net/html/jquery_img/jquery_img.htm代码: 代码如下: (function($){ $.fn.zoom ...

    jquery采用oop模式class类的使用示例

    标题中的“jquery采用oop模式class类的使用示例”指的是将jQuery与JavaScript的面向对象特性结合,通过创建自定义类来管理jQuery的功能。这通常涉及到以下概念: 1. **构造函数**:在JavaScript中,类实际上是一个...

    jQuery版图书馆管理系统

    6、利用母板页技术及JSOOP思想实现书架信息管理(1) 7、利用母板页技术及JSOOP思想实现书架信息管理(2) 8、系统管理-权限设置 9、实现读者管理-读者类型管理 10、实现图书管理-图书类型管理 11、实现读者管理-...

    HTML+Java+JavaOOP+JQuery+JSP+Hibernate+Spring+Struts+人事面试

    JQuery是一款强大的JavaScript库,简化了DOM操作、事件处理和Ajax交互。熟悉JQuery的基本选择器、DOM操作方法(如`.append()`、`.remove()`)以及动画效果(如`.fadeIn()`)是必备技能。 JSP(JavaServer Pages)是...

    clases_JS:JavaScript的分类

    8. **框架与库**:React、Vue、Angular等JavaScript框架和jQuery等库,简化了开发流程,提供了丰富的功能,如虚拟DOM、组件化、动画处理等。 9. **错误处理**:了解如何正确地捕获和处理错误,是编写健壮代码的关键...

    JQuery版图书馆管理系统功能演示

    6、利用母板页技术及JSOOP思想实现书架信息管理(1) 7、利用母板页技术及JSOOP思想实现书架信息管理(2) 8、系统管理-权限设置 9、实现读者管理-读者类型管理 10、实现图书管理-图书类型管理 11、实现读者管理-读者...

    面向对象,JQuery,javascript,java基础,mybatis的接口开发的思维导图

    总的来说,这个思维导图涵盖了从基础的编程概念(面向对象、Java基础)到实际开发中常用的工具(JavaScript、jQuery)以及数据库操作框架(MyBatis的Mapper接口开发)。对于初学者或者希望巩固基础知识的开发者来说...

    LocalWeather:单页应用显示本地天气——HTML5、JS OOP、jQuery、AJAX、CSS3

    《构建LocalWeather单页应用:HTML5、JS OOP、jQuery、AJAX与CSS3的融合》 在当今的Web开发领域,构建交互性强、用户体验优秀的单页应用程序(SPA)已经成为一种趋势。本项目“LocalWeather”正是这样一个例子,它...

    JQuery版图书馆管理系统功能演示--附系统源码

    6、利用母板页技术及JSOOP思想实现书架信息管理(1) 7、利用母板页技术及JSOOP思想实现书架信息管理(2) 8、系统管理-权限设置 9、实现读者管理-读者类型管理 10、实现图书管理-图书类型管理 11、实现读者管理-读者...

    Jquery基于面向对象无缝滚动广告

    面向对象编程(Object-Oriented Programming, OOP)是一种编程范式,通过封装、继承和多态性来组织代码。在JavaScript中,我们可以使用构造函数和原型来实现面向对象。在创建滚动广告时,我们可以定义一个广告对象,...

    jQuery库文件及说明

    jQuery是一个广泛应用于Web开发的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。jQuery的设计目标是"写得更少,做得更多",它通过一个简洁的API使得开发者能够快速地编写出高效...

Global site tag (gtag.js) - Google Analytics