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

从基础开始建立一个JS代码库,更新中 有心人会领技术走的更远 由于后台程序会过滤掉单引号,所以有些地方如果出现莫民奇妙的…

从基础开始建立一个JS代码库,更新中 有心人会领技术走的更远

由于后台程序会过滤掉单引号,所以有些地方如果出现莫民奇妙的空格,就表示单引号,特此说明。

/**

* @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 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 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, “>”); //过滤<>左右尖括号

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 if (typeof arguments[i] != function ) {

alert(“Params sould be Function type!”);

return;

}

}

var args = arguments;

(function(){ //封装执行函数过程

try {

for (var i = 0; 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 for (var j = 0; 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 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 try {

return arguments[i](); //执行参数函数

}

catch (ex) {

continue;

}

}

}

window[“Susa”][“$try”] = $try;


12下一页阅读全文

以上就是从基础开始建立一个JS代码库第1/2页的详细内容,更多请关注www.cfluntan.cn其它相关文章!

为您推荐

返回顶部