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 res = {};
var reg = /\[\]$/;
queryStringArr.forEach(function (item) {var itemArr = item.split('=');
var name = itemArr[0];
var value = 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
文件名称：
文件大小：
下载声明：本站部分资源来自于网络收集，若侵犯了你的隐私或版权，请及时联系我们删除有关信息。
下载地址：
, 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<mx;++i) uiArr[i]= binData.charCodeAt(i);
return new myBlob([uiArr], {type: type});
}
function saver(url, winMode){if ('download' in anchor) {//html5 A
文件名称：
文件大小：
下载声明：本站部分资源来自于网络收集，若侵犯了你的隐私或版权，请及时联系我们删除有关信息。
下载地址：
anchor.href = url;
anchor.setAttribute("download", fileName);
anchor.className = "download-js-link";
anchor.innerHTML = "downloading...";
anchor.style.display = "none";
document.body.appendChild(anchor);
setTimeout(function() {anchor.click();
document.body.removeChild(anchor);
if(winMode===true){setTimeout(function(){self.URL.revokeObjectURL(anchor.href);}, 250 );}
}, 66);
return true;
}
// handle non-a
文件名称：
文件大小：
下载声明：本站部分资源来自于网络收集，若侵犯了你的隐私或版权，请及时联系我们删除有关信息。
下载地址：
safari as best we can:
if(/(Version)\/(\d+)\.(\d+)(?:\.(\d+))?.*Safari\//.test(navigator.userAgent)) {url=url.replace(/^data:([\w\/\-\+]+)/, defaultMime);
if(!window.open(url)){ // popup blocked, offer direct download:
if(confirm("Displaying New Document\n\nUse Save As... to download, then click back to return to this page.")){location.href=url;}
}
return true;
}
//do iframe dataURL download (old ch+FF):
var f = document.createElement("iframe");
document.body.appendChild(f);
if(!winMode){ // force a mime that will download:
url="data:"+url.replace(/^data:([\w\/\-\+]+)/, defaultMime);
}
f.src=url;
setTimeout(function(){document.body.removeChild(f); }, 333);
}//end saver
if (navigator.msSaveBlob) {// IE10+ : (has Blob, but not a
文件名称：
文件大小：
下载声明：本站部分资源来自于网络收集，若侵犯了你的隐私或版权，请及时联系我们删除有关信息。
下载地址：
or URL)
return navigator.msSaveBlob(blob, fileName);
}
if(self.URL){ // simple fast and modern way using Blob and URL:
saver(self.URL.createObjectURL(blob), true);
}else{// handle non-Blob()+non-URL browsers:
if(typeof blob === "string" || blob.constructor===toString){
try{return saver( "data:" + mimeType + ";base64," + self.btoa(blob) );
}catch(y){return saver( "data:" + mimeType + "," + encodeURIComponent(blob) );
}
}
// Blob but not URL support:
reader=new FileReader();
reader.onload=function(e){saver(this.result);
};
reader.readAsDataURL(blob);
}
return true;
}; /* end download() */}));
// 下载一张图片
function downloadImg(url, imgName, fn){var x=new XMLHttpRequest();
var name = imgName ? (imgName + '.png') : (new Date().getTime() + '.png');
x.open("GET", url, true);
x.responseType = 'blob';
x.onload = function (e) {download(x.response, name, "image/png");
console.log('图片下载实现');
if(typeof fn === 'function'){fn();
}
}
x.send();}
// 批量下载
function downloadImgBatch(imgArr){let timer = setInterval(function () {console.log('imgArr.length', imgArr.length);
if(imgArr.length > 0){let img = imgArr.shift(0);
downloadImg(img.url, img.name);
}else{clearInterval(timer);
}
}, 500);
}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;}