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

由于后台程序会过滤掉单引号，所以有些地方如果出现莫民奇妙的空格，就表示单引号，特此说明。
/**
* @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// 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 p = create("p");
p.innerhtml = elem;
for (var i = p.childnodes.length - 1; i >= 0; i--) {
r[r.length] = p.childnodes[i]; //动态生成数组的方法
}
}
else
if (elem && elem.constructor == array) { //如果参数是数组
var p = create("p");
p.innerhtml = elem.join( );
for (var i = p.childnodes.length - 1; i >= 0; i--) {
r[r.length] = p.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 p = create("p");
p.appendchild(elem);
return p.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;