实用代码 大杂烩

date/****js相关*******************************************************/

//适配代码

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本身，不会赋值给新的数组

样式修改，兼容的处理最好是在外层加一个div，这样才能保证完全兼容的文字居中

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更新之后执行

自定义组件的名字必须是中划线链接，不能是驼峰规则，不能含有数字

@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，如

说明：代码会被扩展成，就是一个语法糖。

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;}设置文本原格式，和

标签效果一致

div{direction:rtl;unicode-bidi:bidi-override;}设置文本方向,设置文本是否被重写
html方法:
.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相关*******************************************************/

英文
中文国语





实现滚动的文字标签
网页载入iocn图标

UTF-8,字符全，每个汉字3个字节，所以文件尺寸大；
gb2312(gbk),字符少，每个汉字2个字节，所以文件尺寸小；

rel用来描述指定链接与当前文档的关系，便于机器理解文档结构
条件注释判断浏览器版本
 除IE外都可识别 









LiElement.onclick=function(){};和window.onload=function(){};
赋值操作导致只能给元素注册一次事件，若多次注册，后写的会覆盖前面写的
通过绑定事件添加的内容可以避免这种覆盖
document.getElementById("myBtn").addEventListener("click", function(){
    document.getElementById("demo").innerHTML = "Hello World";
});
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的pattern属性可写正则表达式做验证处理

ajax请求demo.svg返回的是dom对象，append到
svg是用xml语言编写的
ul unordered list
li list item
ol ordered list
dl definition list
dt definition ttitle
dd definition description
accept="image/*"会每一个文件都遍历一次所有的"image/*"文件类型


capture="camera"可设置只打开照相机(兼容性欠佳)，但有multiple(设置多选)属性时会失效
/****html相关*******************************************************/
/****其他相关*******************************************************/
chrome控制台的settings->Preferences->Elements->Show user agent shadow Dom勾选，可查看-webkit-appearance相关自带元素样式
浏览器控制台输入document.body.contentEditable=true;可使网页变得可编辑
data:text/html,
浏览器地址栏输入，可直接渲染一个可编辑的空白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,
当前网页可编辑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