总是听前辈说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)
*/
虚怀若谷,求贤若渴