小技巧

2020-05-22

CSS

1- 制作小三角

利用没有宽度和高度只有border的元素，当border-top-color是有颜色，其他边都是透明色就有三角。

<div class="con">123</div>

.con::before {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: 28px;
    left: 18px;
    border: 8px solid #000;
    border-style: solid dashed dashed;
    border-color: #fff transparent transparent;
}

如果三角是朝右的，只需修改边框颜色为border-color: transparent #fff transparent transparent;

2- 带有文字的圆形图标

因为图形内有文字，可以考虑使用border-radius 和绝对定位

除了圆形图标之外，利用border-radius可以制作各种形状的小图标

.close {
    position: absolute;
    top: -20px;
    right: -20px;
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    border: 1pX solid #ebebeb;
    background-color: #ffffff;
    line-height: 40px;
    font-size: 12px;
    text-align: center;
}

3 - 三角按钮

主要利用了 transform 的 rotate属性

.right span {
  position: relative;
  padding-right: 10px;
}
.right span::after {
  position: absolute;
  right: 0;
  top: 2px;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 1px solid #888;
  border-right: 1px solid #888;
  transform: rotate(45deg);
}

4 - 遮罩层

使用before等元素
使用固定定位

当我们需要给某个盒子设置遮罩层的时候，可以在盒子内设置一个div 这个div是固定定位至盒子的最顶端，然后这个div是占满整个盒子，最后使用z-index把遮罩层设置到盒子的下面。

.bc {
    position: fixed; //这里是需要一个占满整个网页的遮罩层。
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .3);
}

JS

1- 奇数次点击打开，偶数次点击关闭

var flag = 0; //这个flag放在函数外部，只执行一次
open.addEventListener('click', function() {
    if (flag === 0) {
        bc.style.display = 'block';
        flag = 1;
    } else {
        bc.style.display = 'none';
        flag = 0; //这里需要再次设置flag
    }
})

2 - 双击某元素（带有文字），出现一个文本框，可以通过文本框修改某元素内的文字。

双击文字的时候，在里面生成一个文本框,
当失去焦点或者按下回车然后把文本框输入的值给原先元素即可。

$("ul , ol ").on("dblclick", "p", function() {
    var content = $(this).text();
    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); ////双击选中会选中p元素的文字，禁用
    // console.log(content);
    // 在p里面添加一个文本框
    $(this).html("<input type='text'/>");
    var input = $(this).children("input");
    input.val(content);
    input.select(); //选中文本框的所有文字，方便统一修改
    input.on({
        blur: function() {
            // if ($(this).val == "") return;
            $(this).parent().text($(this).val()); //text()方法向p里面新添加了内容，因此input会消失。
        },
        keyup: function(e) {
            if (e.keyCode === 13) {
                $(this).blur(); //因为blur方法的结果和这个结果一样，所以手动调用
            }
        }
    });

})

3 - dom元素添加html标签

传统做法可以先创建元素，然后追加，但是当需要添加很多html标签时候就很麻烦。因此可以使用 element.insertAdjacentHTML()方法。

insertAdjacentHTML() 方法将指定的文本解析为 Element 元素，并将结果节点插入到DOM树中的指定位置。

1	element.insertAdjacentHTML(position, text);

position是插入的位置
text是插入的文本，String型

算法的优化

1） x && F(x)

x && F(x) 是当x本身就是false不存在的时候，就不会执行后面的F(x),这样显然提高了效率，比如下面这个

1 2	index--; lis[index] && lis[index].onclick();//比如index是负数的时候，后面的代码不会执行，点击事件也不会触发

2) return 直接跳出当前函数（在 if 的分支里面用效果比较好）

如下在某个函数里面，如果文档中没有这个‘active’类，那么就要执行很多代码，可是如果有这个类，就不需要执行了，此时一个return解决了我们的燃眉之急。

  function(){
  .....
    if (document.querySelector('.active')) return;
  ......
}

return 三元表达式代替仅有if … else … 的函数

1
2
3

yd: function(flag) {
    return flag ? total + 10 : total;
}

3 ) 手动调用事件

比如我们在函数A里，接下来的运行效果和已经写好的函数B相同，那么我们在A里面可以直接调用B函数，减少了代码量。

1	this.onclick()//手动调用我们的点击事件不需要鼠标触发

4） some方法

首先some（）方法的效率非常高，尤其数据很多的时候，some的使用条件：当我们检索某个唯一值（需要遍历数组）的时候，可以使用some() 方法，因为some检索到检索值之后，就会终止循环。

some（）通常是 return value == 检测值;来结束循环条件，但是我们可以根据需求，自动设置返回值。比如下面这段代码，可以获取到检索值同时还能结束循环条件

data.some(function(value) {
    if (value.pname === product.value) {
        arrp.pop(value);
        return true;
    }
});

5）三元表达式

用于切换一个变量的两个值

1
2
3

toggleLoginType: function() {
    return this.loginType = this.loginType === 'username' ? 'email' : 'username'
}

CSS