js封装获取标签处理操作 ,ajax,ready()方法

总是听前辈说JQ性能上不及js,总是告诉我们这些新手要学会js,怀着谦卑的态度去听从谦卑的告诫。

个人总结并封装js  web方面的一些方法,每个操作下面都有对应的操作事例。

//前台调用
var Dom = function() {
	return new dom();
}
// 基础库
function dom() {
	// 创建一个数组,来保存获取的节点和节点数组
	this.elements = [];
}

// 获取ID节点
dom.prototype.getId = function(id) {
	// return document.getElementById(id);
	this.elements.push(document.getElementById(id));
	return this;
};

// 获取元素节点数组
dom.prototype.getTagName = function(tag) {
	var tags = document.getElementsByTagName(tag);
	for (var i = 0; i < tags.length; i++) {
		this.elements.push(tags[i]);
	}
	return this;
};

// 获取CLASS节点数组
dom.prototype.getClass = function(className, idName) {
	var node = null;
	if (arguments.length == 2) {
		node = document.getElementById(idName);
	} else {
		node = document;
	}
	var all = node.getElementsByTagName('*');
	for (var i = 0; i < all.length; i++) {
		if (all[i].className == className) {
			this.elements.push(all[i]);
		}
	}
	return this;
}

// 获取某一个节点
dom.prototype.getElement = function(num) {
	var element = this.elements[num];
	this.elements = [];
	this.elements[0] = element;
	return this;
};

// 设置CSS
dom.prototype.css = function(attr, value) {
	for (var i = 0; i < this.elements.length; i++) {
		if (arguments.length == 1) {
			if (typeof window.getComputedStyle != 'undefined') {// W3C
				return window.getComputedStyle(this.elements[i], null)[attr];
			} else if (typeof this.elements[i].currentStyle != 'undeinfed') {// IE
				return this.elements[i].currentStyle[attr];
			}
		}
		this.elements[i].style[attr] = value;
	}
	return this;
}

// 添加Class
dom.prototype.addClass = function(className) {
	for (var i = 0; i < this.elements.length; i++) {
		if (!this.elements[i].className.match(new RegExp('(\\s|^)' + className
				+ '(\\s|$)'))) {
			this.elements[i].className += ' ' + className;
		}
	}
	return this;
}

// 移除Class
dom.prototype.removeClass = function(className) {
	for (var i = 0; i < this.elements.length; i++) {
		if (this.elements[i].className.match(new RegExp('(\\s|^)' + className
				+ '(\\s|$)'))) {
			this.elements[i].className = this.elements[i].className.replace(
					new RegExp('(\\s|^)' + className + '(\\s|$)'), ' ');
		}
	}
	return this;
}

// 添加link或style的CSS规则
dom.prototype.addRule = function(num, selectorText, cssText, position) {
	var sheet = document.styleSheets[num];
	if (typeof sheet.insertRule != 'undefined') {// W3C
		sheet.insertRule(selectorText + '{' + cssText + '}', position);
	} else if (typeof sheet.addRule != 'undefined') {// IE
		sheet.addRule(selectorText, cssText, position);
	}
	return this;
}

// 移除link或style的CSS规则
dom.prototype.removeRule = function(num, index) {
	var sheet = document.styleSheets[num];
	if (typeof sheet.deleteRule != 'undefined') {// W3C
		sheet.deleteRule(index);
	} else if (typeof sheet.removeRule != 'undefined') {// IE
		sheet.removeRule(index);
	}
	return this;
}

// 设置innerHTML
dom.prototype.html = function(str) {
	for (var i = 0; i < this.elements.length; i++) {
		if (arguments.length == 0) {
			return this.elements[i].innerHTML;
		}
		this.elements[i].innerHTML = str;
	}
	return this;
}
// 设置textContent
dom.prototype.text = function(text) {
	for (var i = 0; i < elements.length; i++) {
		// 当只有一个element
		if (elements.length == 0) {
			if (document.textContent) {
				return this.elements[i].textContent = text;
			} else {
				return this.elements[i].innerText = text;
			}
		}
		if (document.textContent) {
			this.elements[i].textContent = text;
		} else {
			this.elements[i].innerText = text;
		}
		return this;
	}
}
dom.prototype.addEvent=function(vartype,eventFunc){
		if (document.attachEvent) {
			if (this.elements.lengh) {
				for (var i = 0, ii = elements.lengh; i < ii; i++)
					this.elements[i].attach('on' + vartype, eventFunc);
			} else {
				this.elements[0].attachEvent('on' + vartype, eventFunc);
			}
		} else {
			if (this.elements.lengh) {
				for (var i = 0, ii = elements.lengh; i < ii; i++)
					this.elements[i].addEventListener(vartype, eventFunc,
							false);
			} else {
				this.elements[0].addEventListener(vartype, eventFunc, false);
			}
		}
}
dom.prototype.removeEvent=function(vartype,eventFunc){
	if (document.attachEvent) {
		if (this.elements.lengh) {
			for (var i = 0, ii = elements.lengh; i < ii; i++)
				this.elements[i].detachEvent('on' + vartype, this.eventFunc);
		} else {
			this.elements[0].detachEvent('on' + vartype, this.eventFunc);
		}
	} else {
		if (this.elements.lengh) {
			for (var i = 0, ii = elements.lengh; i < ii; i++)
				this.elements[i].removeEventListener(vartype, this.eventFunc,
						false);
		} else {
			this.elements[0].removeEventListener(vartype, this.eventFunc, false);
		}
	}
}

