[TOC] ## 技巧 ### 从二位数组中通过某个字段的value 找到这个数组 ``` var inventory = [ {name: 'apples', quantity: 2}, {name: 'bananas', quantity: 0}, {name: 'cherries', quantity: 5} ]; function findCherries(fruit) { return fruit.name === 'cherries'; } console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 } ``` ### 使图层调动 GPU 的加速 在css 中加入`transform` `transform: translate3d(0,0,0)` ### 滚动屏幕,自动定位相应的标签 1. 计算出每个`li` 的高度,放入 `listheight` 数组中 2. 滚动时,获取实的高度,放入 `scrollY` 中 3. 判断`this.scrollY >= height1 && this.scrollY < height2` 返回对应`listheight`中的`key` 值,通过`key` 给对应的 li 添加 选中的样式 ### url 做 encodeUrl处理 `encodeURI( 'https://mozilla.org/?x=шеллы'); //https://mozilla.org/?x=%D1%88%D0%B5%D0%BB%D0%BB%D1%8B` ### 快速获取当前url参数值 ``` var url = new URL(window.location); var foo = url.searchParams.get('foo') || 'somedefault'; ``` ### URLSearchParams 操作url 参数 ``` var params = new URLSearchParams({'foo': 1 , 'bar': 2}); params.append('foo', 3); params.toString() // "foo=1&bar=2&foo=3" ``` ### 使用` return false`阻止默认行为 `<p onclick="alert('adsad');return false;">hello</p>` ### 解构对象 #### 对象 用法一: ``` const obj = { name: 'Joe', food: 'cake' } const { name, food } = obj; ``` 用法二: ``` const person = { name: 'Eddie', age: 24 } function introduce({ name, age }) { console.log(`I'm ${name} and I'm ${age} years old!`); } console.log(introduce(person)); ``` #### 数组 ``` var input = [1, 2]; var [first, second] = input; console.log(first); // outputs 1 console.log(second); // outputs 2 ``` ### 展开 #### 数组 ``` let a=[1,2] let b=[3,5] let c=[1,...a,...b] ;//[ 1, 1, 2, 3, 5 ] ``` #### 对象 ``` let defaults = { food: "spicy", price: "$$", ambiance: "noisy" }; let search = { ...defaults, food: "rich" }; ``` 属性相同,则后面覆盖前面 ### 表单提交前做处理 ``` $('button[type=submit]').on('click',function (e) { alert("asd"); }) ``` 阻止提交表单 `e.preventDefault();` ### keyup 延迟执行 ``` var last; $(".input").keyup(function(event){  //.input为输入框   last = event.timeStamp;  //利用event的timeStamp来标记时间,这样每次的keyup事件都会修改last的值,注意last必需为全局变量   setTimeout(function(){ //设时延迟0.5s执行     if(last-event.timeStamp==0)  //只有在这500ms之内没有key-up事件,那么if语句的表达式就执行     //如果时间差为0(也就是你停止输入0.5s之内都没有其它的keyup事件发生)则做你想要做的事     {     //TODO     }   }, 500); } ``` ### 阻止事件冒泡和浏览器的默认行为 ``` function stopBubble(e) { //如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else //否则,我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble = true; } ``` ## 方法 ### 原生点击提示信息 ``` function bh_msg_tips(msg){ var oMask = document.createElement("div"); oMask.id = "bh_msg_lay"; oMask.style.position="fixed"; oMask.style.left="0"; oMask.style.top="50%"; oMask.style.zIndex="100"; oMask.style.textAlign="center"; oMask.style.width="100%"; oMask.innerHTML = "<span style='background: rgba(0, 0, 0, 0.65);color: #fff;padding: 10px 15px;border-radius: 3px; font-size: 14px;'>" + msg + "</span>"; document.body.appendChild(oMask); setTimeout(function(){$("#bh_msg_lay").remove();},2000); } ``` ### 自定义去除字符 ``` String.prototype.OkTrim=function (tag) { var notreg = '^\\/()'; if (notreg.indexOf(tag)!=-1){ tag = '\\'+tag; } var reg =new RegExp('^'+tag+'|'+tag+'$','g'); return this.replace(reg,''); } '^asdasd^'.OkTrim('^'); //asdasd "hello word he".OkTrim('he'); //llo word ``` ### 平滑滚动到顶部 ``` var scrollSmoothTo = function (position) { if (!window.requestAnimationFrame) { window.requestAnimationFrame = function(callback, element) { return setTimeout(callback, 17); }; } // 当前滚动高度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 滚动step方法 var step = function () { // 距离目标滚动距离 var distance = position - scrollTop; // 目标滚动位置 scrollTop = scrollTop + distance / 5; if (Math.abs(distance) < 1) { window.scrollTo(0, position); } else { window.scrollTo(0, scrollTop); requestAnimationFrame(step); } }; step(); }; //使用 scrollSmoothTo(100) ``` ### 原生图片懒加载 ``` var bodyScrollHeight = document.body.scrollTop;// body滚动高度 var windowHeight = window.innerHeight;// 视窗高度 var imgs = document.getElementsByClassName('lazyloadimg'); for (var i =0; i < imgs.length; i++) { var imgHeight = imgs[i].offsetTop;// 图片距离顶部高度 if (imgHeight < windowHeight + bodyScrollHeight) { imgs[i].src = imgs[i].getAttribute('data-src'); img[i].className = img[i].className.replace('lazyloadimg','') } } } ``` ### 图片放大 ``` <img onclick='bigviewimg(this)' > function bigviewimg(img) { var url = $(img).data('url') var htmlText='<div onclick="this.style.display=\'none\'" class="img_show" style=" position: absolute;; bottom: 40px; top:40px; left: 40px; right: 40px; background-color: #000000; text-align: center; z-index:999999; border: 2px solid #fff;">\n' + ' </div> <img style=" max-width: 100%; position: absolute; top: 50%; left:50%; transform:translate(-50%,-50%)" src="'+url+'" alt=""></div>' $('body').append(htmlText) } ```