index

cate

Bootstrap 编辑器：含 20个类别的 230+ 常用组件，在线修改CSS ，支持导出HTML 及源码

阿里图库

抠图网站

AI抠图

animate CSS

Marerial Design Icons

FontAwesome

Emoji CSS

<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet">
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">

console.log 用法

RFC2397中定义的Data URI scheme，目的是将一些小的数据，直接嵌入到网页中
目前Data URI scheme支持的类型有：
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

+new Date()   === new Date().getTime();

<label for='username' accesskey='N'></label>

optgroup标签:
<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

穿透鼠标事件
div {pointer-events: none};

chrome设置调试：
debugger;
F12 F8 F10 F11

2019-08-10

getElementById和querySelector方法的区别

getElementById和querySelector

getXXXByXXX 获取的是动态集合，querySelector获取的是静态集合。

简单的说就是，动态就是选出的元素会随文档改变，静态的不会，取出来之后就和文档的改变无关了。

如果只要一次查找就可得到元素时，首选getXXXByXXX ；

如果需要经过多级查找，才能得到元素时，首选querySelector；

2019-03-10

详解 ESLint 规则，规范你的代码

eslint规范代码

npm install -g ESLint
eslint --init

css flex弹性布局学习总结

flex

flex: none | [ <'flex-grow'> <'flex-shrink'> || <'flex-basis'> ]

vue在移动端限制放大和滚动

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<meta name="app-mobile-web-app-capable" content="yes">


  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }

google prettify.js代码格式化

prettfy代码格式化

<link rel="stylesheet" href="css/prettify.css" />
<script src="js/prettify.js" type="text/javascript"></script>

显示行号
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 {
	list-style-type: decimal !important;
}

html文本
<code class="lang-java">int x = 0;</code>
<code class="prettyprint lang-java">int x = 0;</code>
<pre class="prettyprint lang-java linenums">
</pre>

可选皮肤
prettify.css (default)
sunburst.css
desert.css
doxy.css
sons-of-obsidian.css

chrome 开发者工具 —> sources -> { } pretty print

用 Vue 改造 Bootstrap，渐进提升项目框架

bootstrap

c.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。
如果我们把这个计数器保存在客户端，那么它起不到任何作用。

Html5里iframe替代frameSet

bootstrap的tree-view插件

nativescript官网

NativeScript实现在不用Webview的情况下，构建跨Android和iOS的平台应用。

以前各种PhoneGap,Cordova,Ionic等需要移动端原生Webview的支持，使用NativeScript让你只用js,xml,css就可以完成移动端开发。

2018-03-10

长连接与长轮询

js本地存储解决方案(localStorage与userData)

Web前端笔试115道题（带答案及解析）

定义tap手势

    //do not prevent defaults if this is a tap gesture
    var isTapPointer = input.pointers.length === 1;
    var isTapMovement = input.distance < 2;
    var isTapTouchTime = input.deltaTime < 250;

    if (isTapPointer && isTapMovement && isTapTouchTime) {
        return;
    }

addEventListener与handleEvent

Mozilla 0.9.1 和 Netscape 6.1 之后的版本不但支持传递函数引用，也都允许直接把拥有 handleEvent 方法的对象作为 addEventListener 方法的第二参数。

这在 DOM Level 2 的接口定义中也已经做了说明：

http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener

利用这个特性可以把任意对象注册为事件处理程序，只要它拥有 handleEvent 方法。

var o = {
    handleEvent : function () {
        alert('handleEvent executed');
    }
};
element.addEventListener('click', o, false);

当定义对象封装的时候，可以直接将 this 指针传入：
var o = {
    bind : function () {
        element.addEventListener('click', this, false);
    },
    handleEvent : function () {
        alert('handleEvent executed');
    }
};

定义内部函数

var untils = (function() {
    var me = {};

    me.getTime = Date.now || function getTime () { return new Date().getTime(); };

    //计算实际位置
    me.offset = function (el) {
        var left = -el.offsetLeft,
            top = -el.offsetTop;

        while (el = el.offsetParent) {
            left -= el.offsetLeft;
            top -= el.offsetTop;
        }
        return {
            left: left,
            top: top
        };
    };

    me.extend = function(target, obj) {
        for(var key in obj){
            target[key] = obj[key];
        }
    };

    //扩展属性值
    me.extend(me, {
        hasTransform: _transform !== false,
        hasTouch: 'ontouchstart' in window,
    });

    //初始化并定义子属性值
    me.extend(me.style = {}, {
        transform: _transform,
        transitionDelay: _prefixStyle('transitionDelay'),
    });

    return me;  //返回值作为utils的函数
})();

//调用函数,而不是utils.me.getTime()
utils.getTime();

idtag = document.getElementById('tag');
var offset = utiles.offset(idtag);

匿名运行函数

(function() {
    alert('do something!');
})();

列表浏览器style

