从基础开始建立一个JS代码库第1/2页

由于后台程序会过滤掉单引号，所以有些地方如果出现莫民奇妙的空格，就表示单引号，特此说明。 /** * @author Super Sha * QQ:770104121 * Email:supersha@foxmail.com * All Rights Reserved! */ (function(){ //原创 function $(s){ if (!s) return false; return s.constructor == String ? document.getElementById(s) : s; } window.$ = $; })(); (function(){ //匿名封装函数并自执行，在这个函数内定义的函数或者变量可以通用，函数外不可以访问，除非你声明在命名空间下 if (!window.Susa) window[ Susa ] = {}; //声明Susa命名空间 /* * 得到元素的引用 */ function $(){ var elems = new Array(); for (var i = 0; i < arguments.length; i++) { var elem = arguments[i]; if (typeof arguments[i] == "string") { //进行类型检查 elem = document.getElementById(arguments[i]); } //这里具有双关的含义：如果传入的是字符串并且只有一个参数，或者传入的是DOM引用，都返回DOM节点引用 if (arguments.length == 1) { return elem; } else { elems.push(elem); } } return elems; } window[ Susa ][ $ ] = $; /* * 返回特定元素内的子元素，或者是document */ function tag(type, elem){ elem = elem || document; type = type || "*"; //如果没有参数，则返回文档的全部元素的引用 return elem.getElementsByTagName(type); } window[ Susa ][ tag ] = tag; /* * 返回输入框的值 */ function value(id){ var elem = $(id); //调用匿名函数内定义的方法 if (elem != null && (elem.nodeName == INPUT || elem.nodeName == TEXTAREA )) { return elem.value; } } window[ Susa ][ value ] = value; /* * 可以快速连接字符串的StringBuilder对象 //(原创) */ var StringBuilder = { _arr: new Array, append: function(str){ if (typeof str == "string") { this._arr.push(str); } return this; }, toString: function(){ if (this._arr.length != 0) { var strs = this._arr.join( , ); this._arr = []; //解决返回重复添加的技巧 return strs; } else { return null; } } } //function appendString(){ // for(var i=0;i<3;i++){ // StringBuilder.append("test"); // } // return StringBuilder.toString(); //} //window[ Susa ][ str ]=appendString; /* * addEvent和romoveEvent方法 */ function addEvent(elem, type, fn){ if (elem != $(elem) || elem == null) return false; if (type == null || fn == null) return false; if (elem.addEventListener) { //W3C的方法 elem.addEventListener(type, fn, false); return true; } else if (elem.attachEvent) {// IE的方法 //node[ e +type+fn]=fn; ///node[type+fn]=function(){ // node[ e +type+fn](window.event); //不知道为什么要这样 //} //node.attachEvent( on +type,node[type+fn]); //return this; elem.attachEvent( on + type, function(){ fn.call(elem) }); //注意：在这里用一个匿名函数来防止IE中this对象的指向错误的情况 return this; } else { elem["on" + type] = function(){ fn.call(elem) }; } } function removeEvent(elem, type, fn){ if (elem != $(elem) || elem == null) return false; if (type == null || fn == null) return false; if (elem.removeEventListener) {//W3C的方法 elem.removeEventListener(type, fn, false); return true; } else if (elem.detachEvent) // IE的方法 { //node.detachEvent( on +type,node[type+fn]); elem.detachEvent( on + type, fn); return this; } } window[ Susa ][ addEvent ] = addEvent; window[ Susa ][ removeEvent ] = removeEvent; /* * getElementsByClassName方法返回符合某个特定类的全部的元素的引用,tag和elem参数都是可选的 */ function getElementsByClassName(classname, tag, elem){ elem = elem || document; if (elem != $(elem) || elem == null) return false; //注意这个函数的parent.all的用法，它是用于确认parent是否是document的,并且区分了IE和Mozilia if (!tag) tag = "*"; var allTags = (tag == * && elem.all) ? elem.all : elem.getElementsByTagName(tag); //创建一个正则，来检测是否包含指定的类名 classname = classname.replace(/-/g, "\-"); var regex = new RegExp("(^|\s*)" + classname + "(\s*|$)"); var matchElements = new Array(); var elem; for (var i = 0; i < allTags.length; i++) { elem = allTags[i]; if (regex.test(elem.className)) { //根据正则来检测类名 matchElements.push(elem); } } return matchElements; } window[ Susa ][ getElementsByClassName ] = getElementsByClassName; /* * toggleDisplay方法,切换HTML标签的可见性 */ function toggleDisplay(id, value){ var elem = $(id); if (elem != $(elem) || elem == null || elem.nodeType != 1) return false; if (elem.style.display != "none") { elem.style.display = "none"; } else { elem.style.display = value || ; } return true; } window[ Susa ]["toggleDisplay"] = toggleDisplay; /* * insertAfter方法 */ function insertAfter(node, referenceNode){ if (node != $(node) || node == null) return false; if (referenceNode != $(referenceNode) || referenceNode == null) return false; return referenceNode.parentNode.insertBefore(node, referenceNode.nextSibling); //注意使用insertBefore方法，如果第二个参数 } //为null，则插入到parentNode的最末尾 window[ Susa ][ insertAfter ] = insertAfter; /* * removeChildren方法,删除当前节点下的所有的子元素 */ function removeChildren(parent){ if (parent != $(node) || parent == null) return false; while (parent.firstChild) { //循环删除节点 parent.firstChild.parentNode.removeChild(node.firstChild); } return parent; } window[ Susa ][ removeChildren ] = removeChildren; /* * prependChild方法,把选择的节点插入到当前节点的最前面 */ function prependChild(parent, newNode){ if (parent != $(parent) || parent == null) return false; if (newNode != $(newNode) || newNode == null) return false; if (parent.firstChild) { //判断时候有子函数 parent.insertBefore(newNode, parent.firstChild); } else { parent.appendChild(newNode); } return parent; } window[ Susa ][ prependChild ] = prependChild; /* * bindFunction()方法，用于调整this的执行环境 */ function adjustFunc(obj, func){ //把func的执行环境调整到obj上来 return function(){ //返回匿名函数的引用 func.apply(obj, arguments); }; } window[ Susa ][ adjustFunc ] = adjustFunc; /* * 获取显示窗口的width和height,返回一个包含width和height属性的的对象,不公开，只在本匿名函数内供其他方法调用 */ function getBrowserWindowSize(){ var de = document.documentElement; //获取根节点 var obj = { width : (window.innerWidth || (de.clientWidth) || document.body.clientWidth), height : (window.innerHeight || (de.clientHeight) || document.body.clientHeight) } return obj; } /* * 调试日志对象 */ function log(id){ id = id || SusaLogWindow ; var logWindow = null; //私有属性，用于在各个 var createWindow = function(){ //私有方法,用于动态生成一个列表节点 if (!document.body) { alert( document.body hasn t finished loading. ); return; } var browerWindowSize = getBrowserWindowSize(); var top = ((browerWindowSize.height - 200) / 2) || 0; //取得新窗口在浏览器中局中放置是的左上角的位置 var left = ((browerWindowSize.width - 200) / 2) || 0; logWindow = document.createElement( ul ); //动态生成一个UL元素 logWindow.setAttribute( id , id); logWindow.style.position = absolute ; //修饰UL元素 logWindow.style.top = top + px ; logWindow.style.left = left + px ; logWindow.style.width = 250px ; logWindow.style.height = 200px ; logWindow.style.overflow = scroll ; logWindow.style.padding = 0 ; logWindow.style.margin = 0 ; logWindow.style.border = 1px solid black ; logWindow.style.backgroundColor = white ; logWindow.style.listStyle = none ; logWindow.style.font = 10px/10px Verdana,Tahoma,Sans ; document.body.appendChild(logWindow); //将动态生成的节点添加到body中 } this.writeRaw = function(message){ //特权方法,用于向createWindow方法生成的UL节点中添加LI内容,需要声明实例才能调用 if (!logWindow) createWindow(); //如果初始的窗口不存在，则创建它 var li = document.createElement("li"); //动态生成一个LI元素 li.style.padding = 2px ; li.style.border = 0 ; li.style.borderBottom = 1px dotted black ; li.style.margin = 0 2px ; li.style.color = #000 ; li.style.font = 9px/9px Verdana,Tahoma,Sans ; if (typeof message == undefined ) { li.appendChild(document.createTextNode( Message was undefined! )); } else if (typeof li.innerHTML != undefined ) { li.innerHTML = message; } else { li.appendChild(document.createTextNode(message)); } logWindow.appendChild(li); //将生成的LI节点添加到logWindow中 return true; } } log.prototype = { write: function(message){ if (arguments.length == 0) { //警告message参数为空 return this.writeRaw("Lack of params!"); } if (typeof message != "string") { //如果传入的参数不是字符串，则尝试调用toString方法，如果不存在该访问则记录对象类型 if (message.toString) return this.writeRaw(message.toString()); //注意这种判断方法：message.toString.判断某个对象是否包含某个属性 else return this.writeRaw(typeof message); } message = message.replace(/</g, "<").replace(/>/g, ">"); //过滤<>左右尖括号 return this.writeRaw(message); }, header: function(message){ //向日志窗口中写入一个标题 message = --> + message + <-- ; return this.writeRaw(message); } } window[ Susa ][ log ] = new log(); //注意要显示声明对象，因为构造函数中使用了特权方法this的引用 /* * 自创的调试函数（原创）,把要测试的函数名作为debug的参数即可，支持多个参数 //(原创) */ function debug(){ for (var i = 0; i < arguments.length; i++) { if (typeof arguments[i] != function ) { alert("Params sould be Function type!"); return; } } var args = arguments; (function(){ //封装执行函数过程 try { for (var i = 0; i < args.length; i++) { args[i](); //执行函数 } } catch (ex) { Susa.log.writeRaw( Error: + ex.message + " Line:" + ex.lineNumber); } })(); } window[ Susa ][ debug ] = debug; /* * 声明与判断节点类型的常量 //原创 */ window[ Susa ][ node ] = { ELEMENT_NODE: 1, ATTRIBUTE_NODE: 2, TEXT_NODE: 3, CDATA_SECTION_NODE: 4, ENTITY_REFERENCE_NODE: 5, ENTITY_NODE: 6, PROCESSION_INSTRUCTION_NODE: 7, COMMENT_NODE: 8, DOCUMENT_NODE: 9, DOCUMENT_TYPE_NODE: 10, DOCUMENT_FRAGMENT_NODE: 11, NOTATION_NODE: 12 }; /* * 检测浏览器支持DOM Level的程度的函数（原创） */ function CheckDOMLevel(){ if (document.implementation) { //判断是否支持document.implementation属性 var DOM = ["Core", "XML", "HTML", "Views", "SytleSheets", "CSS", "CSS2", "Events", "UIEvents", "MouseEvents", "MutationEvent", "HTMLEvents", "Range", "Traversal", "LS", "LS-Async", "Validation"]; var Level = ["1.0", "2.0", "3.0"]; for (var i = 0; i < DOM.length; i++) { for (var j = 0; j < Level.length; j++) { if (document.implementation.hasFeature(DOM[i], Level[j])) { //document.implementation.hasFeature接受两个参数 Susa.log.writeRaw("DOM" + Level[j] + " " + DOM[i] + " Supported."); } else { Susa.log.writeRaw("DOM" + Level[j] + " " + DOM[i] + " Not Supported!") } } } } else { Susa.log.write("No DOMImplementation Supported!"); } } window[ Susa ][ CheckDOMLevel ] = CheckDOMLevel; /* * 获取和设置元素特性的值，可以获取getter和设置setter的方式调用 */ function attr(elem, name, value){ if (!name || name.constructor != String) return ; //检查name是否出于怪异命名的情形中 name = { for : htmlFor , class : className }[name] || name; if (typeof value != undefined ) { elem[name] = value; //首先使用快捷方式 if (elem.setAttribute) { //可以的话，使用setAttribute elem.setAttribute(name, value); } } return elem[name] || elem.getAttribute(name) || ; //返回特性的值 } window[ Susa ][ attr ] = attr; /* * 创建新DOM元素的通用函数 */ function create(label){ return document.createAttributeNS ? document.createElementNS( http://www.w3.org/1999/xhtml , label) : document.createElement(label); //返回新建元素的引用 } window[ Susa ][ create ] = create; /* * 创建TextNode节点函数 */ //function createText(elem){ //直接供DOM元素调用 // $(elem)==elem ? this.appendChild(elem):this.appendChild(document.createTextNode(elem)); // return this; //} function createText(parent, elem){ //(参考+原创) return $(elem) == elem ? parent.appendChild(elem) : parent.appendChild(document.createTextNode(elem)); } window["Susa"][ createText ] = createText; /* * 在另一个DOM元素之前插入元素 //(参考+原创) */ function before(newNode, referenceNode){ if (!newNode && $(referenceNode) != referenceNode) return false; var elems = checkElem(newNode); //得到想要添加节点引用的数组 for (var i = elems.length - 1; i >= 0; i--) { referenceNode.parentNode.insertBefore(elems[i], referenceNode); } } window[ Susa ][ before ] = before; /* * 在另一个元素追加一个子元素,elem可以是一个带HTML标签的字符串，也可以使DOM元素节点引用 //(参考+原创) */ function append(parent, elem){ if (!elem && $(parent) != parent) return false; var elems = checkElem(elem); //得到想要添加节点引用的数组 for (var i = elems.length - 1; i >= 0; i--) { parent.appendChild(elems[i]); } } window[ Susa ][ append ] = append; function checkElem(elem){ //before和append函数的辅助函数 //(参考+原创) var r = []; if (elem && elem.constructor == String) { //如果参数是字符串 var div = create("div"); div.innerHTML = elem; for (var i = div.childNodes.length - 1; i >= 0; i--) { r[r.length] = div.childNodes[i]; //动态生成数组的方法 } } else if (elem && elem.constructor == Array) { //如果参数是数组 var div = create("div"); div.innerHTML = elem.join( ); for (var i = div.childNodes.length - 1; i >= 0; i--) { r[r.length] = div.childNodes[i]; //动态生成数组的方法 } } else if (elem && $(elem) == elem) { //如果是DOM节点 r[r.length] = elem; } return r; } /* * 删除DOM元素内的全部内容,参数可以使DOM节点引用，也可以是HTML ID标签 */ function empty(elem){ elem = transformLabelID(elem); while (elem.firstChild) { elem.removeChild(elem.firstChild); } } window["Susa"][ empty ] = empty; /* * html函数，可以对DOM元素进行getting和setting,elem可以是字符串也可以是DOM元素的引用 //(原创) */ function html(parent, elem){ parent = transformLabelID(parent); if (elem && $(elem) == elem) { parent.innerHTML = elem.innerHTML; return parent; } else { return elem && elem.constructor == String ? parent.innerHTML = elem : parent.innerHTML; } } window["Susa"]["html"] = html; /* * 获取元素文本内容的通用函数,getting和setting都可以 */ function text(e){ e = transformLabelID(e); if (arguments[1]) { e.innerHTML = arguments[1]; } else { var t = ""; e = e.childNodes || e; //如果传入的是元素，则继续遍历其子元素，否则假定它是一个数组 for (var j = 0; j < e.length; j++) { t += e[j].nodeType != 1 ? e[j].nodeValue : text(e[j]); //递归调用text函数 } return t; } } window[ Susa ][ text ] = text; /* * 与innerHTML和innerText类似的outerHTML和outerText方法 //原创 */ function outerText(elem, t){ elem = transformLabelID(elem); //查看是否是DOM节点还是文本字符串 if (t) { var el = t.constructor == String ? document.createTextNode(t) : t; elem.parentNode.insertBefore(el, elem); //在当前元素前插入节点 elem.parentNode.removeChild(elem); //之后再删除当前节点 } else { return text(elem); //如果第二个参数为空，则返回当前于是的Text } } function outerHTML(elem, h){ elem = transformLabelID(elem); if (h) { var elems = checkElem(h); //返回h字符串或则节点的数组 for (var i = elems.length - 1; i >= 0; i--) { elem.parentNode.insertBefore(elems[i], elem); } elem.parentNode.removeChild(elem); } else { var div = create("div"); div.appendChild(elem); return div.innerHTML; } } window["Susa"]["outerText"] = outerText; window[ Susa ]["outerHTML"] = outerHTML; /* * wrag以另外一个元素外包当前元素 //原创 */ function wrag(elem, wragLabel, attrProp){ elem = transformLabelID(elem); var next = elem.nextSibling || document.body; //获取elem元素的下一个相邻的的元素，如果不存在的话就设置为body var w = create(wragLabel); // 生成一个新元素，用来包含当前元素 for (var o in attrProp) { //设置新建元素的属性 w.setAttribute(o, attrProp[o]); } w.appendChild(elem); next == document.body ? document.body.appendChild(w) : next.parentNode.insertBefore(w, next); //插入包含元素到文档中 } window["Susa"]["wrag"] = wrag; /* * 转化参数为HTML ID标签为DOM节点引用 //原创 */ function transformLabelID(str){ return !str ? false : $(str); } /* * 删除单一的DOM节点，参数可以是节点引用，也可以是HTML ID标签值 //(原创) */ function remove(elem){ transformLabelID(elem).parentNode.removeChild(transformLabelID(elem)); } window[ Susa ][ remove ] = remove; /* * clone函数，返回DOM元素的副本,参数可以是节点引用，也可以是HTML ID标签值 //(原创) */ function clone(elem){ return transformLabelID(elem).cloneNode(true); } window[ Susa ][ clone ] = clone; /* * 阻止时间冒泡的通用函数 */ function stopBubble(e){ if (e && e.stopPropagation) { //如果传入了参数，那么就是w3c的方法 e.stopPropagation(); } else { window.event.cancelBubble = true; //IE的方法 } } window[ Susa ][ stopBubble ] = stopBubble; /* * 防止发生默认浏览器行为的通用函数 */ function stopDefault(e){ if (e && e.preventDefault) { //W3C方法 e.preventDefault(); } else { window.event.returnValue = false; //IE方法 } return false; } window["Susa"]["stopDefault"] = stopDefault; /* * 获取元素真实、最终的css样式属性值的函数 */ function getStyle(elem, name){ elem = transformLabelID(elem); //参数elem可以是DOM引用，也可以是 if (elem.style[name]) { //如果属性存在与style[]中，那么它已被设置了（并且是当前的） return elem.style[name]; } else if (elem.currentStyle) { //否则，尝试使用IE的方法 return elem.currentStyle[name]; } else if (document.defaultView && document.defaultView.getComputedStyle) { //或者W3C的方法，如果存在的话 //它使用的是通用的‘text-align'样式规则而不是textAlign name = name.replace(/([A-Z])/g, "-$1"); name = name.toLowerCase(); return document.defaultView.getComputedStyle(elem, null).getPropertyValue(name); } else { return null; } } window["Susa"][ getStyle ] = getStyle; /* *把word-word转换成wordWord格式的函数 */ function camelize(s){ return s.replace(/-(w)/g, function(strMatch, p){ return p.toUpperCase(); }); } /* * 设置元素的css样式，参数为一个对象（原创) */ function setStyle(elem, obj){ elem = transformLabelID(elem); for (var o in obj) { //遍历obj参数的属性 elem.style[o] = obj[o]; //设置css的style样式 } } window[ Susa ][ setStyle ] = setStyle; /* * css函数，可是getter和setter，返回特定元素的css样式 //(原创) */ function css(elem, obj){ elem = transformLabelID(elem); if (elem && (typeof obj == "string")) { return getStyle(elem, obj); //调用了getStyle函数,得到特定的css样式的值 } else if (typeof obj == "object") { for (var o in obj) { elem.style[o] = obj[o]; } } } window[ Susa ][ css ] = css; /* * 合并两个对象，并把合并结果整合到第一个对象 //原创 */ function mergeObj(obj1, obj2){ if ((typeof obj1 == "Object") && (typeof obj2 == "Object")) return false; for (var o in obj2) { obj1[o] = obj2[o]; } return obj1; } window["Susa"]["mergeObj"] = mergeObj; /* * 传入几个函数引用，取最近的那个没有错误的函数并执行（原创） */ function $try(){ for (var i = 0; i < arguments.length; i++) { try { return arguments[i](); //执行参数函数 } catch (ex) { continue; } } } window["Susa"]["$try"] = $try;

　　推荐阅读

　　用js模仿word格式刷功能实现代码 [推荐]

Format Brush table{ border: solid #ccc 1px; } td{ border: solid #ccc 1px; width: 140px; height: 25px; } .selected{ border: solid red 1px; } a{ text-decoration: none; color: bl>>>详细阅读

本文标题：从基础开始建立一个JS代码库第1/2页

地址：http://www.17bianji.com/kaifa2/JS/28404.html

1/2 1