-
Notifications
You must be signed in to change notification settings - Fork 497
/
tool.js
311 lines (308 loc) · 11.9 KB
/
tool.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
var Tool = function () {//构造函数模式;用的时候需要new一下;
this.flag = "getElementsByClassName" in document;
//getElementsByClassName 在IE678中是不存在的。用这个来判断是不是低版本的IE浏览器;
//每次只需要判断this.flag是否存在就可以了;如果存在就是标准浏览器,如果不存在就是IE;
};
Tool.prototype = {//方法是定义在Tool的prototype上的;
constructor: Tool,//重写prototype后,prototype的constructor已经不是原来的Tool了;需要手动给他强制写会到Tool上去;
/*经常用到的函数*/
getElementsByClassName: function (context,cName) {//获取元素的ClassName
var context = context || document;
var ary = [];
if (this.flag) {
return this.listToArray(context.getElementsByClassName(cName));
}
var allNode = context.getElementsByTagName("*");
var reg = new RegExp("(?:^| +)" + cName + "(?: +|$)");
for (var i = 0; i < allNode.length; i++) {
var cur = allNode[i];
if (reg.test(cur.className)) {
ary.push(cur);
}
}
return ary;
},
toJSON: function (jsonStr) {//将json字符串转化为json对象
var jsonObj = null;
try {
jsonObj = JSON.parse(jsonStr);//如果支持 JSON.parse则直接使用 JSON.parse将JSON字符串转换为JSON对象。
} catch (e) {
jsonObj = eval("(" + jsonStr + ")");
}
return jsonObj;
},
isType: function (value,type) {//判断数据类型;
var type = arguments[1] || "Object",
reg = new RegExp("\\[object " + type + "\\]", "i");
return reg.test({}.toString.call(value));//{}不可以是[],因为[]就不是Object.prototype,数组也有toString方法;
},
listToArray: function (likeAry) {//类数组转化为数组;
var ary = [];
if (this.flag) {
ary = [].slice.call(likeAry, 0);
} else {
for (var i = 0; i < likeAry.length; i++) {
ary.push(likeAry[i]);
}
}
return ary;
},
/***下面是设置DOM***/
getEleChildren: function (parent,tagName) {//获取指定节点名的元素节点们;第二个参数如果不传,则返回obj下的所有子元素节点;
var allNode = parent.childNodes,
ary = [],
reg = new RegExp("^" + tagName + "$", "i");
for (var i = 0; i < allNode.length; i++) {
var cur = allNode[i];
if (cur.nodeType === 1) {
if (tagName) {//tahName不可能为0,false之类的数;所以可以用if直接判断传进来的参数;
if (reg.test(cur.nodeName)) {
ary.push(cur);
}
continue;
}
ary.push(cur);
}
}
return ary;
},
getFirst: function (curEle) {//获取第一个元素节点;
var children = this.getEleChildren(curEle);
return children.length > 0 ? children[0] : null;
},
getLast: function (curEle) {//获取最后一个元素节点;
var children = this.getEleChildren(curEle);
return children.length > 0 ? children[children.length - 1] : null;
},
getPre: function (curEle) {//上一个哥哥节点;
if (this.flag) {
return curEle.previousElementSibling;
}
var pre = curEle.previousSibling;
while (pre && pre.nodeType !== 1) {
pre = pre.previousSibling;
}
return pre;
},
getPres: function (curEle) {//获得所有哥哥们;
/* var ary = [],
attr = this.flag ? "previousElementSibling" : "previousSibling";
var pre = curEle[attr];
while (pre) {
if (pre.nodeType === 1) {
ary.unshift(pre);
}
pre = pre[attr];
}
return ary;*/
var ary = [],
next = this.getPre(curEle);
while (next) {
ary.unshift(next);
next = this.getPre(next);
}
return ary;
},
getNext: function (curEle) {//下一个弟弟节点,第一个弟弟节点;
if (this.flag) {
return curEle.nextElementSibling;
}
var next = curEle.nextSibling;
while (next && next.nodeType !== 1) {
next = next.nextSibling;
}
return next;
},
getNexts: function (curEle) {//获取所有的弟弟们;
var ary = [],
next = this.getNext(curEle);
while (next) {
ary.push(next);
next = this.getNext(next);
}
return ary;
},
getSibling: function (curEle) {//获取上一个哥哥和下一个弟弟;
var ary = [],
pre = this.getPre(curEle),
next = this.getNext(curEle);
pre ? ary.push(pre) : void 0;
next ? ary.push(next) : void 0;
return ary;
},
getSiblings: function (curEle) {//获取所有的兄弟们(除了自己)
var pres = this.getPres(curEle),
nexts = this.getNexts(curEle);
return pres.concat(nexts);
},
getIndex: function (curEle) {//获取元素的索引值;
return this.getPres(curEle).length;
},
insertAfter: function (newEle,oldEle) {//在目标元素oldEle后面插入新元素newEle;如果没有传指定元素,则直接添加在后面
var next = this.getNext(oldEle),
par = oldEle.parentNode;
next ? par.insertBefore(newEle, next) : par.appendChild(newEle);
},
prependChild: function (parentEle,curEle) {//把一个元素节点添加为parentEle的第一个子节点;
var first = this.getFirst(parentEle);//获取par中的第一个元素节点;
first ? parentEle.insertBefore(curEle, first) : parentEle.appendChild(curEle);
},
innerHTML: function (curEle,str) {//获取元素的innerHTML;
var str= str || "";
if (!str) {
return curEle.innerHTML;
}
curEle.innerHTML = str;
},
text:function (ele,str){//处理innerText和textContent的兼容性;传一个参数是获取;2个参数是设置;
if(ele&&ele.nodeType&&ele.nodeType==1){
if(str===undefined){//如果str没有传,那么方法是获取元素的文本内容;
if(typeof ele.textContent=='string')
return ele.textContent;
else
return ele.innerText;
}else{//如果传了,就是添加文本内容
if(str===null){
alert('text方法参数错误,str为null!');
return ;
}else if(typeof str=='string'){
if(typeof ele.textContent=='string') {
ele.textContent += str;
}else{
ele.innerText+=str;
}
}else{
alert('text方法的参数错误!')
}
}
}else{
alert('text方法的ele参数错误!')
}
},
/***下面是设置CSS***/
setCss:function (curEle,attr,value) {//设置CSS属性值和获取CSS;如果三个参数就是设置,2个参数就是获取;att是attribute的缩写;
if(typeof value==="undefined"){//如果有第三个参数,就是设置Css;如果没有就是获取Css;
var reg = /^(?:margin|padding|border|float|position|display|background|backgroundColor)$/;
var value = this.flag ? window.getComputedStyle(curEle, null)[attr] : curEle.currentStyle[attr];
return !reg.test(attr) ? parseFloat(value) : value;
} else{
switch (attr) {
case "opacity":
curEle["style"][attr] = value;
curEle["style"]["filter"] = "alpha(opacity=" + (value * 100) + ")";
break;
case "zIndex":
curEle["style"][attr] = value;
break;
default:
curEle["style"][attr] = !isNaN(value) ? value += "px" : value;
}
}
},
setGroupCss: function (curEle,cssObj) {//给元素设置一组属性;cssObj是一个对象类型;
for (var key in cssObj) {
this.setCss(curEle, key, cssObj[key]);
}
},
offset: function (curEle) {//获取偏移量;
var par = curEle.offsetParent,
left = curEle.offsetLeft,
top = curEle.offsetTop;
while (par) {
left += par.offsetLeft;
top += par.offsetTop;
if (navigator.userAgent.indexOf("MSIE 8.0") <= -1) {
left += par.clientLeft;
top += par.clientTop;
}
par = par.offsetParent;
}
return {left: left, top: top};
},
hasClassName: function (curEle,cName) {//判断是否有某个className;
var reg = new RegExp("(?:^| +)" + cName + "(?: +|$)");
return reg.test(curEle.className);
},
addClassName: function (curEle,cName) {//增加某个className;
if (!this.hasClassName(curEle,cName)) {
curEle.className += (" " + cName);
}
},
removeClassName: function (curEle,cName) {//移除类样式的方法;
var reg = new RegExp("(?:^| +)" + cName + "(?: +|$)", "g");
if (this.hasClassName(curEle,cName)) {
curEle.className = curEle.className.replace(reg, " ");
}
}
};
~function () {//在DOM库上增加方法,同时不影响原来的方法;在类的原型上增加方法;
var strPro = String.prototype,
aryPro = Array.prototype,
objPro = Object.prototype;
aryPro.removeRepeat = function () {//数组去重;
var obj = {};
for (var i = 0; i < this.length; i++) {
var cur = this[i];
if (obj[cur] == cur) {
this.splice(i, 1);
i--;
continue;
}
obj[cur] = cur;
}
obj = null;
return this;
};
aryPro.forEachPro = function (fn,context) {//forEach兼容性处理;
var context = context || window;
if (this.forEach) {
this.forEach(fn, context);
return this;
}
for (var i = 0; i < this.length; i++) {
fn.call(context, this[i], i, this);
}
return this;
};
objPro.myHasPubProperty = function (attr) {//是否为公有属性;
return (attr in this) && !this.hasOwnProperty(attr);
};
strPro.myTrim = function () {//去除首尾空格;
return this.replace(/(^\s*|\s*$)/g, "");
};
strPro.mySub = function (len,isD) {//是不是有效的
var len = len || 10,
isD = isD || false,
str = "",
n = 0;
for (var i = 0; i < this.length; i++) {
var s = this.charAt(i);
/[\u4e00-\u9fa5]/.test(s) ? n += 2 : n++;
if (n > len) {
isD ? str += "..." : void 0;
break;
}
str += s;
}
return str;
};
strPro.myFormatTime = function (format) {//时间格式化;
var reg = /^(\d{4})(?:-|\/|\.|:)(\d{1,2})(?:-|\/|\.|:)(\d{1,2})(?:\s+)(\d{1,2})(?:-|\/|\.|:)(\d{1,2})(?:-|\/|\.|:)(\d{1,2})$/g,
ary = [];
this.replace(reg, function () {
ary = ([].slice.call(arguments)).slice(1, 7);
});
var format = format || "{0}年{1}月{2}日 {3}:{4}:{5}";
return format.replace(/{(\d+)}/g, function () {
var val = ary[arguments[1]];
return val.length === 1 ? "0" + val : val;
});
};
strPro.myQueryURLParameter = function () {//是否是有效URL
var reg = /([^?&=]+)=([^?&=]+)/g, obj = {};
this.replace(reg, function () {
obj[arguments[1]] = arguments[2];
});
return obj;
}
}();