/**
 * 以上是跟获取id class等后进行相关操作有关
 * 使用方法:先获取对应id或者class等标签,例如获取id绑定事件  Dom().getId().addEvent("click",func);必须先获取id ,class等标签
 */


function AjaxClass() {
	var XmlHttp = false;
	try {
		XmlHttp = new XMLHttpRequest(); // FireFox专有
	} catch (e) {
		try {
			XmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
		} catch (e2) {
			try {
				XmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e3) {
				alert("你的浏览器不支持XMLHTTP对象,请升级到IE6以上版本!");
				XmlHttp = false;
			}
		}
	}
	var me = this;
	this.Method = "POST";
	this.Url = "";
	this.Async = true;
	this.Arg = "";
	this.CallBack = function() {
	};
	// this.Loading = function(){};

	this.Send = function() {
		if (this.Url == "") {
			return false;
		}
		if (!XmlHttp) {
			return IframePost();
		}

		XmlHttp.open(this.Method, this.Url, this.Async);
		if (this.Method == "POST") {
			XmlHttp.setRequestHeader("Content-Type",
					"application/x-www-form-urlencoded");
		}
		XmlHttp.onreadystatechange = function() {
			if (XmlHttp.readyState == 4) {
				var Result = false;
				if (XmlHttp.status == 200) {
					Result = XmlHttp.responseText;
				}
				XmlHttp = null;

				me.CallBack(Result);
			} else {
				me.Loading();
			}
		}
		if (this.Method == "POST") {
			XmlHttp.send(this.Arg);
		} else {
			XmlHttp.send(null);
		}
	}

	// Iframe方式提交
	function IframePost() {
		var Num = 0;
		var obj = document.createElement("iframe");
		obj.attachEvent("onload", function() {
			me.CallBack(obj.contentWindow.document.body.innerHTML);
			obj.removeNode()
		});
		obj.attachEvent("onreadystatechange", function() {
			if (Num >= 5) {
				alert(false);
				obj.removeNode()
			}
		});
		obj.src = me.Url;
		obj.style.display = 'none';
		document.body.appendChild(obj);
	}
}

/*----------------------------调用方法------------------------------
 var Ajax = new AjaxClass();			// 创建AJAX对象
 Ajax.Method = "POST"; 				// 设置请求方式为POST
 Ajax.Url = "default.asp"			// URL为default.asp
 Ajax.Async = true;					// 是否异步
 Ajax.Arg = "a=1&b=2";				// POST的参数
 Ajax.Loading = function(){			//等待函数
 document.write("loading...");
 }
 Ajax.CallBack = function(str)       // 回调函数
 {
 document.write(str);
 }
 Ajax.Send();            			// 发送请求
 -----------------------------------------------------------
 var Ajax = new AjaxClass();			// 创建AJAX对象
 Ajax.Method = "GET"; 				// 设置请求方式为POST
 Ajax.Url = "default.asp?a=1&b=2"	// URL为default.asp
 Ajax.Async = true;					// 是否异步
 Ajax.Loading = function(){			//等待函数
 document.write("loading...");
 }
 Ajax.CallBack = function(str)       // 回调函数
 {
 document.write(str);
 }
 Ajax.Send();           				// 发送请求
 --------------------------------------------------------------------*/

var doReady = (function() {
	var funcs = [];// 当获得事件要运行的函数
	var ready = false;// 触发事件处理程序时,切换为true
	function handler(e) {
		// 注销时间 避免反复触发事件
		if (ready)
			return;
		// 如果发生onreadystatechange事件,但其状态不是complete的话,那么文档尚未准备好
		if (e.type === "readystatechange" && document.readyState !== "complete")
			return;
		// 运行所有的注册函数
		for (var i = 0; i < funcs.length; i++) {
			funcs[i].call(document);
		}
		// 如果事件全部执行完,切换为read状态,并移除所有函数
		ready = true;
		funcs = null;
	}
	// 为接受到的事件处理注册函数
	if (document.addEventListener) {// 兼容Ie
		document.addEventListener("DOMContentLoaded", handler, false);
		document.addEventListener("readystatechange", handler, false);
		window.addEventListener("load", handler, false);
	} else if (document.attachEvent) {// ie
		document.attachEvent("onreadystatechange", handler);
		window.attachEvent("load", handler);
	}
	// 返回whenReady()函数
	return function doReady(loadFunction) {
		if (ready)
			loadFunction .call(document);
		else
			funcs.push(loadFunction);
	}
}())
/**
 * 加载方法 doReady(varObj)
 */


                                                                                                    虚怀若谷,求贤若渴

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值