Javascript 通用函数
虽然是通用函数,但可能并不常用,或者有很多替代方案,以此记录致敬《JavaScript Dom编程艺术》一书
1.addLoadEvent(func)
以上方法相当于一个容器,存放页面加载完成后需要执行的方法,只需将需要执行的方法的方法名作为参数调用此方法即可
function addLoadEvent(func) {
let oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
2.addClass(element, value)
给元素添加class的方法
element:要添加新class的元素
value:新的class的名称
function addClass(element, value) {
if (!element.className) {
element.className = value;
} else {
let newClassName = element.className;
newClassName += " ";
newClassName += value;
element.className = newClassName;
}
}
3.获取url参数
法一:
// 获取url参数
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return false;
}
法二:
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return r[2];
return null;
}
4.向元素后插入节点
在JavaScript中,是没有提供向某元素的后面插入元素的方法的!(但有提供向元素前插入insertBefore的方法)
function insertAfter(newElement, targetElement) {
let parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement, targetElement.nextSibling);
}
}
5.检测浏览器是否支持某种类型的输入控件
这是一个兼容性测试函数,因为存在一些浏览器可能不支持input的h5新类型,可用此函数进行检测
function inputSupportsType(type) {
if (!document.createElement) return false;
let input = document.createElement('input');
input.setAttribute('type', type);
if (input.type == 'text' && type != 'text') {
return false;
} else {
return true;
}
}