var style = document.createElement('div').style;
for(var key in style) {
    console.log(key + ' : " + style[key]);
}

Event

三类事件，三种创建和初始化
 HTMLEvents : initEvent
 MouseEvents: initMousrEvent
 UIEvents   : initUIEvent

监听event
document.getElementById('tag').addEventListener('tag', function(e) {
    alert('tag event occur!');
}, false);

创建、初始化和触发事件
function genEvent() {
    var event = document.createEvent('HTMLEvents');
    event.initEvent('tag', false, false);
    idTag.dispatchEvent(event);
}

npm安装

yum install nodejs
yum install npm

npm install -g bower
npm install -global gulp

npm install gulp --save-dev #全局  

npm install -g grunt-cli
npm install grunt --save-dev
npm install load-grunt-tasks --save-dev

npm list
npm -global list
npm config list
npm config list -l

网络不行可以考虑一些国内的源试试，例如
npm config set registry="http://r.cnpmjs.org/"
npm config set registry="http://registry.npm.taobao.org/"


升级到稳定版本
$ npm install -g n
$ n stable

安装npm

1、下载源码，你需要在http://nodejs.org/下载

2、解压源码
tar zxvf node-v4.4.3-linux-x86.tar.gz

3、 编译安装
cd node-v4.4.3-linux-x86
./configure --prefix=/usr/local/node
make
make install

4、 配置NODE_HOME，进入profile编辑环境变量
vim /etc/profile
设置nodejs环境变量，
#set for nodejs
export NODE_HOME=/usr/local/node
export PATH=$NODE_HOME/bin:$PATH

运行： source /etc/profile

淘宝npm镜像
搜索地址：http://npm.taobao.org/
registry地址：http://registry.npm.taobao.org/

1.临时使用
npm --registry https://registry.npm.taobao.org install express

2.持久使用
npm config set registry https://registry.npm.taobao.org

// 配置后可通过下面方式来验证是否成功
npm config get registry
// 或
npm info express

2018-03-04

字串处理

var a = new Array(1,2,3,4,5);
var str = arr.join('-');            /*数组转换为字串*/
var b = str.split('-');             /*字串转换为数组*/
var c = [6,7,8,9];
var d = a.concat(c);                //连接数组

a.push(10);
a.pop();
a.sort();
a.reverse();
a.shift();                          //删除第一个元素并返回值
a.unshift([11,12]);                 //在第一个元素前加一个值
a.slice(1,2);                       //返回字串片段
a.splice(4,1);                      //删除一个元素并返回值
a.toString();                       //

类型转换

// 强制转换为Boolean 用 !!
var bool = !!"c";
console.log(typeof bool); // boolean

// 强制转换为Number 用 +
var num = +"1234";
console.log(typeof num); // number

// 强制转换为String 用 ""+
var str = ""+ 1234;
console.log(typeof str); // string

CSS3 3D transform变换

CSS3实现3D开门动画效果

CSS3中translate、transform和translation的区别和联系

translate: transform的一个方法, 元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
用法:transform: translate(50px, 100px);
     -ms-transform: translate(50px,100px);
     -webkit-transform: translate(50px,100px);
     -o-transform: translate(50px,100px);
     -moz-transform: translate(50px,100px);
 
transform:CSS3中主要包括 
     旋转：rotate() 顺时针旋转给定的角度，允许负值 
           rotate(30deg)
     扭曲：skew() 元素翻转给定的角度,根据给定的水平线（X 轴）和垂直线（Y 轴）参数：
           skew(30deg,20deg)
     缩放：scale() 放大或缩小，根据给定的宽度（X 轴）和高度（Y 轴）参数： 
           scale(2,4)
     移动：translate() 平移，传进 x,y值，代表沿x轴和y轴平移的距离
     所有的2D转换方法组合在一起： 
           matrix()  旋转、缩放、移动以及倾斜元素
           matrix(scale.x ,, , scale.y , translate.x, translate.y)      
     改变起点位置: transform-origin: bottom left;
     综合起来使用：transform: 30deg 1.5 30deg 20deg 100px 200px;
 
transition: 允许CSS属性值在一定的时间区间内平滑的过渡，
     需要事件的触发，例如单击、获取焦点、失去焦点等
     transition:property duration timing-function delay;
     property:CSS的属性，例如：width height 为none时停止所有的运动，可以为transform
     duration:持续时间
     timing-function:ease等
     delay:延迟
     注意：当property为all的时候所有动画
     例如：transition:width 2s ease 0s;

tranform1样例

tranform2样例

2017-11-10

JavaScript中数组使用总结

不定参数

function test(id, i) { }
当调用时可以只带一个参数：
test(id);

函数的另一种定义方式：
test = function(id,i) { )

不定参数的调用：
call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 
apply([thisObj[,argArray]]) 

不定参数名必须是arguments
fun.apply(object, arguments);
fun.call(object, arg1, arg2, arg3);
fun.apply(object, [arg1, arg2, arg3]);

SecureHeaders
SecureHeaders 是 Twitter 送给 Web 开发者的一份大礼，作为一款 Web 安全开发工具，Secureheaders 能够自动实施安全相关的 header 规则，包括内容安全政策（CSP），防止 XSS、HSTS 等攻击，防止火绵羊（Firesheep）攻击以及 XFO 点击劫持等。

bower

{
bower config file:
bower.json
.bowerrc

    'directory' : 'bowers'
}

配色方案

wget -Ogithub.vim http://www.vim.org/scripts/download_script.php?src_id=23147

index

目录

2020-03-20

2019-08-10

getElementById和querySelector

2019-03-10

eslint规范代码

flex

vue在移动端限制放大和滚动

prettfy代码格式化

bootstrap

2018-03-10

定义tap手势

addEventListener与handleEvent

定义内部函数

匿名运行函数

列表浏览器style

Event

npm安装

安装npm

2018-03-04

字串处理

类型转换

CSS3中translate、transform和translation的区别和联系

2017-11-10

不定参数

bower