1、普通常用工具函数
1.获取变量的数据类型（jQuery源码）
function getType (obj) {
var class2type = {};
if (obj == null) {
return obj + "";
}
return typeof obj === "object" || typeof obj === "function" ?
class2type[toString.call(obj)] || "object" :
typeof obj;
}2.对象转 query string 参数（jQuery代码）
function objectToQueryString(a, traditional) {
var getType = function (obj) {
var class2type = {};
if (obj == null) {
return obj + "";
}
return typeof obj === "object" || typeof obj === "function" ?
class2type[toString.call(obj)] || "object" :
typeof obj;
}
var isPlainObject = function (obj) {
var proto, Ctor;
// Detect obvious negatives
// Use toString instead of jQuery.type to catch host objects
if (!obj || toString.call(obj) !== "[object Object]") {
return false;
}
proto = Object.getPrototypeOf(obj);
// Objects with no prototype (e.g., `Object.create( null )`) are plain
if (!proto) {
return true;
}
// Objects with prototype are plain iff they were constructed by a global Object function
Ctor = ({}).hasOwnProperty.call(proto, "constructor") && proto.constructor;
return typeof Ctor === "function" && ({}).toString.call(Ctor) === ({}).toString.call(Object);
};
var rbracket = /\[\]$/;
var isFunction = function isFunction(obj) {
return typeof obj === "function" && typeof obj.nodeType !== "number";
};
var isWindow = function isWindow(obj) {
return obj != null && obj === obj.window;
};
var isArrayLike = function (obj) {
var length = !!obj && "length" in obj && obj.length,
type = getType(obj);
if (isFunction(obj) || isWindow(obj)) {
return false;
}
return type === "array" || length === 0 ||
typeof length === "number" && length > 0 && (length - 1) in obj;
}
var each = function (obj, callback) {
var length, i = 0;
if (isArrayLike(obj)) {
length = obj.length;
for (; i < length; i++) {
if (callback.call(obj[i], i, obj[i]) === false) {
break;
}
}
} else {
for (i in obj) {
if (callback.call(obj[i], i, obj[i]) === false) {
break;
}
}
}
return obj;
}
var buildParams = function (prefix, obj, traditional, add) {
var name;
if (Array.isArray(obj)) {
// Serialize array item.
each(obj, function (i, v) {
if (traditional || rbracket.test(prefix)) {
// Treat each array item as a scalar.
add(prefix, v);
} else {
// Item is non-scalar (array or object), encode its numeric index.
buildParams(
prefix + "[" + (typeof v === "object" && v != null ? i : "") + "]",
v,
traditional,
add
);
}
});
} else if (!traditional && getType(obj) === "object") {
// Serialize object item.
for (name in obj) {
buildParams(prefix + "[" + name + "]", obj[name], traditional, add);
}
} else {
// Serialize scalar item.
add(prefix, obj);
}
}
var prefix,
s = [],
add = function (key, valueOrFunction) {
// If value is a function, invoke it and use its return value
var value = typeof valueOrFunction == 'function' ?
valueOrFunction() :
valueOrFunction;
s[s.length] = encodeURIComponent(key) + "=" +
encodeURIComponent(value == null ? "" : value);
};
if (a == null) {
return "";
}
// If an array was passed in, assume that it is an array of form elements.
if (Array.isArray(a) || (a.jquery && !isPlainObject(a))) {
// Serialize the form elements
each(a, function () {
add(this.name, this.value);
});
} else {
// If traditional, encode the "old" way (the way 1.3.2 or older
// did it), otherwise encode params recursively.
for (prefix in a) {
buildParams(prefix, a[prefix], traditional, add);
}
}
// Return the resulting serialization
return s.join("&");
}3.获取url参数（jQuery代码）
function getUrlParams(queryString) {
if (!queryString) {
return;
}
if (queryString.search(/\?/) > -1) {
queryString = queryString.split('?')[1];
}else{
return {};
}
// var queryStringArr = decodeURIComponent(queryString).split('&');
var queryStringArr = queryString.split('&');
var res = {};
var reg = /\[\]$/;
queryStringArr.forEach(function (item) {
var itemArr = item.split('=');
var name = decodeURIComponent(itemArr[0]);
var value = decodeURIComponent(itemArr[1]);
// 如果是数字则将其转换成number类型
if (/^\d+$/.test(value) && (value.length < 11)) {
value = value * 1;
}
// 判断是否是多选的
if (reg.test(name)) {
name = name.replace(/\[\]/, '');
if (res[name]) {
res[name].push(value);
} else {
res[name] = [value];
}
} else {
res[name] = value;
}
});
return res;
}4.清除字符串两端空格，包含换行符、制表符
function trim (str) {
if (str.length === 0) {
return str;
}
str += '';
// 清除字符串两端空格，包含换行符、制表符
return str.replace(/(^[\s\n\t]+|[\s\n\t]+$)/g, '');
}5.将科学计数法的值转换成正常数字
function toNonExponential (num) {
var m = num.toExponential().match(/\d(?:\.(\d*))?e([+-]\d+)/);
return num.toFixed(Math.max(0, (m[1] || '').length - m[2]));
}6.根据指定url获取url的域名
function getBaseUrl (_url) {
if(!_url){ return ''; }
let aEle = document.createElement('a');
let url = '';
aEle.href = _url;
url += aEle.protocol + '//' + aEle.host;
aEle = null;
return url;
}7.获取url的基本信息
function getUrlInfo(_url){
let aEle = document.createElement('a');
aEle.href = _url || location.href;
let obj = {
protocol: aEle.protocol,
host: aEle.host,
pathname: aEle.pathname,
search: aEle.search,
hash: aEle.hash
};
return obj;
}8.获取元素在数组中的下标
/**
* 获取数组中符合条件的元素的索引
* @param arr 数组
* @param fn 一个函数，如果函数返回true，则返回该项的下标，如果没有找到则返回-1
* */
function getIndex (arr, fn) {
if (!arr || arr.length === 0 || !fn || (typeof fn !== 'function')) {
return -1;
}
if (arr.findIndex) {
return arr.findIndex(fn);
}
let len = arr.length;
let i = 0;
let index = -1;
for (; i < len; i++) {
let item = arr[i];
if (fn(item, index, arr) === true) {
index = i;
break;
}
}
return index;
}9.获取浏览器使用的语言
function getBrowserLang () {
var type = navigator.appName;
let lang = '';
if (type === 'Netscape') {
// 获取浏览器配置语言，支持非IE浏览器
lang = navigator.language;
} else {
// 获取浏览器配置语言，支持IE5+ == navigator.systemLanguage
lang = navigator.userLanguage;
}
return lang.toLowerCase();
}10.给数字前面补零
/**
* 给数字前面补零
* 如：padStartZero(10) => 10
* padStartZero(5) => 05
* @param num
* @returns {string}
*/
function padStartZero (num) {
return ('00' + num).substr((num + '').length);
}11.截取数字整数位长度（从低位往高位截）
/**
* 如：limitInt(12, 3) => 12
* limitInt(145678, 3) => 145
* limitInt(1456.78, 3) => 145.78
* @param num
* @param maxSize
* @returns {string}
*/
function limitInt(num, maxSize) {
num = num + "";
let numArr = num.split(".");
let len = (numArr[0] + "").length;
if (len > maxSize) {
numArr[0] = numArr[0].substring(0, maxSize);
} else {
return num;
}
return numArr.join(".");
}12.截取数字小数位长度
/**
* 如：limeDecimal(12, 3) => 12
* limeDecimal(14.5678, 3) => 14.557
* limeDecimal(1456.78, 3) => 1456.78
* @param num
* @param maxSize
* @returns {string}
*/
function limitDecimal(num, maxSize) {
if (typeof maxSize == "undefined") {
return num;
}
num = num + "";
let numArr = num.split(".");
if (numArr.length == 1) {
return num;
}
if ((numArr[1] + "").length > maxSize) {
numArr[1] = numArr[1].substr(0, maxSize);
} else {
return num;
}
return numArr.join(".");
}13.将数字格式化到指定位数的小数
/**
* 如：decimalPadZero(10,2) => 10.00
* decimalPadZero(10.5,2) => 10.50
* decimalPadZero(10.5678,2) => 10.56
* @param number 数字
* @param scall 保留小数后多少位
* @returns {string}
*/
function decimalRetain(number, scale) {
if (isNaN(Number(number))) {
return number;
}
let result = ['', ''];
let num = number.toString();
if (num.indexOf('.') !== -1) {
let arr = num.split('.');
result[0] = arr[0];
if (arr[1].length === scale) {
result[0] += '.' + arr[1];
} else if (arr[1].length > scale) {
result[1] = '.';
result[1] += arr[1].substring(0, scale - 1);
} else if (arr[1].length < scale) {
let zeros = (scale + 1) - arr[1].length;
result[0] += '.' + arr[1];
result[1] = Array(zeros).join(0);
}
} else {
result[0] = num;
result[1] = '.' + (Array(scale + 1).join(0));
}
return result.join("").replace(/\.+$/, "");
}14.数字前面补零
/**
* 如：padStartZero(10) => 10
* padStartZero(5) => 05
* @param num
* @returns {string}
*/
function padStartZero (num) {
return ('00' + num).substr((num + '').length);
}15.判断对象是否是一个空对象
/**
* 判断对象是否是一个空对象
* @param obj
*/
function isEmptyObject (obj) {
for (var attr in obj) {
return false;
}
return true;
}16.下载文件
/**
* 下载文件
* @param fileData 文件数据
* @param fileName 文件名称
* @param mimeType 文件类型
* @param notSupportCallback 浏览器不支持下载时的回调
*/
function downloadFile (fileData, fileName, mimeType, notSupportCallback) {
if (!window.Blob) {
notSupportCallback();
return;
}
// console.log('数据类型：', typeof fileData);
if (!(fileData instanceof Blob)) {
// 默认为文本文件
let type = typeof mimeType === 'string' ? mimeType : 'text/plain';
fileData = new Blob([fileData], { type });
}
let eleA = document.createElement('a');
if ('download' in eleA) { // 非IE下载
let url = URL.createObjectURL(fileData);
eleA.href = url;
eleA.download = fileName;
eleA.style.display = 'none';
document.body.append(eleA);
let timer = setTimeout(() => {
clearTimeout(timer);
eleA.click();
URL.revokeObjectURL(url);
document.body.removeChild(eleA);
eleA = null;
url = null;
}, 0);
} else if (navigator.msSaveBlob) { // IE10下载
navigator.msSaveBlob(fileData, fileName);
}
}17.下载网络图片
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define([], factory);
} else if (typeof exports === 'object') {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory();
} else {
// Browser globals (root is window)
root.download = factory();
}
}(this, function () {
return function download(data, strFileName, strMimeType) {
var self = window, // this script is only for browsers anyway...
defaultMime = "application/octet-stream", // this default mime also triggers iframe downloads
mimeType = strMimeType || defaultMime,
payload = data,
url = !strFileName && !strMimeType && payload,
anchor = document.createElement("a"),
toString = function(a){return String(a);},
myBlob = (self.Blob || self.MozBlob || self.WebKitBlob || toString),
fileName = strFileName || "download",
blob,
reader;
myBlob= myBlob.call ? myBlob.bind(self) : Blob ;
if(String(this)==="true"){ //reverse arguments, allowing download.bind(true, "text/xml", "export.xml") to act as a callback
payload=[payload, mimeType];
mimeType=payload[0];
payload=payload[1];
}
if(url && url.length< 2048){ // if no filename and no mime, assume a url was passed as the only argument
fileName = url.split("/").pop().split("?")[0];
anchor.href = url; // assign href prop to temp anchor
if(anchor.href.indexOf(url) !== -1){ // if the browser determines that it's a potentially valid url path:
var ajax=new XMLHttpRequest();
ajax.open( "GET", url, true);
ajax.responseType = 'blob';
ajax.onload= function(e){
download(e.target.response, fileName, defaultMime);
};
setTimeout(function(){ ajax.send();}, 0); // allows setting custom ajax headers using the return:
return ajax;
} // end if valid url?
} // end if url?
//go ahead and download dataURLs right away
if(/^data\:[\w+\-]+\/[\w+\-]+[,;]/.test(payload)){
if(payload.length > (1024*1024*1.999) && myBlob !== toString ){
payload=dataUrlToBlob(payload);
mimeType=payload.type || defaultMime;
}else{
return navigator.msSaveBlob ? // IE10 can't do a[download], only Blobs:
navigator.msSaveBlob(dataUrlToBlob(payload), fileName) :
saver(payload) ; // everyone else can save dataURLs un-processed
}
}//end if dataURL passed?
blob = payload instanceof myBlob ?
payload :
new myBlob([payload], {type: mimeType}) ;
function dataUrlToBlob(strUrl) {
var parts= strUrl.split(/[:;,]/),
type= parts[1],
decoder= parts[2] == "base64" ? atob : decodeURIComponent,
binData= decoder( parts.pop() ),
mx= binData.length,
i= 0,
uiArr= new Uint8Array(mx);
for(i;i 0){
let img = imgArr.shift(0);
downloadImg(img.url, img.name);
}else{
clearInterval(timer);
}
}, 500);
} 18.格式化日期
/**
* 格式化日期
* 如：
* formatDate(new Date) => 2018-07-27 14:32:25
* formatDate(1532673162672) => 2018-07-27 14:32:25
* formatDate("abc1532673162672def") => 2018-07-27 14:32:25
* formatDate(new Date, "yyyy年MM月dd日 hh时mm分ss秒") => 2018年07月27日 14时32分25秒
* @param dateTemp
* @param format
* @returns {string}
*/
function formatDate (dateTemp, format = 'yyyy-MM-dd hh:mm:ss') {
if(typeof dateTemp === 'undefined' || dateTemp === null){
console.error('dateTemp不是一个合法的值，dateTemp可以为：时间戳、日期时间字符串、Date对象');
return;
}
if (typeof dateTemp === 'object' && !(/Date/.test(({}).toString.call(dateTemp)))) {
console.error('dateTemp不是一个Date对象，请检查dateTemp数据类型！');
return;
}
let padStartZero = (num) => {
return ('00' + num).substr((num + '').length);
}
let date;
if (typeof dateTemp !== 'object') {
let dateStr = dateTemp + '';
dateStr = /\d{13,}/.exec(dateStr);
if (!dateStr) {
// console.error(dateTemp + ' 不是一个合法的时间戳！');
date = new Date(dateTemp.replace(/\-/g, '/'));
// return;
}else{
date = new Date(dateStr * 1);
}
} else {
date = dateTemp;
}
if (/(y{0,4})/.test(format)) {
format = format.replace(/y{0,4}/, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
}
let obj = {
'M+': (date.getMonth() + 1 + ''),
'd+': (date.getDate() + ''),
'h+': (date.getHours() + ''),
'm+': (date.getMinutes() + ''),
's+': (date.getSeconds() + ''),
};
for (let attr in obj) {
if (new RegExp('(' + attr + ')').test(format)) {
format = format.replace(new RegExp(attr), padStartZero(obj[attr]).substr(2 - RegExp.$1.length));
}
}
return format;
}19.判断是否为mac系统
function isMac() {
return /macintosh|mac os x/i.test(navigator.userAgent);
}20.判断是否为windows系统
function isMac() {
return /macintosh|mac os x/i.test(navigator.userAgent);
}21.获取浏览器信息
function getBrowser() {
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isIE11 = userAgent.toLowerCase().match(/rv:([\d.]+)\) like gecko/); // IE 11中userAgent已经不包含'msie'所以用'msie'不能判断IE 11
var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
var isIE = (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) || isIE11; //判断是否IE浏览器
var isEdge = userAgent.indexOf("Edge") > -1; //判断是否IE的Edge浏览器
var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器
var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器
var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1; //判断Chrome浏览器
var browser = {
name: '',
version: undefined
};
if (isOpera) {
browser.name = 'Opera';
} else if (isChrome) {
browser.name = 'Chrome';
} else if (isSafari) {
browser.name = 'Safari';
} else if (isFF) {
browser.name = 'Firefox';
} else if (isEdge) {
browser.name = 'Edge';
} else if (isIE) {
browser.name = 'IE';
}
if (isIE) {
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
if (fIEVersion == 7) {
browser.version = 7;
} else if (fIEVersion == 8) {
browser.version = 8;
} else if (fIEVersion == 9) {
browser.version = 9;
} else if (fIEVersion == 10) {
browser.version = 10;
} else if (isIE11) { // IE 11中userAgent已经不包含'msie'所以用'msie'不能判断IE 11
browser.version = 11;
}
}
return browser;
}22.获取操作系统信息
function getOsInfo() {
var userAgent = navigator.userAgent.toLowerCase();
var name = 'Unknown';
var version = 'Unknown';
if (userAgent.indexOf('win') > -1) {
name = 'Windows';
if (userAgent.indexOf('windows nt 5.0') > -1) {
version = 'Windows 2000';
} else if (userAgent.indexOf('windows nt 5.1') > -1 || userAgent.indexOf('windows nt 5.2') > -1) {
version = 'Windows XP';
} else if (userAgent.indexOf('windows nt 6.0') > -1) {
version = 'Windows Vista';
} else if (userAgent.indexOf('windows nt 6.1') > -1 || userAgent.indexOf('windows 7') > -1) {
version = 'Windows 7';
} else if (userAgent.indexOf('windows nt 6.2') > -1 || userAgent.indexOf('windows 8') > -1) {
version = 'Windows 8';
} else if (userAgent.indexOf('windows nt 6.3') > -1) {
version = 'Windows 8.1';
} else if (userAgent.indexOf('windows nt 6.2') > -1 || userAgent.indexOf('windows nt 10.0') > -1) {
version = 'Windows 10';
} else {
version = 'Unknown';
}
} else if (userAgent.indexOf('iphone') > -1) {
name = 'iPhone';
} else if (userAgent.indexOf('mac') > -1) {
name = 'Mac';
} else if (userAgent.indexOf('x11') > -1 || userAgent.indexOf('unix') > -1 || userAgent.indexOf('sunname') > -1 || userAgent.indexOf('bsd') > -1) {
name = 'Unix';
} else if (userAgent.indexOf('linux') > -1) {
if (userAgent.indexOf('android') > -1) {
name = 'Android';
} else {
name = 'Linux';
}
} else {
name = 'Unknown';
}
return {name, version};
}23.ip地址转整形
/**
* 将IP地址转换为32位无符号整数
* @param ip ip地址
*/
function ip2long (ip: string) {
const parts = ip.split('.');
if (parts.length !== 4) {
throw new Error('Invalid IP address format');
}
return (parseInt(parts[0], 10) * 16777216) +
(parseInt(parts[1], 10) * 65536) +
(parseInt(parts[2], 10) * 256) +
parseInt(parts[3], 10);
}24.整形转ip地址
function long2ip ( proper_address ) {
proper_address = proper_address>>>0;
var output = false;
if ( !isNaN ( proper_address ) && ( proper_address >= 0 || proper_address <= 4294967295 ) ) {
output = Math.floor (proper_address / Math.pow ( 256, 3 ) ) + '.' +
Math.floor ( ( proper_address % Math.pow ( 256, 3 ) ) / Math.pow ( 256, 2 ) ) + '.' +
Math.floor ( ( ( proper_address % Math.pow ( 256, 3 ) ) % Math.pow ( 256, 2 ) ) /
Math.pow ( 256, 1 ) ) + '.' +
Math.floor ( ( ( ( proper_address % Math.pow ( 256, 3 ) ) % Math.pow ( 256, 2 ) ) %
Math.pow ( 256, 1 ) ) / Math.pow ( 256, 0 ) );
}
return output;
}25.校验ip与子网掩码是否匹配
function checkMask (ip, subnetMask) {
// 将 IP 地址和子网掩码转换为 32 位无符号整数
const ipInt = ip.split('.').reduce((acc, cur) => (acc << 8) + parseInt(cur), 0) >>> 0;
const subnetInt = subnetMask.split('.').reduce((acc, cur) => (acc << 8) + parseInt(cur), 0) >>> 0;
// 计算子网地址
const networkAddress = (ipInt & subnetInt) >>> 0;
// 如果子网地址等于 IP 地址，则匹配
return networkAddress === ipInt;
}使用示例：
console.log(checkMask('192.168.1.100', '255.255.255.0')); // false
console.log(checkMask('192.168.1.100', '255.255.255.255')); // true26.获取html代码中指定标签的内容
/**
* 获取html代码中指定标签的内容
* @param htmlStr html字符串
* @param tagName 标签名称
* @param isGetTagInnerContent 是否只获取标签内部的内容
*/
function getTagContent (htmlStr, tagName, isGetTagInnerContent) {
let reg = new RegExp(`<${tagName}[^>]*>([\\s\\S]*)<\\/${tagName}>`);
if (isGetTagInnerContent) {
reg = new RegExp(`(?<=<${tagName}[^>]*>)([\\s\\S]*)(?=<\/${tagName}>)`);
}
// console.log('reg', reg);
let matched = htmlStr.match(reg);
return matched ? matched[0] : '';
};使用示例：
27.校验版本号
/**
* 校验版本号
* @param version
* @returns {boolean}
*/
function checkVersion (version) {
/*
支持的版本号如：0.1.0、1.0.1、122.12.12、122.12.12-beta.2、122.12.12-beta.2-1
*/
return /^([1-9]\d*|[0-9])(\.([1-9]\d*|\d))(\.([1-9]*\d|\d)[\-\w\.]*)$/.test(version);
}28.rgb颜色转rgba
function convertRgbToRgba = (rgb, a) => {
let hex = rgb.replace(/^\s*#|\s*$/g, "");
if (hex.length === 3) {
hex = hex.replace(/(.)/g, "$1$1");
}
const r = parseInt(hex.substr(0, 2), 16);
const g = parseInt(hex.substr(2, 2), 16);
const b = parseInt(hex.substr(4, 2), 16);
return `rgba(${r},${g},${b},${a})`;
};
2.DOM常用工具函数
1.绑定事件
/**
* 绑定事件
* @param ele dom元素
* @param eventName 事件名称
* @param fn 事件回调函数
*/
function bindEvent (ele, eventName, fn) {
if (!ele) {
console.error('on(ele, eventName, fn)函数第一个参数必须是一个dom元素!');
return;
}
if (!eventName || typeof eventName !== 'string') {
console.error('on(ele, eventName, fn)函数第二个参数必须是一个字符串!');
return;
}
if (!fn || typeof fn !== 'function') {
console.error('on(ele, eventName, fn)函数第三个参数必须是一个函数!');
return;
}
if (!ele._events) {
ele._events = {};
}
if (!(eventName in ele._events)) {
ele._events[eventName] = [fn];
if (document.addEventListener) {
var eventFn = function (e) {
var events = ele._events[eventName];
if (events && events.length > 0) {
for (var i = 0, len = events.length; i < len; i++) {
if (events[i]) {
events[i].call(ele, e);
}
}
}
};
ele.addEventListener(eventName, eventFn, false);
// 把事件回调函数也存起来，这样在移除事件的时候才能真正的把该事件移除掉
ele._events[eventName + '_fn'] = eventFn;
} else if (window.attachEvent) {
var eventFn = function () {
var events = ele._events[eventName];
var e = window.event;
e.preventDefault = function () {
e.returnValue = false;
};
e.stopPropagation = function () {
e.cancelBubble = true;
};
for (var i = 0, len = events.length; i < len; i++) {
events[i].call(ele, e);
}
};
ele.attachEvent('on' + eventName, eventFn);
ele._events[eventName + '_fn'] = eventFn;
}
} else {
//ele._events[eventName] = [fn];
var index = this.getIndex(ele._events[eventName], function (item) {
return item === fn;
});
if (index < 0 || typeof index === 'undefined') {
ele._events[eventName].push(fn);
}
}
}2.解绑事件
/**
* 解绑事件
* @param ele dom元素
* @param eventName 事件名称
* @param fn 事件回调函数
*/
function unBindEvent (ele, eventName, fn) {
if (!ele) {
console.error('off(ele, eventName, fn)函数第一个参数必须是一个dom元素!');
return;
}
if (!eventName || typeof eventName !== 'string') {
console.error('off(ele, eventName, fn)函数第二个参数必须是一个字符串!');
return;
}
if (!ele._events) {
return;
}
if (!eventName) {
return;
}
console.log('off', eventName, ele);
var events = ele._events[eventName];
var eventFn = ele._events[eventName + '_fn'];
// 如果只传递了事件名称而未传递具体的事件，则将指定事件名称的所有回调函数全部清除
if (eventName && !fn) {
if (document.removeEventListener) {
//for(var i = 0, len = events.length; i < len; i++){
ele.removeEventListener(eventName, eventFn, false);
//}
} else if (window.detachEvent) {
//for(var i = 0, len = events.length; i < len; i++){
ele.detachEvent('on' + eventName, eventFn);
//}
}
delete ele._events[eventName];
delete ele._events[eventName + '_fn'];
} else if (eventName && fn) {
if (!events) {
return;
}
if (document.removeEventListener) {
var index = this.getIndex(events, function (item) {
return item === fn;
});
if (index > -1) {
events.splice(index, 1);
}
if (events.length === 0) {
delete ele._events[eventName];
delete ele._events[eventName + '_fn'];
}
} else if (window.detachEvent) {
if (!events) {
return;
}
var index = this.getIndex(events, function (item) {
return item === fn;
});
if (index > -1) {
events.splice(index, 1);
}
if (events.length === 0) {
delete ele._events[eventName];
delete ele._events[eventName + '_fn'];
}
}
}
events = null;
}3.给指定元素添加class
/**
* @param ele
* @param classname
*/
function addClass (ele, classname) {
if (!ele || !classname || ele.nodeType !== 1) {
return;
}
let classArr = classname.split(' ');
if (ele.classList) {
for (var i = 0, len = classArr.length; i < len; i++) {
let item = classArr[i];
if (!ele.classList.contains(item)) {
ele.classList.add(item);
}
}
return ele;
} else {
let classNameArr = ele.className && ele.className.length > 0 ? ele.className.split(' ') : [];
if (classNameArr.length === 0) {
ele.className = classname;
return;
}
// 合并两个数组
Array.prototype.push.apply(classNameArr, classArr);
classNameArr = tool.arrayNoReapeat(classNameArr);
ele.className = classNameArr.join(' ');
return ele;
}
}4.给指定元素移除class
/**
* @param ele
* @param classname
*/
function removeClass (ele, classname) {
if (!ele || !classname || ele.nodeType !== 1) {
return;
}
let classArr = classname.split(' ');
if (ele.classList) {
for (var i = 0, len = classArr.length; i < len; i++) {
let item = classArr[i];
if (ele.classList.contains(item)) {
ele.classList.remove(item);
}
}
return ele;
} else {
let classNameArr = ele.className && ele.className.length > 0 ? ele.className.split(' ') : [];
if (classNameArr.length === 0) {
return;
}
for (var i = classNameArr.length; i >= 0; i--) {
for (var j = 0, len2 = classArr.length; j < len2; j++) {
if (classNameArr[i] === classArr[j]) {
classNameArr.splice(i, 1);
}
}
}
ele.className = classNameArr.join(' ');
return ele;
}
}5.判断元素是否包含指定className
/**
* 判断元素是否包含指定className
* @param ele dom元素
* @param className className
* @returns {boolean}
*/
function hasClass (ele, className) {
if (!ele || !ele.nodeName) {
console.error('ele 必须是一个dom元素');
return;
}
if (!className) {
console.error('className 必须是一个字符串');
return;
}
if (ele.classList) {
return ele.classList.contains(className);
} else {
let flag = false;
let classNameArr = ele.className.split(' ');
for (let i = 0, len = classNameArr.length; i < len; i++) {
if (classNameArr[i] === className) {
flag = true;
break;
}
}
return flag;
}
}6.获取元素的css属性值
/**
* 获取元素的css属性值
* @param ele dom元素
* @param cssAttribute css属性名称
*/
function getStyle (ele, cssAttribute) {
if (!ele || !ele.nodeName) {
console.error('ele 必须是一个dom元素');
return;
}
if (!cssAttribute) {
console.error('cssAttribute 必须是一个字符串');
return;
}
let val = '';
if (window.getComputedStyle) {
val = window.getComputedStyle(ele, null)[cssAttribute];
} else if (ele.currentStyle) {
val = ele.currentStyle[cssAttribute];
}
if (!isNaN(parseFloat(val))) {
return parseFloat(val);
} else {
return val;
}
}7.给元素设置css属性
/**
* 给元素设置css属性
* @param ele dom元素
* @param attr css属性名
* @param val css属性值，如果不传递attr参数，则该参数可以为一个对象，就像jquery的css()方法一样
*/
function setCss (ele, attrs, val) {
if (!ele || !ele.nodeName) {
console.error('ele 必须是一个dom元素');
return;
}
let type1 = ({}).toString.call(attrs);
// 需要字段加单位的css属性
let autoAddUnitAttr = {
width: 1, height: 1, margin: 1, padding: 1,
borderRadius: 1, top: 1, left: 1,
marginLeft: 1, marginRight: 1, marginTop: 1, marginBottom: 1,
right: 1, bottom: 1,
paddingLeft: 1, paddingRight: 1, paddingTop: 1, paddingBottom: 1,
borderTopLeftRadius: 1, borderTopRightRadius: 1,
borderBottomLeftRadius: 1, borderBottomRightRadius: 1,
fontSize: 1, lineHeight: 1, textIndent: 1,
minWidth: 1, maxWith: 1
};
if (type1 === '[object String]' && typeof val !== 'undefined') {
attrs = attrs.replace(/\-(\w)/g, function (matched, $1) {
return $1.toUpperCase();
});
if (attrs in autoAddUnitAttr && !isNaN(Number(val))) {
ele.style[attrs] = val + 'px';
} else {
ele.style[attrs] = val;
}
} else if (type1 === '[object Object]') {
let style = ele.style;
for (let attr in attrs) {
let val2 = attrs[attr];
let isNumber = Number(val2);
attr = attr.replace(/\-(\w)/g, function (matched, $1) {
return $1.toUpperCase();
});
if (attr in autoAddUnitAttr && !isNaN(isNumber)) {
style[attr] = val2 + 'px';
} else {
style[attr] = val2;
}
}
}
}8.获取兄弟节点
/**
* 获取兄弟节点
* @param elm
* @returns {Array}
*/
function siblings (elm) {
let a = [];
let p = elm.parentNode.children;
for (let i = 0, pl = p.length; i < pl; i++) {
if (p[i] !== elm) a.push(p[i]);
}
return a;
}9.判断两个元素是否是包含关系
/**
* 判断两个元素是否是包含关系
* @param ele 父元素
* @param childEle 子元素
* @returns {Boolean}
*/
function elementContains (ele, childEle) {
if (ele === childEle) {
return false;
}
if (typeof ele.contains === 'function') {
return ele.contains(childEle);
} else {
while (true) {
if (!childEle) {
return false;
}
if (childEle === ele) {
return true;
} else {
childEle = childEle.parentNode;
}
}
return false;
}
}10.将滚动条滚动到指定元素所在位置
/**
* 将滚动条滚动到指定元素所在位置
* @param ele dom元素
* @param extraTop 额外的高度，比如在元素的位置基础上加10px，或减10px
* @param autofocus 如果是表单元素的话是否滚动完后自动获得焦点
*/
function scrollToElement (ele, extraTop, autofocus) {
if (!ele || !ele.nodeName) {
console.error('ele 必须是一个dom元素');
return;
}
autofocus = !!autofocus;
let top = ele.offsetTop;
let offsetParent = ele.offsetParent;
while (offsetParent != null) {
top += offsetParent.offsetTop;
offsetParent = offsetParent.offsetParent;
}
top += extraTop;
window.scrollTo(0, top);
if (autofocus && ele.focus) {
ele.focus();
}
}11.获取元素的指定父级元素
/**
* 获取元素的指定父级元素
* @param el dom 元素
* @param className 父元素的class name
* @returns {dom、undefined}
*/
function parents (el, className) {
if (!el || !el.nodeName || !className) {
return;
}
var classNameArr = className.split(' ');
var parent = el.parentElement;
while (parent) {
var flag = true;
for (var i = 0, len = classNameArr.length; i < len; i++) {
if (!this.hasClass(parent, classNameArr[i])) {
flag = false;
break;
}
}
if (flag) {
return parent;
} else {
parent = parent.parentElement;
}
}
}12.获取元素距浏览器最顶部及最左边的距离
/**
* 获取元素距浏览器最顶部及最左边的距离
* @param ele dom元素
*/
function offset (ele) {
let positon = {
top: 0,
left: 0,
};
let offsetParent = ele.offsetParent;
positon.top = ele.offsetTop;
positon.left = ele.offsetLeft;
while (offsetParent != null) {
positon.top += offsetParent.offsetTop;
positon.left += offsetParent.offsetLeft;
offsetParent = offsetParent.offsetParent;
}
return positon;
}13.获取浏览器滚动条的位置
function scrollTop () {
return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
}