date/****js相关*******************************************************/
//适配代码
<script type=text/javascript>(function(doc,win){var docEl=doc.documentElement,resizeEvt="orientationchange" in window?"orientationchange":"resize",recalc=function(){var clientWidth=docEl.clientWidth;if(!clientWidth){return}if(clientWidth>=640){docEl.style.fontSize="100px"}else{docEl.style.fontSize=100*(clientWidth/750)+"px";var div=document.createElement("div");div.style.width="1.4rem";div.style.height="0";document.body.appendChild(div);var ideal=140*clientWidth/750;var rmd=(div.clientWidth/ideal);if(rmd>1.2||rmd<0.8){docEl.style.fontSize=100*(clientWidth/750)/rmd+"px"}document.body.removeChild(div)}};if(!doc.addEventListener){return}win.addEventListener(resizeEvt,recalc,false);doc.addEventListener("DOMContentLoaded",recalc,false)})(document,window);</script>
btn.onclick=function(event){};
event.target;event.data;event.type;event.clientX;
e.stoppropagation();//阻止冒泡事件
e.preventdefault();//阻止默认事件
console.debug();(无效)
console.info();(无效)
console.warn();
console.error();
这四个方法的使用方法跟 console.log() 一模一样，差别在于输出的颜色与图标不同。
console.table()以表格的形式输出js对象，不好用
console.time("for-test");
要执行的代码
const arr = [];
for(let i = 0; i < 100000; i++) {
arr.push({"key": i});
}
console.timeEnd("for-test");
输出一段代码的执行时间
function func() {
console.count("label");
}
for(let i = 0; i < 3; i++) {
func();
}
输出一段代码的执行次数
console.group("1");
console.log("1-1");
console.log("1-2");
console.log("1-3");
console.groupEnd();
console.groupCollapsed("2");
console.log("2-1");
console.log("2-2");
console.log("2-3");
console.groupEnd();
group默认为展开运行结果
groupCollapsed默认为折叠运行结果
sessionStorage.setItem('pcUserInfo',encodeURIComponent(JSON.stringify(data.data)));//存储PC后台登录用户所有信息
var user_info_obj = JSON.parse(decodeURIComponent(sessionStorage.getItem('pcUserInfo'))); //读取缓存
变量必须是字母，下划线_或$开头，变量可以包含中文，如var _企鹅 = 'gg';
强制转换成boolean型,如var num = 100;console.log(!!num);
var a = '15.15abc',b='10.15';c='10.0abc';
alert(parseInt(a)+Number(b)+parseFloat(c));15 + 10.15 + 10.0;
parseInt(110, 2);把2进制的110转换为10进制输出
NumberObject.toFixed(num);
如3.14159265358.toFixed(2);//可把Number四舍五入为指定小数位置的数字
str.substr(str.lastIndexOf('.')).toLowerCase();//取文件字符串后缀名转为小写
Math.ceil();向上取整
Math.floor();向上取整
Math.round();向上取整
str.charAt(index);//返回字符串索引处的字符
str.indexOf('a');//返回字符串的索引值
str.lastIndexOf('a');//返回字符串的索引值,从后往前索引
str.slice(index);//返回字符串索引值之后的字符串部分
str.slice(3,6);//返回索引从3开始6结束的字符串部分
var exist = this.classList.contains('active');
this.classList.toggle('active', !exist);
add('active'),remove('active')
this.className.split(' ')
this.dataset('aa');
$(this).data('aa');
this.getAttribute('data-aa');
new Date().toLocaleDateString();//返回2018/5/11这样的日期
new Date().toLocaleTimeString();//返回下午1:43:45这样的时间
'use strict';//启用严格模式
isFinite() 函数用于检查其参数是否是无穷大。
isNaN() 函数用于检查其参数是否是非数字值。
Math.max.apply(null, arr1);//数组最大值
Math.min.apply(null, arr1);//数组最小值
_arr1.push.apply(_arr1, _arr2);//把数组_arr2的元素添加到_arr1中
urlStr.replace(/(http|https):\/\//g, 'https://');
let aa = new Date().getTime();
let bb = Date.now();
//两者效果一致
http://192.168.0.154:8020/lianxi0301/location.html?nn=2#name
location.search:?nn=2 以第一个?开始,至行尾或#结束
location.hash:#name 以#开始,至行尾结束
document.body.style.backgroundImage;
document.getElementById("span1").outerHTML
HTML5本地存储只能存字符串，任何格式存储的时候都会被自动转为字符串，所以读取的时候，需要自己进行类型的转换
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout,mouseover事件.//尽量不要用
只有在鼠标指针离开被选元素时，才会触发 mouseleave,mouseenter事件.//用的情况更多
//数组依据元素的某一数值排序
var compare = function (x, y) {//比较函数
var _num1 = (Number(x['v4']) + Number(x['v2'])*10);
var _num2 = (Number(y['v4']) + Number(y['v2'])*10);
return (_num1 < _num2)?1:((_num1 > _num2)?-1:0);
};
arr.sort(compare);//重新排序,作用于arr本身，不会赋值给新的数组
<input type="date" />样式修改，兼容的处理最好是在外层加一个div，这样才能保证完全兼容的文字居中
<img onerror="javascript:this.src='image/aa.jpg'" />onerror可处理图片加载失败时的显示
delete vv['b'];//删除某一个对象的属性
arrTemp.splice(arrTemp.indexOf(data.id), 1);//数组移除指定元素
html{font-size: calc(100vw/7.5 + 0px)};//可以代替js做移动端适配处理
/****js相关*******************************************************/
/****vue相关*******************************************************/
运行vue，如果出现
'vue' is not recognized as an internal or external command, operable program
则添加环境变量
全局PATH里加一条C:\Develop\nvm\npm(此目录下有vue vue-list vue-init)
npm install vue-cli -g
vue init webpack projectname
cd projectname
npm install axios vue-axios qs vue-awesome-swiper --save
npm run dev
npm run build
事件修饰符
.stop
.prevent
.capture
.self
.once
vm.$data,vm.$el,
vm.$watch('a', function(newValue, oldValue){});
this.$nextTick(()=>{});//dom更新之后执行
<my-component></my-component>自定义组件的名字必须是中划线链接，不能是驼峰规则，不能含有数字
@click="change($event)";
change(e){console.log(e.target);//得到dom节点信息}
如果要在手机上预览到vue项目效果
config->index.js文件里的host:'localhost'改为host:'0.0.0.0'
上线时，把build后边的assetsPublicPath:'/'改为'./'，可使文件路径正确
dev后边的autoOpenBrowser值改为true可在运行npm run dev时自动打开本地浏览器
当你给一个vue组件绑定事件时候，要加上native，如
<phone-mask-li v-for="(item,index) in dataListMain" :key="index" :data="item" :class="{'call-select':index===activeIndex}" @click.native="selLi(index)"></phone-mask-li>
说明：代码<my-comp :foo.sync="bar"></my-comp>会被扩展成<comp :foo="bar" @update:foo="val => bar = val"></comp>，就是一个语法糖。
main.js里的引入顺序
//共用样式文件需要在App引入之前引入
import '@/assets/css/reset_xsf0409.css';//reset css文件
import '@/assets/css/public.css';//共用css文件
import '@/assets/css/layer.css';//layer弹出层的样式文件
import 'swiper/dist/css/swiper.css';//轮播图插件的css文件
import App from './App'
import router from './router'
import $ from 'jquery'
import axios from 'axios'
import qs from 'qs'
import VueAxios from 'vue-axios'
import VueAwesomeSwiper from 'vue-awesome-swiper';
设置自动打开浏览器
config目录下的index.js文件里的18行
autoOpenBrowser: true,
设置build打包之后文件路径问题
config目录下的index.js文件里的46行
assetsPublicPath: './',
可去掉路由里的#
src目录下的router文件里的index.js里
export default new Router({
mode: 'history',
routes: [...]
});
build目录下的utils.js里的48行publicPath修改
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../'
})
可使得图片文件大于10k的引入正确
vue中使用jquery
package.json里加入
"dependencies": {
"ajv": "^6.0.0",
"axios": "^0.18.0",
"jquery": "^3.3.1",
"qs": "^6.5.2",
"vue": "^2.5.2",
"vue-awesome-swiper": "^3.1.3",
"vue-axios": "^2.1.3",
"vue-router": "^3.0.1"
},
在build目录下的webpack.base.conf.js中加入一行代码
'use strict'
let webpack=require('webpack')
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
build目录下的webpack.base.conf.js里的module.exports对象里加入属性
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'windows.jQuery': 'jquery'
})
],
在main.js中引入,加入下面这行代码
import $ from 'jquery'
/****vue相关*******************************************************/
/****jquery相关*******************************************************/
有input的页面，考虑页面载入之后的自动foucs事件
a标签等inline-block元素，在执行jq的show()和hide()方法时，默认show()为inline-block元素
border必须用px为单位，用rem会出现无法显示的情况
outline的写法和box-shadow类似，不占空间，在border外围
$("button").click(function(){
$("input").trigger("select");
});
trigger() 方法触发被选元素的指定事件类型。
[].forEach(function(value, index, array){});
$.each([],function(index, value,array){});
(function(){})();
$(function(){});
$(document).ready(function(){});//有一个独立的作用域
//jq ajax中传图片文件的操作
new _fd = new FormData();
_fd.append('image', e.target.files[0]);
$.ajax中要有data:_fd,processData:false,contentType:false
.hasClass('');
$('script[src*="js/jq.js"]');//属性选择器
页面跳转并滚动到指定位置
执行.animate()之前加上.stop()比较实用
var s_o = $('#id').offset();
$('body,html').stop().animate({
scrollTop: s_o.top
},0);//设置动画时间为0
$(this).get(0)与$(this)[0]等价，获取的是DOM对象，不是jq对象。
document.referrer 可返回载入当前文档的文档的 URL。
$.trim()是jQuery提供的函数，用于去掉字符串首尾的空白字符。
//事件委托
$("ul").on('click','li',function(e){
//fun 代码
$(this).off('click');
});
//iframe相关事件
1. jquery 在iframe子页面获取父页面元素代码如下:
$("#objid", parent.document)
2. jquery在父页面 获取iframe子页面的元素
代码如下:
$("#objid",document.frames('iframename').document)
3.js 在iframe子页面获取父页面元素代码如下:
window.parent.document.getElementByIdx_x("元素id");
4.js 在父页面获取iframe子页面元素代码如下:
window.frames["iframe_ID"].contentDocument.getElementByIdx_x("元素id");
5.子类iframe内调用父类函数：
window.parent.func();
closest() 方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。
.closest('li')
/****jquery相关*******************************************************/
/****css相关*******************************************************/
html{font-size: calc(100vw/7.5 + 0px)};//可以代替js做移动端适配处理
div{
height: calc(100vh - 1.5rem);
}
一个标签浮动之后就不再区分行内、块元素了，都能直接设置宽和高,所以对于块元素float:left;和diplay:block;没必要同时出现
background: red url(1.jpg) no-repeat fixed center center/.45rem .45rem;
box-shadow: 10px 10px 5px #888;
line-height:2;和2em类似，都是2倍的font-size
div{white-space:pre;}设置文本原格式，和<pre>标签效果一致
div{direction:rtl;unicode-bidi:bidi-override;}设置文本方向,设置文本是否被重写
html方法:<bdo dir="rtl"></bdo>
.header-top>ul>li>a:not(.on):hover//css选择器里也有not选择器
not选择器
*:not(input, textarea){
user-select: none;//css禁止选中文字
}
div::after{
content: '';
width: .3rem;
height: .3rem;
position: absolute;
left: 0;
top: 0;
background: url(1.jpg) no-repeat center center/.45rem .45rem;
}
'>'图标css画法
.my-list::after{
content: '';
float: right;
width: .1rem;
height: .1rem;
border: solid #ccc;
border-width: 2px 2px 0 0;
transform: rotate(45deg);
}
img{
position: absolute;
clip: rect(0px, 60px, 200px, 0px);//可裁剪图片
object-fit: cover;//cover是充满盒子，contain是全部显示保持图片比例
}
selector{
letter-spacing: .5rem;//letter-spacing在每个字的右边，所以最后一个字后面肯定有一点空白距离
padding-left: .25rem;
}
居中的几种实现
selector{
width: 5rem;
height: 5rem;
position: absolute;
top: 0;left:0;bottom:0;right:0;
margin: auto;
}
selector{
width: 5rem;
height: 5rem;
position: absolute;
top: 50%;
left: 50%;
margin-top: -2.5rem;
margin-left: -2.5rem;
}
selector父元素{
display: flex;
width: 5rem;
height: 5rem;
align-items: center;
justify-content: center;
}
//定义文字并调用
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?smj7ux#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?smj7ux') format('truetype'),
url('../fonts/icomoon.woff?smj7ux') format('woff'),
url('../fonts/icomoon.svg?smj7ux#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
header>a.header-back::before {
font-family: "icomoon";
content: "\e90f";
}
box-sizing: border-box;
section:nth-of-type(2n+1)奇数选中
section:nth-of-type(2n)偶数选中
section:nth-of-type(n+3)第3个之后选中
section:nth-of-type(-n+3)前3个
section:nth-last-of-type(2)最后两个
table{border-collapse:collapse;}//collapse这个属性比较实用
separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
表格运用圆角需要要 border-collapse: separate;
background-clip：border-box|padding-box|content-box
该属性指定了背景在哪些区域可以显示，但与背景开始绘制的位置无关，背景的绘制的位置可以出现在不显示背景的区域，这时就相当于背景图片被不显示背景的区域裁剪了一部分一样。
background-origin：padding-box|border-box|content-box
该属性指定了背景从哪个区域(边框、补白或内容)开始绘制,但也仅仅能控制背景开始绘制的位置，你可以用这个属性在边框上绘制背景，但边框上的背景显不显示出来那就要由background-clip来决定了
网页里禁止选中图片，可以在图片上方加一个透明的div遮罩，这样右键就不会有另存为的选项了
命名规则
avatar头像，content-wrapper容器，description描述
/****css相关*******************************************************/
/****html相关*******************************************************/
<header><footer><main><nav><aside><article><section><figure><figcaption><mark>
<html lang="en"></html>英文
<html lang="zh-cmn"></html>中文国语
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<meta name="Author" content="" />
<marquee></marquee>实现滚动的文字标签
网页载入iocn图标
<link rel="shortcut" type="iamge/x-icon" href="img/xxx.ico" />
UTF-8,字符全，每个汉字3个字节，所以文件尺寸大；
gb2312(gbk),字符少，每个汉字2个字节，所以文件尺寸小；
<link rel="prev" href="aa.html" />
rel用来描述指定链接与当前文档的关系，便于机器理解文档结构
条件注释判断浏览器版本
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->
LiElement.onclick=function(){};和window.onload=function(){};
赋值操作导致只能给元素注册一次事件，若多次注册，后写的会覆盖前面写的
通过绑定事件添加的内容可以避免这种覆盖
document.getElementById("myBtn").addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
});
<input type="image" />type="image"作用大于等于type="submit"
file,text,password,radio,checkbox,button,submit,reset,hidden
time,date,tel,search,number,url,email,color,range
date,datetime,datetime-local,week,month,time
<input type="datetime-local" />可以出现选择时分秒的日期框
input的pattern属性可写正则表达式做验证处理
<svg data-src="demo.svg"></svg>
ajax请求demo.svg返回的是dom对象，append到<svg>里，就可以用css控制了
svg是用xml语言编写的
ul unordered list
li list item
ol ordered list
dl definition list
dt definition ttitle
dd definition description
accept="image/*"会每一个文件都遍历一次所有的"image/*"文件类型
<input type="file" accept="image/*" />
<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/bmp,image/svg" />
capture="camera"可设置只打开照相机(兼容性欠佳)，但有multiple(设置多选)属性时会失效
/****html相关*******************************************************/
/****其他相关*******************************************************/
chrome控制台的settings->Preferences->Elements->Show user agent shadow Dom勾选，可查看-webkit-appearance相关自带元素样式
浏览器控制台输入document.body.contentEditable=true;可使网页变得可编辑
data:text/html,<html contenteditable />
浏览器地址栏输入，可直接渲染一个可编辑的空白html文件
cd D:\Develop\hifangH5
切换至指定目录(同一个盘符内)
f:
切换至f盘
按住ctrl键，两次c键，退出当前命令
cls
清空控制台
dir
查看当前目录下的所有文件
set
打印环境变量
mkdir demo
在当前目录创建demo文件夹
MVC(Model-View-Controller)
MVP(Model-View-Presenter)
MVVM(Model-View-ViewModel)
XSS攻击，跨站脚本攻击
SQL注入漏洞
sandbox沙盒沙箱
chrome插件开发
chrome-extension://kbdnhlhmappejakbbdadjoocgcpfpkdm/background.js
chrome-extension:// + 扩展插件id + / 文件路径
bookmark
网页变成可编辑data:text/html,<html contenteditable>
当前网页可编辑javascript:document.body.contentEditable='true'; document.designMode='on';
/****其他相关*******************************************************/
First Blood
Double Kill
Trible Kill
Quadra Kill
Penta Kill
ace
dominate
Killing Spree
God Like
Legendary
