前端 实用的冷门知识 持续更新中......

 

1.类似于jquery中的  toggle()

 // 如果有这个类名，就去掉，如果没有，就加上
        div.classList.toggle("expand");

2.css3中   columns属性实现瀑布流布局  ,多列布局

div
{
    columns:100px 3;   //分成3列  每列100px,如果视口缩小 则列数随之减少
    -webkit-columns:100px 3; /* Safari and Chrome */
    -moz-columns:100px 3; /* Firefox */
}

column-width给列定义个最小的宽度。默认值为auto表示将根据column-count列的数量自动调整列宽。
column-count最大列数
column-gap: 列与列间的间隙, ie下默认为 16px，其它浏览器未明确给出。

column-rule 每列间隙中的竖线

column-span: 元素跨越列数(firefox 不支持)

 3.非css3椭圆形阴影写法

#shadow {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    background: black;
    opacity: 0.5;
    -webkit-filter: blur(10px);
    -webkit-transform: scale(1,0.2);
}

 4.jq去重

$.unique(themeIdArr)

5.数组总的数字字符转为数字

//使用 map 重新格式化数组中的对象
['123','456','789'].map(Number)  //[123,456,789]

 6.判断是否上一页

 function goback(){
        document.referrer === '' ?
          console.log(‘没有上一页时’):
          window.history.go(-1);
    }

注释：判断是否有没有来源信息就是使用这里的document.referrer，当浏览器得不到上一页的来源信息的时候，document.referrer的返回值就是空字符串''

7.判断是否为首次加载

if(window.name == ""){
  console.log("首次被加载");
  window.name = "isReload";  // 在首次进入页面时我们可以给window.name设置一个固定值 
}else if(window.name == "isReload"){
   console.log("页面被刷新");
}

8. 将url中的query参数转换为对象

出现的问题:   当div渲染时会直接将最终设定的样式渲染上去  ,  并没有是达到  scale(0)到scale(1)  的效果

function urlToObj(str){
　　var obj = {};
　　var arr1 = str.split("?");
　　var arr2 = arr1[1].split("&");
　　for(var i=0 ; i < arr2.length; i++){
　　　　var res = arr2[i].split("=");
　　　　obj[res[0]] = res[1];
　　}
　　return obj;
}

9. js中的强制渲染   getComputedStyle()

出现的问题:   当div渲染时会直接将最终设定的样式渲染上去  ,  并没有是达到  scale(0)到scale(1)  的效果

解决方案 :   getComputedStyle(div).top;  当元素刚添加至页面  就先强制渲染  然后再执行下一行代码 来实现效果

//为了实现动画，添加div的时候，要将它设置为最小
    div.style.transform = "translate(-50%, -50%) scale(0)";
    document.body.appendChild(div);
    //强行让浏览器进行渲染：只要出现读取某个元素最终样式（位置、尺寸）的代码
      getComputedStyle(div).top; //这句代码除了让浏览器强行渲染之外，没有任何其他意义

    //将div变回原来的大小
    div.style.transform = "translate(-50%, -50%) scale(1)";

10. 通过模拟点击,来扩大点击范围

clickAlabel($('.father02'))
function clickAlabel(target){
    target.on("click",function(e){
        let nodeName = e.target.nodeName;
        if(nodeName !="A"){
            let link = $(this).find("a")[0];
            link.click();
        }
    })
}

11. 通过window对象来获取dom元素

 在元素节点上加上 id , window上就会默认将这个id名作为键名 , 值为dom元素

举例:

通过  window.postttt  , 获取到id为 postttt 的元素

....