慢慢接触javascript,javascript是如此的灵活,也越发决得学习javascript很有乐趣.闭包,上下文等等其实真正要学好javascript也不容易,最近学习了一下Jquery下面是一个基于Jquery的练习,希望和大家一起交流。
/**
* @author: xaofeixa
* @date: 2008-04-03
* @purpse: 练习基类
*/
// 命名空间
xaofeixa = window.xaofeixa || {};
(function() {
var BaseObject = function(options) {
//初始化 生成成员的get set方法
BaseObject.prototype.init(this, options);
};
xaofeixa.BaseObject = BaseObject;
BaseObject.prototype = {
action : function(who) {
var propertys = new Array();
for (pro in who) {
if (typeof(who[pro]) != "function") {
propertys[propertys.length] = pro;
}
}
for (i in propertys) {
(function() {
var property = propertys[i];
property = property.charAt(0).toUpperCase()
+ property.substring(1, property.length);
var propertyValue = who[propertys[i]];
who["get" + property] = function() {
return propertyValue;
};
who["set" + property] = function(value) {
propertyValue = value;
};
})();
}
},
init : function(_this, options) {
var who = _this ? _this : this;
if (options) {
/*
* $.each(options, function(optionName, optionValue) {
* _this[optionName] = optionValue; });
*/
$.extend(who, options);
}
this.action(who);
}
};
})();
/**
* @author: xaofeixa
* @date: 2008-04-03
* @purpse: test person
*
*/
(function() {
var Person = function(options) {
Person.prototype.init(this, options);
};
xaofeixa.Person = Person;
$.extend(Person.prototype, xaofeixa.BaseObject.prototype);
})();
/**
* @author: xaofeixa
* @date: 2008-04-03
* @purpse: DOM操作
*/
(function() {
var trim = function(str) {
if (!str) {
str = "";
}
return str;
}
// ///////////////////////////
var Document = function(options) {
Document.prototype.init(this, options);
}
$.extend(Document.prototype, xaofeixa.BaseObject.prototype);
Document.createDocument = function() {
var root = new Element("xml");
return root;
};
xaofeixa.Document = Document;
// //////////////////////////
var Element = function(elementName, text, options) {
this.elementName = elementName;
this.text = text;
this.parentElement = null;
this.sonElements = new Array();
this.attributes = new Array();
Element.prototype.init(this, options);
};
$.extend(Element.prototype, xaofeixa.BaseObject.prototype, {
setElementName : function(elementName) {
this.elementName = elementName;
},
getElementName : function() {
return this.elementName;
},
setText : function(text) {
this.text = text;
},
getText : function() {
return trim(this.text);
},
addElement : function(elementName, text) {
if (!elementName) {
return this;
}
var element = new Element(elementName, text);
element.parentElement = this;
this.sonElements[this.sonElements.length] = element;
return element;
},
removeElement : function() {
},
addAttribute : function(attributeName, attributeValue, options) {
var _options = null;
var _this = this;
if (typeof(attributeName) != "object") {
var attribute = new Attribute(attributeName, attributeValue);
_this.attributes[_this.attributes.length] = attribute;
} else {
_options = attributeName;
}
if (options) {
_options = options;
}
if (_options) {
$.each(_options, function(attributeName, attributeValue) {
var attribute = new Attribute(attributeName, attributeValue);
_this.attributes[_this.attributes.length] = attribute;
});
}
return _this;
},
removeAttribute : function() {
},
getXmlStr : function() {
var xmlStr = "<" + this.getElementName();
// attribute
var attributes = this.attributes;
for (var i = 0; i < attributes.length; i++) {
xmlStr += " " + attributes[i].getAttributeName() + "=\""
+ attributes[i].getAttributeValue() + "\"";
}
xmlStr += ">" + this.getText();
var sonElements = this.sonElements;
for (var i = 0; i < sonElements.length; i++) {
xmlStr += this.getXmlStr.apply(sonElements[i]);
}
xmlStr += "</" + this.getElementName() + ">";
return xmlStr;
},
getSonElement : function(index) {
var _index = index || 0;
var sonCounts = this.sonElements.length;
if (_index >= sonCounts) {
return null;
} else {
return this.sonElements[_index];
}
}
});
xaofeixa.Element = Element;
// ////////////////////////////////////////////////
var Attribute = function(attributeName, attributeValue) {
this.attributeName = attributeName;
this.attributeValue = attributeValue;
Attribute.prototype.init(this);
};
$.extend(Attribute.prototype, xaofeixa.BaseObject.prototype);
})();
/**
* @author: xaofeixa
* @date: 2008-04-03
* @purpse: 日志
*
*/
(function() {
var Log = function() {
Log.prototype.init(null, {
logLevel : "INFO,ERROR"
});
return Log.prototype.initLog();
};
$.extend(Log.prototype, xaofeixa.BaseObject.prototype, {
initLog : function() {
var logConsole = new xaofeixa.Element("div");
logConsole.addAttribute({
id : "console",
'class':"console"
});
var aDate = new Date();
var time = aDate.getFullYear() + '-' + aDate.getMonth() + '-'
+ aDate.getDate() + ' ' + aDate.getHours() + ':'
+ aDate.getMinutes();
logConsole.setText("Star Log system time is:" + time);
//logConsole.addAttribute("class","console");
$(logConsole.getXmlStr()).appendTo($('body'));
this.docWidth = document.body.clientWidth;
this.docHeight = document.body.clientHeight;
$("#console").css("top",document.body.clientHeight-$("#console").height());
return this;
},
info : function(message) {
if (this.logLevel.indexOf("INFO") != -1) {
var aDate = new Date();
var time = aDate.getFullYear() + '-' + aDate.getMonth() + '-'
+ aDate.getDate() + ' ' + aDate.getHours() + ':'
+ aDate.getMinutes();
message = time + "[info]: " + message;
$("#console").html($("#console").html() + "<br/>" + message);
}
},
error : function(message) {
if (this.logLevel.indexOf("ERROR") != -1) {
var aDate = new Date();
var time = aDate.getFullYear() + '-' + aDate.getMonth() + '-'
+ aDate.getDate() + ' ' + aDate.getHours() + ':'
+ aDate.getMinutes();
message = time + "[error]: " + message;
$("#console").html($("#console").html() + "<br/>" + message);
}
}
});
xaofeixa.Log = Log;
})();
分享到:
- 2008-06-06 14:24
- 浏览 1018
- 评论(1)
- 论坛回复 / 浏览 (0 / 3026)
- 查看更多
相关推荐
自己写的一个练习,基于jquery的表单验证控件,主要功能都有,但不很完整. 用法是在需要验证的input标签里加 validate 属性,内容是JSON格式的 比较简单,大家有需要可以拿去免费送,欢迎评论. 这个链接有图片效果和主要...
传智播客赵君老师视频讲解:基于jquery的ajax案例和练习.
1. **jQuery选择器**:jQuery的选择器基于CSS,它提供了更丰富的选择元素的方式,如`$("#id")`用于选取ID为指定值的元素,`$(".class")`用于选取所有具有特定类名的元素,`$("tag")`用于选取特定标签的所有元素。...
本练习旨在帮助你熟悉并掌握jQuery的基本用法,包括选择器、事件、文档处理、函数以及属性的运用。 首先,让我们详细探讨jQuery的选择器。jQuery的选择器基于CSS选择器,允许你高效地选取DOM元素。例如,`$("#id")`...
本篇将基于jQuery的实践题目,深入理解其核心概念和常用方法。 1. **选择器**: jQuery的核心在于它的选择器,能够方便地选取DOM元素。例如,`$("#id")`选择ID为指定ID的元素,`$(".class")`选择所有类名为指定类的...
在"js练习,jquery练习 购物车.zip"这个压缩包中,我们可以期待找到一个基于 JavaScript 和 jQuery 的购物车应用的源代码。购物车功能是电商网站的核心部分,它涉及到商品的添加、删除、数量增减以及总价计算等多个...
标题中的“Jquery练习-包含JQUERY1.4.2的js库”指向的是一个学习资源,特别关注于jQuery 1.4.2版本的实践应用。这个版本在2010年发布,虽然不是最新版,但对于初学者来说,它仍然是理解jQuery核心概念的好起点。** ...
在"js 小项目练习,jQuery 小例子"中,我们可以看到几个基于jQuery实现的常见功能: 1. **菜单**:jQuery可以轻松地创建动态菜单,包括下拉菜单、滑动菜单等。通过监听用户的鼠标事件,如hover(悬停)和click...
【基于Jquery编写的背单词app】是一款专为学习者设计的应用程序,它利用JavaScript库Jquery的强大功能,提供了一种高效且用户友好的方式来记忆英语单词。Jquery简化了DOM操作,使得开发者能够轻松地实现页面元素的...
在这个"jQuery练习集合"中,我们将会探讨一系列与jQuery相关的实践案例,包括但不限于节点操作、链式编程、选择器以及属性选择等核心概念。** 1. **节点遍历**:在jQuery中,遍历DOM元素是常见的任务。例如,`...
在IT行业中,jQuery UI是一个非常重要的前端开发库,它基于jQuery JavaScript库,提供了丰富的用户界面组件和交互效果。本篇文章将深入探讨jQuery UI的核心概念、主要功能以及如何进行实践学习。 首先,jQuery UI是...
JavaScript 是一种轻量级的脚本语言,主要用于客户端的交互和动态效果实现,而 jQuery 是一个基于 JavaScript 的库,它简化了 JavaScript 的使用,使得操作 DOM(Document Object Model)、事件处理、动画制作以及 ...
【标题】"基于jQuery的学校网站设计与实现" 涉及到的主要知识点是使用jQuery这一JavaScript库来构建一个高效、交互性强的学校网站。jQuery是JavaScript的一个轻量级库,它极大地简化了DOM操作、事件处理、动画制作...
jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列轻量级、易用的组件,帮助开发者快速构建用户界面。在本项目中,我们看到的"JqueryEasyui使用练习"是为了熟悉并掌握这个框架而进行的一些实践操作。下面...
【标题】:“基于jQuery实现的分类选择座椅产品展示效果源码” 这个压缩包包含的是一个使用jQuery库开发的示例项目,旨在展示如何通过交互式界面来实现座椅产品的分类选择和展示效果。jQuery是一个广泛应用于网页...
【标题】"精选_基于Jquery实现的打地鼠小游戏_源码打包"指的是一个使用JavaScript库jQuery开发的打地鼠游戏的源代码集合。这个项目可能是为了教学目的或者作为前端开发者练习技能的一个实例。 【描述】"基于Jquery...
它基于 jQuery 库,简化了在移动设备上创建响应式、触摸友好的网页的流程。本项目是针对初学者的一个实践教程,旨在帮助开发者快速掌握 jQuery Mobile 的基本用法。 ### 一、jQuery Mobile 概述 1. **基础结构**:...
《基于jQuery实现扑克牌读心术游戏源码》是一款利用JavaScript库jQuery开发的互动小游戏,旨在展示前端技术在游戏开发中的应用。这个游戏的核心是通过用户的交互和JavaScript的动态计算,模拟一种“读心术”,让玩家...
jQuery的选择器是基于CSS选择器的,但更加强大,例如,`$(':hover')`选择当前被鼠标悬停的元素,`$('input[type="text"]')`则选取所有输入类型的文本框。然而,`moreSelectors`插件则进一步扩展了这些功能,可能包括...
《jQuery键盘打字练习游戏代码》是一个基于JavaScript库jQuery实现的互动打字练习应用。这个项目旨在帮助用户提升打字速度和准确性,采用游戏化的方式让学习过程更加有趣。通过这款应用,用户可以在一个模拟的键盘...