很好用的扩展JS
/**
* 创建人: DJ
* 日 期: 2021-11-21
* **/
const methodExt = function (_dom) {
if (null == _dom) return {};
if (null != _dom.mext) return _dom;
var __$mext = {
isJson: function (arg) {
if (null == arg) return false;
if (("string" == typeof arg) || (true == arg instanceof Array) || ("object" != typeof arg) || ("function" == typeof arg)) return false;
return true;
},
/**
* attr 向元素对象添加/删除属性/获取属性值,当属性值为 null 时表示删除属性
* @param {} attEle 可以为json对象,也可为string类型;当为json对象时,则忽略val参数
* @param val 字符串类型(string),只有当参数 attEle 为字符串类型时 val 参数才有效
* **/
attr: function (attEle, val) {
if (null == attEle) return this;
if ("string" == typeof attEle) {
if (null == val && 2 == arguments.length) {
this.removeAttribute(attEle);
} if (null == vall && 1 == arguments.length) {
return this.getAttribute(attEle);
} else {
this.setAttribute(attEle, val);
}
return this;
}
if (false == this.isJson(attEle)) return this;
for (var k in attEle) {
if (null == attEle[k]) {
this.removeAttribute(k);
continue;
}
this.setAttribute(k, attEle[k]);
}
return this;
},
/**
* css 向元素对象设置样式style的值,当属性值为 null 时表示删除属性,也可获取样式值
* @param {} styleEle 可以为json对象,也可为string类型;当为json对象时,则忽略val参数
* @param val 字符串类型(string),只有当参数 styleEle 为字符串类型时 val 参数才有效
* **/
css: function (styleEle, val) {
if (null == styleEle) return this;
if ("string" == typeof styleEle) {
if (-1 != styleEle.indexOf('-')) {
var arr = styleEle.split('-');
var len = arr.length;
styleEle = '';
for (var i = 0; i < len; i++) {
if (0 == i) {
styleEle = arr[i];
}
else {
styleEle += (arr[i].substr(0, 1).toUpperCase() + arr[i].substring(1));
}
}
}
if (null == val && 2 == arguments.length) {
this.style[styleEle] = "none";
} if (null == val && 1 == arguments.length) {
return this.style[styleEle];
} else {
this.style[styleEle] = val;
}
return this;
}
if (false == this.isJson(styleEle)) return this;
for (var k in styleEle) {
if (null == styleEle[k]) {
this.style[k] = "none";
continue;
}
this.style[k] = styleEle[k];
}
return this;
},
/**
* bind 为当前元素对象绑定事件
* @param eventName 事件名称
* @param callback 回调方法
* **/
bind: function (eventName, callback) {
if ("string" != typeof eventName) return;
if ("function" != typeof callback) return;
eventName = eventName.toLowerCase();
if ("on" == eventName.substring(0, 2)) {
eventName = eventName.substring(2);
}
this.addEventListener(eventName, callback);
},
/**
* appendItem 根据 tagName 创建一个元素并附加到该 DOM 元素下
* **/
appendItem: function (tagName) {
if (null == tagName) return this;
if (null == this.appendChild) return this;
if ("string" != typeof tagName) {
this.appendChild(tagName);
return tagName;
}
var dom = document.createElement(tagName);
if (null == dom) return this;
methodExt(dom);
this.appendChild(dom);
return dom;
},
addChild: function(tagName){
return __$mext.appendItem(tagName);
},
append: function(tagName){
return __$mext.appendItem(tagName);
},
appendChild: function(tagName){
return __$mext.appendItem(tagName);
},
remove: function(){
var _p = this.parentNode;
_p.removeChild(this);
},
removeChild: function(DOM){
if(null == DOM)return;
if("string" == typeof DOM){
//
}
},
/**
* parent 返回当前元素的父元素(上一级元素)
* **/
parent: function () {
var _p = this.parentNode;
if (null != _p.parent) return _p;
methodExt(_p);
return _p;
},
/**
* foreach 循环遍历子元素,arg1,arg2 可任何一个参数作为回调方法,另一个可以为需要查找的条件; *
* 支持 foreach(arg).method(arg), 为所遍历的每一个元素执行指定方法,例: rows.foreach(".cell").css({color: "red"})
* 当foreach后接其它方法时,表示foreach所查找到的所有元素均会执行后接的方法;
* 当查找条件为:
* null 遍历所有子元素,但不包含子元素的下一级元素;
* .字符 遍历所有 class 属性包含指定字符的子元素,查找范围为所有级别子元素;
* #字符 遍历 id 与指定字符相等的子元素,查找范围为所有级别子元素;
*
* 注: <> 可省略
* tagName[attr=value] 遍历指定属性及指定属性值的子元素,查找范围为所有级别子元素,如果存在 tagName,则查找元素类型为指定的 tagName;
* 注:tagName[attr=value] 当 tagName 不存在时,中括号可省略不写,即 attr=value
* **/
foreach: function (arg1, arg2) {
var callback = function () { };
var sign = "";
if ("function" == typeof arg1) {
callback = arg1;
sign = arg2;
} else {
sign = arg1;
callback = arg2;
}
if (null == callback) callback = {};
if ("function" != typeof callback) callback = null;
this.foreach.callback = callback;
this.foreach.find = {
p: null,
findClass: function (k) {
this.findClass.arr = [];
this.findClass.p = this.p;
this.findClass.k = k;
this.findClass.each = function (ele) {
var arr = ele.children;
var len = arr.length;
if (0 == len) return;
for (var i = 0; i < len; i++) {
var cls = arr[i].getAttribute("class");
if (null == cls) cls = "";
if (0 < cls.length) {
var arr1 = cls.split(" ");
var len1 = arr1.length;
for (var ii = 0; ii < len1; ii++) {
if (arr1[ii] == this.k) {
this.arr[this.arr.length] = arr[i];
break;
}
}
}
this.each(arr[i]);
}
};
this.findClass.each(this.p);
return this.findClass.arr;
},
findID: function (k) {
this.findID.arr = [];
this.findID.p = this.p;
this.findID.k = k;
this.findID.each = function (ele) {
var arr = ele.children;
var len = arr.length;
if (0 == len) return;
for (var i = 0; i < len; i++) {
var cls = arr[i].id;
if (null == cls) cls = "";
if (cls == this.k) {
this.arr[this.arr.length] = arr[i];
break;
}
this.each(arr[i]);
}
};
this.findID.each(this.p);
return this.findID.arr;
},
findEle: function (k) {
this.findEle.arr = [];
this.findEle.p = this.p;
this.findEle.k = k.toLowerCase();
this.findEle.each = function (ele) {
var arr = ele.children;
var len = arr.length;
if (0 == len) return;
for (var i = 0; i < len; i++) {
var cls = arr[i].tagName;
if (null == cls) cls = "";
if (cls.toLowerCase() == this.k) {
this.arr[this.arr.length] = arr[i];
}
this.each(arr[i]);
}
};
this.findEle.each(this.p);
return this.findEle.arr;
},
findAtt: function (tag, k, v) {
this.findAtt.arr = [];
this.findAtt.p = this.p;
this.findAtt.tag = null == tag ? "" : tag.toLowerCase();
this.findAtt.k = k;
this.findAtt.v = v;
this.findAtt.each = function (ele) {
var arr = ele.children;
var len = arr.length;
if (0 == len) return;
for (var i = 0; i < len; i++) {
var mbool = true;
if (0 < this.tag.length) {
mbool = false;
var tg = arr[i].tagName;
if (null == tg) tg = "";
if (tg.toLowerCase() == this.tag) mbool = true;
}
if (mbool) {
var cls = arr[i].getAttribute(this.k);
if (null == cls) cls = "";
if (cls == this.v) {
this.arr[this.arr.length] = arr[i];
}
}
this.each(arr[i]);
}
};
this.findAtt.each(this.p);
return this.findAtt.arr;
},
};
this.foreach.find.p = this;
var s = null == sign ? "" : sign;
var elements = [];
var regex =
/(([a-z0-9_]+)\[\s*([a-z0-9_\-]+)\s*\=\s*([a-z0-9_\-]+)\s*\])|(\[\s*([a-z0-9_\-]+)\s*\=\s*([a-z0-9_\-]+)\s*\])|(([a-z0-9_\-]+)\s*\=\s*([a-z0-9_\-]+))/i;
var rgArr = regex.exec(s);
if (null != rgArr) {
if (null != rgArr[1]) {
elements = this.foreach.find.findAtt(rgArr[2], rgArr[3], rgArr[4]);
} else if (null != rgArr[5]) {
elements = this.foreach.find.findAtt(null, rgArr[6], rgArr[7]);
} else {
elements = this.foreach.find.findAtt(null, rgArr[9], rgArr[10]);
}
} else if (0 == s.length) {
elements = this.children;
} else if ("." == s.substring(0, 1)) {
elements = this.foreach.find.findClass(s.substring(1));
} else if ("#" == s.substring(0, 1)) {
elements = this.foreach.find.findID(s.substring(1));
} else if (
"<" == s.substring(0, 1) &&
">" == s.substring(s.length - 1)
) {
s = s.substring(1);
s = s.substring(0, s.length - 1);
elements = this.foreach.find.findEle(s);
} else if (0 < s.length) {
elements = this.foreach.find.findEle(s);
} else {
elements = this.children;
}
var vObj = {
att: null,
attr: null,
css: null,
bind: null,
appendItem: null,
append: null,
parent: null,
val: null,
txt: null,
html: null,
__$fn: "",
__$arg: null,
__$thisObj: this,
__$thisArr: elements,
__$callback: this.foreach.callback,
__$main: function (isAttr) {
if (null == isAttr) isAttr = false;
var arg = this;
var callback = arg.__$callback;
if (false == isAttr && null == callback) return this;
var arr = arg.__$thisArr;
if (null == arr) return this;
var len = arr.length;
var fn = arg.__$fn;
fn = null == fn ? "" : fn;
for (var i = 0; i < len; i++) {
methodExt(arr[i]);
if (!isAttr) {
callback.apply(arr[i], [i]);
continue;
}
if (0 == fn.length) break;
if (null != arr[i][fn]) {
if ("function" == typeof arr[i][fn]) arr[i][fn].apply(arr[i], arg.__$arg);
}
}
return this;
}
};
for (var k in vObj) {
if (3 < k.length) {
if ("__$" == k.substring(0, 3)) continue;
}
vObj[k] = function () {
this.__$arg = arguments;
try {
throw new Error();
}
catch (e) {
/*
Error
at Object.vObj.
*/
var msg = e.stack.toString();
var rg = /\[as\s+([a-z]+)\]/;
var arr = rg.exec(msg);
if (null != arr) {
this.__$fn = arr[1];
this.__$main(true);
}
}
return this;
}
}
return vObj.__$main();
},
val: function (v) {
var tag = this.tagName;
if ("input" != tag) return;
if (null == v) {
return this.value;
} else {
this.value = v;
}
},
txt: function (content) {
var tag = this.tagName;
if ("input" == tag || "select" == tag) return;
if (null == content) {
return this.innerText;
} else {
this.innerText = content;
}
},
html: function (_html) {
var tag = this.tagName;
if ("input" == tag || "select" == tag) return;
if (null == _html) {
return this.innerHTML;
} else {
this.innerHTML = _html;
}
},
};
__$mext.att = __$mext.attr;
__$mext.append = __$mext.appendItem;
for (var k in __$mext) {
_dom[k] = __$mext[k];
}
_dom.mext = __$mext;
return _dom;
}
export default methodExt