获取url参数
// 方法一：
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
}
// 方法二;
function getQueryStringArgs() {
// 取得查询字符串并去掉开头的问号
var qs = (location.search.length > 0 ? location.search.substring(1) : ''),
// 保存数据的对象
args = {},
// 取得每一项
items = qs.length ? qs.split('&') : [],
item = null,
name = null,
value = null;
//逐个将每一项添加到args对象中
for (var i = 0; i < items.length; i++) {
item = items[i].split('=');
name = decodeURIComponent(item[0]);
value = decodeURIComponent(item[1]);
if (name.length) {
args[name] = value;
}
}
return args;
}
JavaScript加载样式文件
function loadStyle(url) {
var cssLink = document.createElement('link');
cssLink.rel = 'stylesheet';
cssLink.type = 'text/css';
cssLink.href = url;
var head = document.getElementsByTagName('head')[0];
head.appendChild(cssLink)
}
匹配多个转行的空格
^\s*(?=\r?$)\n
递归函数
function curData(keywords, filterData) {
var ret = [];
if (keywords.length == 0) {
return filterData;
}
var pop = keywords.shift().toLowerCase();
for (var i = 0; i < filterData.length; i++) {
var dataqp = filterData[i]['data-name'].toLowerCase();
var patt = new RegExp(pop).test(dataqp);
if (patt) {
ret.push(filterData[i]);
}
}
ret = curData(keywords, ret);
return ret;
}
列队递归函数
let ID = 0;
function createAsset(filename) {
let duixiang = {
ss : [ID]
}
return duixiang
}
function createGraph(){
let mainAsset = createAsset();
let queue = [mainAsset]
for (const asset of queue) {
console.log(queue)
asset.ss.forEach(path => {
let child = createAsset()
queue.push(child)
})
}
}
createGraph();
// 需要注意，我现在给的代码是死循环，控制器就是ss里面的值，如果值为空时，就停止执行，如果一直都有，就一直执行，达到循环
获取对象的样式
// 获取marginLeft
var oUlMargin = getComputedStyle(obj, null).marginLeft;
// 设置ul的marginLeft
obj.style.marginLeft = 0 + "px";
给元素添加class
oLi[0].classList.add("active");
获取class集合
let oUl = document.querySelectorAll(".J-carousel ul");
复制元素节点
var iframe = document.getElementsByTagName("iframe")[0];
var oldNode = iframe.contentDocument.getElementById("myNode");
var newNode = document.importNode(oldNode, true);
document.getElementById("container").appendChild(newNode);
插入节点
before把参数节点插入到目标节点前面，只需获取目标节点的父节点，然后父节点调用insertBefore即可。
prepend把参数节点插入到目标节点第一个子节点的位置，获取目标节点的第一个子节点，然后调用insertBefore即可。
append的功能和原生API里appendChild的功能一样。
after把参数节点插入到目标节点的后面，只需获取目标节点的nextSibling，然后调用insertBefore即可。
动画封装
var lastTime = 0;
var prefixes = 'webkit moz ms o'.split(' '); //各浏览器前缀
var requestAnimationFrame = window.requestAnimationFrame;
var cancelAnimationFrame = window.cancelAnimationFrame;
var prefix;
//通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
for( var i = 0; i < prefixes.length; i++ ) {
if ( requestAnimationFrame && cancelAnimationFrame ) {
break;
}
prefix = prefixes[i];
requestAnimationFrame = requestAnimationFrame || window[ prefix + 'RequestAnimationFrame' ];
cancelAnimationFrame = cancelAnimationFrame || window[ prefix + 'CancelAnimationFrame' ] || window[ prefix + 'CancelRequestAnimationFrame' ];
}
//如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
if ( !requestAnimationFrame || !cancelAnimationFrame ) {
requestAnimationFrame = function( callback, element ) {
var currTime = new Date().getTime();
//为了使setTimteout的尽可能的接近每秒60帧的效果
var timeToCall = Math.max( 0, 16 - ( currTime - lastTime ) );
var id = window.setTimeout( function() {
callback( currTime + timeToCall );
}, timeToCall );
lastTime = currTime + timeToCall;
return id;
};
cancelAnimationFrame = function( id ) {
window.clearTimeout( id );
};
}
//得到兼容各浏览器的API
window.requestAnimationFrame = requestAnimationFrame;
window.cancelAnimationFrame = cancelAnimationFrame;
字符串转json对象
function getJsonObj(str) {
var obj = new Function('return ' + str)
return obj();
}
var strJson = '{a:1,b:2}';
var json = getJsonObj(strJson);
console.log(typeof json)
console.log(json)
内置对象的扩展方法
function MyArray(){
MyArray.prototype = new Array();
MyArray.prototype.run = function(){
console.log('添加了一个方法')
}
};
var arr = new MyArray();
console.log(arr);
浅拷贝
Object.assign(copyObj,obj);
深拷贝
var oldObj = {
name : '小明',
age : 18,
friends:['小花','小猪'],
goodF:{
name : '小夏',
age : 18,
adress : '上海',
petsd : [{name:'土豆'},{name:'苹果'}]
},
bir : new Date()
}
function deepCopyObj(oldObj, newObj){
// 先检查第一个参数是否有值，如果没有就初始化一个空对象
for (const key in oldObj) {
if (oldObj.hasOwnProperty(key)) {
const oldValue = oldObj[key];
if(!isObj(oldValue)){
newObj[key] = oldValue;
}else{
// 如果是引用类型，就再调用一次这个方法，去内部拷贝这个对象的所有属性
var temObj = new oldValue.constructor;
deepCopyObj(oldValue, temObj);
newObj[key] = temObj;
}
}
}
}
// 判断是否是一个对象
function isObj(obj){
return obj instanceof Object;
}
// 判断是否是一个对象
function isArray(obj){
return Array.isArray(obj);
}
// 调用
var newObj = [];
deepCopyObj(oldObj,newObj);
console.log(newObj)
resize自适应屏幕，优化性能
// 初始化参数
var winH = $(window).height();
// 屏幕尺寸变化，winH实时获取最新高度
var winTimer = null;
$(window).resize(function () {
winTimer = setTimeout(function () {
clearTimeout(winTimer);
var activewinH = $(window).height();
if(activewinH != winH){
winH = activewinH;
}
}, 200)
})
跨域的iframe如何做高度自适应
方法一：
<!-- a.com -->
<iframe id="frame" src="http://b.com/">
<!-- b.com -->
<iframe src="http://a.com/proxy.html?height=111">
<!-- a.com/aaa.html -->
<script>
top.document.getElementById('frame').height = window.location.search.split('=')[1];
</script>
</iframe>
</iframe>
方法二：
网友评论