基于Jquery的练习

最新推荐文章于 2025-07-16 12:56:56 发布

xiaofeixa

最新推荐文章于 2025-07-16 12:56:56 发布

阅读量111

点赞数

分类专栏： javascript 文章标签： jQuery prototype JavaScript CSS HTML ViewUI

javascript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个基于jQuery的DOM操作练习案例，通过自定义基类和派生类的方式实现了元素的创建、属性设置及XML字符串生成等功能，并展示了如何利用jQuery简化JavaScript编程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

慢慢接触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;
})();