/* 源码作者: 石不易(Louis Shi) 联系方式: http://www.shibuyi.net =================================================================================== 程序名称: JavaScript 封装库 Prototype 版 迭代版本: 无 功能总数: 14 个 功能介绍: 1. 实现代码连缀 2. id / name / tagName / class 节点获取 3. class 选择器添加与移除 4. css 规则添加与移除 5. 设置与获取元素内部文本 6. 设置与获取css 7. 实现 click 事件 */ // 实例化入口 function $() { return new Base(); } // 封装库构造方法 function Base() { this.elements = []; } // 获取id元素节点 Base.prototype.getId = function (id) { this.elements.push(document.getElementById(id)); return this; }; // 获取name元素节点 Base.prototype.getName = function (name, position) { if (typeof position != 'undefined') { // 局部 var nodes = $().getTagName('*', position).elements; for (var i = 0; i < nodes.length; i ++) { if (nodes[i].getAttribute('name') == name) this.elements.push(nodes[i]); } } else { // 全局 var nodes = document.getElementsByName(name); for (var i = 0; i < nodes.length; i ++) { this.elements.push(nodes[i]); } } return this; }; // 获取tagName元素节点 Base.prototype.getTagName = function (tagName, position) { if (typeof position != 'undefined') { // 局部 var nodes = $().getId(position).elements[0].getElementsByTagName(tagName); } else { // 全局 var nodes = document.getElementsByTagName(tagName); } for (var i = 0; i < nodes.length; i ++) { this.elements.push(nodes[i]); } return this; }; // 获取class元素节点 Base.prototype.getClass = function (className, position) { if (typeof position != 'undefined') { // 局部 var nodes = $().getTagName('*', position).elements; } else { // 全局 var nodes = $().getTagName('*').elements; } for (var i = 0; i < nodes.length; i ++) { if (nodes[i].className == className) this.elements.push(nodes[i]); } return this; }; // 获取与设置innerHTML Base.prototype.html = function (text) { if (typeof text != 'undefined') { // 设置 for (var i = 0; i < this.elements.length; i ++) { this.elements[i].innerHTML = text; } } else { // 获取 var html = []; for (var i = 0; i < this.elements.length; i ++) { html.push(this.elements[i].innerHTML); } return html; } return this; }; // 获取与设置CSS Base.prototype.css = function (cssKey, cssValue) { if (typeof cssValue != 'undefined' || cssKey instanceof Array) { // 设置 for (var i = 0; i < this.elements.length; i ++) { if (cssKey instanceof Array) { var _cssKye, _cssValue, _css; for (var j = 0; j < cssKey.length; j ++) { if (cssKey[j].match(/([a-z]+)\s*=\s*([\w#]+)/i) != null) { // ['color=red', 'backgroundColor = green'] _css = cssKey[j].split(/\s*=\s*/); _cssKey = _css[0]; _cssValue = _css[1]; this.elements[i].style[_cssKey] = _cssValue; } } } else { this.elements[i].style[cssKey] = cssValue; } } } else { // 获取 var css = []; for (var i = 0; i < this.elements.length; i ++) { if (typeof window.getComputedStyle != 'undefined') { // W3C css.push(window.getComputedStyle(this.elements[i], null)[cssKey]); } else if (typeof this.elements[i].currentStyle != 'undefined') { // IE 6/7/8 css.push(this.elements[i].currentStyle[cssKey]); } } return css; } return this; }; // 检测class选择器 Base.prototype.hasClass = function (className) { var results = []; for (var i = 0; i < this.elements.length; i ++) { results.push(!!this.elements[i].className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'))); } return results; }; // 添加class选择器 Base.prototype.addClass = function (className) { var space = ''; var results = this.hasClass(className); for (var i = 0; i < results.length; i ++) { if (!results[i]) { if (this.elements[i].className != '') space = ' '; this.elements[i].className += space + className; } } return this; }; // 移除class选择器 Base.prototype.removeClass = function (className) { var results = this.hasClass(className); for (var i = 0; i < results.length; i ++) { if (results[i]) this.elements[i].className = this.elements[i].className.replace(new RegExp('(\\s|^)' + className + '(\\s|$)'), ''); } return this; }; // 添加样式规则Rule Base.prototype.addRule = function (ruleName, ruleText, index, position) { if (typeof index == 'undefined') index = 0; if (typeof position == 'undefined') position = 0; var sheet = document.styleSheets[index]; if (typeof sheet != 'undefined') { if (typeof sheet.insertRule != 'undefined') { // W3C sheet.insertRule(ruleName + ' {' + ruleText + '}', position); } else if (sheet.addRule != 'undefined') { // IE 6/7/8 sheet.addRule(ruleName, ruleText, position); } } return this; }; // 移除样式规则Rule Base.prototype.removeRule = function (index, position) { if (typeof index == 'undefined') index = 0; if (typeof position == 'undefined') position = 0; var sheet = document.styleSheets[index]; if (typeof sheet != 'undefined') { if (typeof sheet.deleteRule != 'undefined') { // W3C sheet.deleteRule(position); } else if (typeof sheet.removeRule != 'undefined') { // IE 6/7/8 sheet.removeRule(position); } } return this; }; // 鼠标 click 事件 Base.prototype.click = function (method) { if (method instanceof Function) { for (var i = 0; i < this.elements.length; i ++) { this.elements[i].onclick = method; } } return this; };
关于 Prototype 原型版核心源码与实例演示的获取请移动至官网下载!
感谢大家积极评测给予意见!
CNBlogs 博客:http://www.cnblogs.com/shibuyi/
CSDN 博客:http://blog.csdn.net/louis_shi/
ITeye 博客:http://shibuyi.iteye.com/
相关推荐
JavaScript,作为一种广泛应用于Web开发的脚本语言,其高级特性如闭包(closures)、原型(prototype)和继承(inheritance)是理解其精髓的关键。本文将深入探讨这些概念,帮助开发者更好地掌握JavaScript的核心。 ...
**JavaScript原型(Prototype)库详解** JavaScript是一种动态类型的编程语言,其灵活性和强大的对象操作能力使其在Web开发中占据重要地位。"Prototype.js"是一个针对JavaScript的开源库,旨在增强和扩展JavaScript的...
Prototype是JavaScript语言的一个扩展库,它为JavaScript提供了一系列强大的面向对象编程工具,使得开发者能够更加高效、优雅地编写JavaScript代码。这个"prototype最新版(很好用)"的压缩包文件包含了一个名为`...
**JavaScript原型库Prototype** Prototype是一个强大的JavaScript类库,它的出现是为了弥补JavaScript在面向对象编程方面的不足,提供了一套丰富的函数和工具,使开发者能够更高效地编写可维护的JavaScript代码。...
`prototype.js`文件可能包含了对JavaScript原型链和继承的进一步封装和扩展。通常,这样的库可能会提供更方便的方式来创建类和实现继承,比如使用类语法糖,以及提供一些额外的功能,如方法重载、私有属性等。 例如...
Prototype JavaScript框架是一个强大的JavaScript库,主要设计用于简化和加速网页应用程序的开发。它引入了许多面向对象编程的概念到JavaScript,使得开发者能够更有效地处理DOM(文档对象模型)操作、事件处理和...
该库的核心特性是其对JavaScript原型(prototype)机制的深入利用,使得JavaScript对象的继承和扩展更为简洁、高效。在"Prototype.js 1.4-1.6[全]"的压缩包中,包含了这个库从1.4到1.6版本的完整集合,这将为我们...
Prototype.js与jQuery、Dojo等其他JavaScript库相比,虽然在某些方面功能可能稍显逊色,但它更注重于提高代码的可读性和可维护性,特别是对于熟悉JavaScript原型机制的开发者来说,Prototype.js的API设计更为直观。...
在压缩包的文件名中,"1.JavaScript String.prototype 原型 - 何鸿涛 - 博客园.url"可能指向一篇关于String.prototype的详细教程,这部分内容会涵盖JavaScript中如何使用和扩展原型链。了解和熟练掌握原型链对于编写...
Prototype是JavaScript库的一个轻量级框架,它为JavaScript语言增加了许多实用功能,提升了开发者的生产力,并简化了DOM操作。 Prototype 1.4版本在当时是非常流行的一个版本,它提供了许多关键特性,如对象扩展、...
《prototype.js源码及PDF文档》是一份宝贵的资源,它包含了一个重要的JavaScript库——Prototype的源代码和相关的PDF文档。Prototype是Web开发中一个广泛使用的开源JavaScript框架,它旨在简化DOM操作,提供强大的...
在JavaScript中,我们通常通过构造函数和原型来实现封装: ```javascript function Person(name, age) { this.name = name; // 公有属性 this.age = age; // 公有属性 } Person.prototype.sayHello = function()...
描述同样为"Prototype1.6中文版文档chm",说明这份文档是针对Prototype 1.6的,主要面向中文用户,旨在帮助开发者理解和使用这个JavaScript库。 **Prototype JavaScript库介绍** Prototype是一个强大的JavaScript...
Prototype.js 是一个广泛使用的JavaScript库,它为JavaScript编程提供了许多实用的功能,极大地简化了DOM操作、事件处理、Ajax交互以及对象扩展等任务。这个压缩包包含的“prototype.js”文件就是Prototype.js的核心...
标题"prototype1.6.0中文chm文档"表明这是一个关于Prototype JavaScript库的中文版1.6.0版本的文档,格式为CHM(Microsoft的 Compiled HTML Help),通常用于存放帮助文档或者API参考。 描述中提到"哥爱的就是免费...
Prototype 引入了类的概念,通过模拟类继承来扩展 JavaScript 的原型链。`Class.create()` 方法允许开发者创建新的类,而 `Object.extend()` 方法则用于对象属性的继承。 3. **DOM 操作** Prototype 提供了一套...
Prototype是JavaScript库,它扩展了JavaScript的基本对象,提供了强大的面向对象编程功能,使得在JavaScript中进行复杂的编程操作变得更加简单。这个“prototype从入门到精通”的教程涵盖了从基础概念到高级特性的...
Prototype是一个强大的JavaScript库,由Sam Stephenson创建,旨在提升JavaScript的开发效率,提供丰富的类和函数扩展,为JavaScript编程带来面向对象的特性。在本手册中,我们将深入探讨Prototype的核心概念、主要...
尽管Prototype在JavaScript社区中曾广受欢迎,但随着ES6的发布和jQuery等其他库的崛起,Prototype的使用逐渐减少。然而,理解其设计理念和用法对于深入理解JavaScript的原型机制和面向对象编程仍然具有一定的价值。...
《prototype.js 1.4版开发手册》是针对JavaScript开发者的重要参考资料,主要聚焦于Prototype JavaScript框架的1.4版本。Prototype是一个广泛使用的开源JavaScript库,它扩展了JavaScript语言,为Web开发提供了强大...