前段知识点
Posted the-meaning-of-life111
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前段知识点相关的知识，希望对你有一定的参考价值。
前端开发中79条不可忽视的知识点汇总
1.css禁用鼠标事件
.disabled {
pointer-events: none;
cursor: default;
opacity: 0.6;
}2.get/post的理解和他们之间的区别
http
超文本传输协议（HTTP）的设计目的是保证客户机与服务器之间的通信。 HTTP 的工作方式是客户机与服务器之间的请求-应答协议。 web 浏览器可能是客户端，而计算机上的网络应用程序也可能作为服务器端。
http方法：
HEAD: 与 GET 相同，但只返回 HTTP 报头，不返回文档主体 PUT: 上传指定的 URI 表示 DELETE: 删除指定资源 OPTIONS: 返回服务器支持的 HTTP 方法 CONNECT: 把请求连接转换到透明的 TCP/IP 通道 POST: 向指定的资源提交要被处理的数据
// 查询字符串（名称/值对）是在 POST 请求的 HTTP 消息主体中发送的
POST /test/demo_form.asp HTTP/1.1
Host: w3schools.com
name1=value1&name2=value2
GET: 从指定的资源请求数据
GET和POST的区别
GET 请求可被缓存 GET 请求保留在浏览器历史记录中 GET 请求可被收藏为书签 GET 请求不应在处理敏感数据时使用 GET 请求有长度限制(2048字符),IE和Safari浏览器限制2k;Opera限制4k;Firefox，Chrome限制8k GET 请求只应当用于取回数据
POST 请求不会被缓存 POST 请求不会保留在浏览器历史记录中 POST 不能被收藏为书签 POST 请求对数据长度没有要求
3.实现条纹网格的方式
nth-child(even/odd)
// odd表示基数，此时选中基数行的样式，even表示偶数行
.row:nth-child(odd){
background: #eee;
}
nth-of-type(odd)
.row:nth-of-type(odd){
background: #eee;
}
渐变实现linear-gradient
.stripe-bg{
padding: .5em;
line-height: 1.5em;
background: beige;
background-size: auto 3em;
background-origin: content-box;
background-image: linear-gradient(rgba(0,0,0,.2) 50%, transparent 0);
}
4.js求平面两点之间的距离
// 数据可以以数组方式存储，也可以是对象方式
let a = {x:‘6‘, y:10},
b = {x: 8, y: 20};
function distant(a,b){
let dx = Number(a.x) - Number(b.x)
let dy = Number(a.y) - Number(b.y)
return Math.pow(dx*dx + dy*dy, .5)
}
5.css禁止用户选择
body{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
6.数组去重
// indexOf实现
var array = [1, 1, ‘1‘];
function unique(array) {
var res = [];
for (var i = 0, len = array.length; i < len; i++) {
var current = array[i];
if (res.indexOf(current) === -1) {
res.push(current)
}
}
return res;
}
console.log(unique(array));
// 排序后去重
var array = [1, 1, ‘1‘];
function unique(array) {
var res = [];
var sortedArray = array.concat().sort();
var seen;
for (var i = 0, len = sortedArray.length; i < len; i++) {
// 如果是第一个元素或者相邻的元素不相同
if (!i || seen !== sortedArray[i]) {
res.push(sortedArray[i])
}
seen = sortedArray[i];
}
return res;
}
console.log(unique(array));
// filter实现
var array = [1, 2, 1, 1, ‘1‘];
function unique(array) {
var res = array.filter(function(item, index, array){
return array.indexOf(item) === index;
})
return res;
}
console.log(unique(array));
// 排序去重
var array