知识点必学（知识点01）
知识点必学（知识点01）而pre-wrap会保留空格。但pre-line会把多个空格合并成一个。现在我们来看一下它们与pre之间的区别呢？pre:会保留空格，但我想它与pre-line/pre-wrap最大的不同点就是不会自动换行，单行走到底，直到遇到一个换行符才会换行。（所以被嫌弃了么→ →）pre-line与pre-wrap都会自动换行（点个赞~~~）
1、检测页面不可见// 页面的 hidden属性 false true;
document.addEventListener('visibilitychange' function () {
// 页面变为不可见时触发
if (document.visibilityState == 'hidden') {
console.log('visibilitychange');
}
});2、获取数据中的/，替换成br，达到换行的效果
$(this).html($(this).html().replace("/" "<br>"));3、bootstrap中，会有tooltip宽度需要变动的时候。
.tooltip-inner {
width: 240px;
max-width: 300px !important;
background: rgba(0 0 0 0.8) !important;
}4、html中怎么下载例如pdf这种资源文件，而不是在点击浏览器的窗口中打开它们？
在标签元素中设置一个下载属性即可。
例如：<a href="http://link/to/file" download="文件名称”>点击下载</a>
tip:在手机浏览器中，会出现问题，就是因为download引起的，慎用。
5、判断是否空对象？
1）通过json自带的.stringify方法来判断
//JSON自带的stringify方法，将json转成json字符串
var c = {};
if(JSON.stringify(c) == "{}"){
console.log("是空对象"); }
2）ES6新增的Object.keys() ，判断对象keys长度是否为0
if(Object.keys(obj).length==0){
console.log("es6 通过判断key的长度是否为0：是空对象");
}else{ console.log("es6 通过判断key的长度是否为0：不是空对象");
}
3）通过jquery提供的isEmptyObject(obj)
jQuery.isEmptyObject({});//true jQuery.isEmptyObject({'foo':'bar'});//false6、data[30551][]: 3 &&data[30556][]: 2 这种参数的溯源？
var changeAnswers = {};
$('*[data-type]').on('change' function(){
var name = $(this).attr('name');
var values = [];
$('input[name=' name ']:checked').each(function(){
values.push($(this).val()); });
changeAnswers[name] = values; }
);
//将changeAnswers 参数传递过去
$.post(url { data: changeAnswers} function(){
changeAnswers = {};//清空对象
}7、unbeforeunload()事件
定义：在即将离开当前页面（刷新或关闭）时执行触发。该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。
8、white-space ---主要针对textarea输入空白或者换行保持一致。属性设置如何处理元素内的空白，这个属性声明建立布局过程中，如何处理元素中的空白符。值pre-wrap和pre-line是css2.1中新增的。
.textareaPre{
white-space: pre !important;
white-space: pre-line !important;
}宣传单显示二维码
<div class="box">
<img src="<?=$customer_service['m_url'] ?>" class="widthaudo">
</div>
//box 限制区域
.customer-service .box{
width: 132px;
height: 132px;
overflow: hidden;
position: relative;
margin: 0px auto;
}
// img 移动要显示的位置，放出来
.widthaudo{
position: absolute;
top: -36px;
left: -571px;
}引用自定义图标库svg 字体库文件.ttf等
@font-face
https://icomoon.io/app/#/select
Icomoon，矢量图标素材分享网，是一个提供一系列的矢量图标素材的博客站点，
还有免费的HTML5应用程序的自定义图标字体。
/* 引用自定义图标库svg */
@font-face {
font-family: 'sl-icon';
src: url('/static-dist/app/fonts/ff-icon.eot?q2d78v');
src: url('/static-dist/app/fonts/ff-icon.eot?q2d78v#iefix') format('embedded-opentype')
url('/static-dist/app/fonts/ff-icon.ttf?q2d78v') format('truetype')
url('/static-dist/app/fonts/ff-icon.woff?q2d78v') format('woff')
url('/static-dist/app/fonts/ff-icon.svg?q2d78v#sl-icon') format('svg');
font-weight: normal;
font-style: normal;
}
.sl-icon {
font-family: 'sl-icon' !important;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.sl-icon-shoujihao1_icon:before {
content: "\e903";
}white-space 的值：pre-line与pre-wrap。
css3为white-space新增了2个非常高冷的值：pre-line与pre-wrap。
现在我们来看一下它们与pre之间的区别呢？
pre:会保留空格，但我想它与pre-line/pre-wrap最大的不同点就是不会自动换行，单行走到底，直到遇到一个换行符才会换行。（所以被嫌弃了么→ →）
pre-line与pre-wrap都会自动换行（点个赞~~~）
但pre-line会把多个空格合并成一个。
而pre-wrap会保留空格。
//点击变换图片
$html.off('change' 'input.js_upload_pic_btn').on('change' 'input.js_upload_pic_btn' function(){
var $t = $(this);
$parent = $t.parents('div.js_t_v_list');
file = this.files[0];
fileName = $t.val();
if(!file){
return false;
}
ext =/\.[^\.] $/.exec(fileName);
ext = ext.toString().toLocaleLowerCase();
if(ext =='.jpeg' || ext =='.png' ||ext =='.jpg' || ext =='.gif'){
return false;
}
$key = $parent.find('input.js_key');
$token = $parent.find('input.js_token');
key = $key.val();
timeStr = new Date().getTime();
key = key timeStr;
key = key ext;
token = $token.val();
$uploadFileBox.addClass('disable');
$inputFile.attr('disabled' 'disabled');
Qiniu_upload_img(file token key $parent);
$t.val('');//清空已上传的文件
});
//第2种读取图片
// 读取图片
function loadFileReader(file) {
var fileReader = new FileReader();
if (file && file.type.match('image')) {
fileReader.readAsDataURL(file);
fileReader.onload=function(e){
initCropitPanel(this.result); // 初始化头像弹框
}
} else if (file) {
console.log('load image file error');
}
};
// 点击修改头像
$('#J_cropitFileInput').off('change').on('change' function(){
file = this.files[0];
loadFileReader( file ); // reader file
});浏览器混合内容阻止
https网站静态内容被阻止，page was loaded over HTTPS but requested an insecure stylesheet解决办法
Mixed Content: The page at 'https://www.kungge.com/technews' was loaded over
HTTPS but requested an insecure stylesheet
'http://alyoss.kungge.com/NewContent/css/bootstrap.min.css'.
This request has been blocked; the content must be served over HTTPS.
意思是我主域名kungge.com使用的https，而请求的确实http协议的域名数据，
被浏览器认为是不安全的，所以被阻止了。
解决办法：页面的head中加入：
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
意思是自动将http的不安全请求升级为https
我在项目中遇到类似情况，但是从第三方服务器资源拿到本地就解决了这样的问题，所以这也算一种参考吧。
jquery的$post 方法不发送空数组的解决方法前提：后端需要前端传过来空数组的参数。 参数都在，但是发送不了，原因是：
ajax请求会自动忽略空数组参数，无论请求方法是get 还是post请求，都会忽略空数组。
解决方案： data为[] 要以json 格式传输。
“Uncaught RangeError: Maximum call stack size exceeded”超出最大调用值“Uncaught RangeError: Maximum call stack size exceeded”。错误直译过来就是“栈溢出”。当运行js时出现这个报错，但你又查不到原因的时候，不要慌。
真相就是你的代码进入死循环了。浏览器会在不停执行超出最大调用值时报这个异常，排查方向可以看判断条件是否写的不完整。
使用<a>标签时，你可能会忽略的一个安全问题当一个外部链接使用了target=_blank的方式，这个外部链接会打开一个新的浏览器tab。此时，新页面会打开，并且和原始页面占用同一个进程。这也意味着，如果这个新页面有任何性能上的问题，比如有一个很高的加载时间，这也将会影响到原始页面的表现。如果你打开的是一个同域的页面，那么你将可以在新页面访问到原始页面的所有内容，包括document对象(window.opener.document)。如果你打开的是一个跨域的页面，你虽然无法访问到document，但是你依然可以访问到location对象。
这意味着，如果你在你的站点或者文章中，嵌入了通过新窗口打开一个新页面的链接，这个新页面可以使用window.opener，在一定程度上来修改原始页面。
那么问题来了：我们如何阻止这种情况的发生呢？在所有使用target=_blank打开新页面的链接上，加上rel="noopener"。
<a href="https://niteshsoni.info" rel="noopener"></a>
使用了rel=noopener以后，当一个新页面通过一个链接打开后，新页面中的恶意JavaScript代码将无法通过window.opener来访问到原始页面。这将保证新页面运行在一个单独的进程里。
在老浏览器中，你可以使用rel=noreferrer属性，具有同样的效果。但是，这样也会阻止Refererheader被发送到新页面。
<a href="https://niteshsoni.info" rel="noopener noreferrer"></a>
在上面的例子中，使用了rel="noreferrer" ，当一个用户点击了这个超链接进入到新页面后，新页面拿不到referrer信息。这将意味着，新页面不知道用户是从哪里来的。
如果你通过JavaScript中的window.open打开一个页面的话，上文所说的都适用，因为你也是打开了一个新的窗口。在这种情况下，你不得不清楚掉opener对象：
var newWindow = window.open("http://....");
newWindow.opener = null;
在我看来，使用第一种解决方案(在每一个target="_blank"的链接中加上rel="noopener")是没有什么明显的坏处的。这个问题表明，在你的网页安全性中找到漏洞是多么的容易。
nofollow 告诉机器（爬虫）无需追踪该目标页
noopener 在新标签中打开链接时基本不会打开它的开启者
noreferrer 隐藏引用者信息
