背景
常用代码片段，DOM操作类、字符串操作类、常用正则表达式等
代码片段
DOM操作类
原生JavaScript元素显示的通用方法
1
2
3
4
5
6
7
8
9
10
11
12
13
function $(id) {
return !id ? null : document.getElementById(id);
}
function display(id) {
var obj = $(id);
if (obj.style.visibility) {
obj.style.visibility = obj.style.visibility == 'visible' ? 'hidden' : 'visible';
} else {
obj.style.display = obj.style.display == '' ? 'none' : '';
}
}原生JavaScript实现checkbox全选与全不选
1
2
3
4
5
6
7
8
9
10
11
12
13
14function checkAll() {
var selectall = document.getElementById("selectall");
var allbox = document.getElementsByName("allbox");
if (selectall.checked) {
for (var i = 0; i < allbox.length; i++) {
allbox[i].checked = true;
}
}
else {
for (var i = 0; i < allbox.length; i++) {
allbox[i].checked = false;
}
}
}原生JavaScript跨浏览器添加事件
1
2
3
4
5
6
7
8
9
10
11
12function addEvt(oTarget, sEvtType, fnHandle) {
if (!oTarget) {
return;
}
if (oTarget.addEventListener) {
oTarget.addEventListener(sEvtType, fnHandle, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEvtType, fnHandle);
} else {
oTarget["on" + sEvtType] = fnHandle;
}
}原生JavaScript实现全选通用方法
1
2
3
4
5
6
7
8
9
10//原生JavaScript实现全选通用方法
function checkall(form, prefix, checkall) {
var checkall = checkall ? checkall : 'chkall';
for (var i = 0; i < form.elements.length; i++) {
var e = form.elements[i];
if (e.type == "checkbox") {
e.checked = form.elements[checkall].checked;
}
}
}原生JavaScript实现全部取消选择通用方法
1
2
3
4
5
6
7
8//原生JavaScript实现全部取消选择通用方法
function uncheckAll(form) {
for (var i = 0; i < form.elements.length; i++) {
var e = form.elements[i];
if (e.name != 'chkall')
e.checked = !e.checked;
}
}原生JavaScript获取单选按钮的值
1
2
3
4
5
6
7
8
9
10
11
12//原生JavaScript获取单选按钮的值
function get_radio_value(field) {
if (field && field.length) {
for (var i = 0; i < field.length; i++) {
if (field[i].checked) {
return field[i].value;
}
}
} else {
return;
}
}原生JavaScript获取复选框的值
1
2
3
4
5
6
7
8
9
10
11
12//原生JavaScript获取复选框的值
function get_checkbox_value(field) {
if (field && field.length) {
for (var i = 0; i < field.length; i++) {
if (field[i].checked && !field[i].disabled) {
return field[i].value;
}
}
} else {
return;
}
}原生JavaScript实现返回顶部的通用方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23//原生JavaScript实现返回顶部的通用方法
function backTop(btnId) {
var btn = document.getElementById(btnId);
var d = document.documentElement;
var b = document.body;
window.onscroll = set;
btn.style.display = "none";
btn.onclick = function () {
btn.style.display = "none";
window.onscroll = null;
this.timer = setInterval(function () {
d.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);
b.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);
if ((d.scrollTop + b.scrollTop) == 0) clearInterval(btn.timer, window.onscroll = set);
},
10);
};
function set() {
btn.style.display = (d.scrollTop + b.scrollTop > 100) ? 'block' : "none"
}
};
backTop('goTop');
字符串类
原生JavaScript实现字符串长度截取
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22function cutstr(str, len) {
var temp;
var icount = 0;
var patrn = /[^\x00-\xff]/;
var strre = "";
for (var i = 0; i < str.length; i++) {
if (icount < len - 1) {
temp = str.substr(i, 1);
if (patrn.exec(temp) == null) {
icount = icount + 1;
}
else {
icount = icount + 2;
}
strre += temp;
}
else {
break;
}
}
return strre + "...";
}原生JavaScript获取域名主机
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25function getHost(url) {
var host = "null";
if (typeof url == "undefined" || null == url) {
url = window.location.href;
}
var regex = /^\w+\:\/\/([^\/]*).*/;
var match = url.match(regex);
if (typeof match != "undefined" && null != match) {
host = match[1];
}
return host;
}
```
3. 原生JavaScript完美判断是否为网址
``` JS
function IsURL(strUrl) {
var regular = /^\b(((https?|ftp):\/\/)?[-a-z0-9]+(\.[-a-z0-9]+)*\.(?:com|edu|gov|int|mil|net|org|biz|info|name|museum|asia|coop|aero|[a-z][a-z]|((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]\d)|\d))\b(\/[-a-z0-9_:\@&?=+,.!\/~%\$]*)?)$/i
if (regular.test(strUrl)) {
return true;
}
else {
return false;
}
}原生JavaScript获得URL中GET参数值
1
2
3
4
5
6
7
8
9
10
11
12
13
14// 用法：如果地址是 test.htm?t1=1&t2=2&t3=3, 那么能取得：GET["t1"], GET["t2"], GET["t3"]
function get_get() {
querystr = window.location.href.split("?");
if (querystr[1]) {
GETs = querystr[1].split("&");
GET = new Array();
for (i = 0; i < GETs.length; i++) {
tmp_arr = GETs[i].split("=");
key = tmp_arr[0];
GET[key] = tmp_arr[1];
}
}
return querystr[1];
}原生JavaScript判断变量是否空值
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//原生JavaScript判断变量是否空值
/**
* 判断变量是否空值
* undefined, null, '', false, 0, [], {} 均返回true，否则返回false
*/
function empty(v) {
switch (typeof v) {
case 'undefined':
return true;
case 'string':
if (trim(v).length == 0) return true;
break;
case 'boolean':
if (!v) return true;
break;
case 'number':
if (0 === v) return true;
break;
case 'object':
if (null === v) return true;
if (undefined !== v.length && v.length == 0) return true;
for (var k in v) {
return false;
}
return true;
break;
}
return false;
}
常用正则表达式
1 | //正整数 |