+ Fork

选择器-

[-] 优先级

  • selector选择器支持一览.值得注意的是.class.class IE6并不识别
  • 选择器优先级 1.三种引入方式的优先级
    2.同引入方式内的基本原则:
    一般而言,选择器越特殊,它的优先级越高。也就是选择器指向的越准确,它的优先级就越高。
    复杂的计算方法:
    ●用1表示派生选择器(用HTML标签申明)的优先级
    ●用10表示类选择器(用一个样式类名申明)的优先级
    ●用100标示ID选择器(用DOM的ID申明)的优先级
    ●div.test1 .span var 优先级 1+10 +10 +1
    ●span#xxx .songs li 优先级1+100 + 10 + 1
    ●#xxx li 优先级 100 +1
    3.Tips:样式在html中的先后顺序不决定样式优先级,由CSS中定义的先后和优先级有关 参考资料
    4.Tips:选择器拾遗漏
  • !important提升指定样式规则的应用优先权。
    但在IE6中有BUG,需要分开写在2个选择符中
    参考资料:GO TO!

[-] HACK

  • if IE 条件HACK
    
                        <!--[if IE]>
                        指定载入相关JS/CSS或其他文件
                        <![endif]-->
                        

    参考资料:GO TO!
  • _property属性级HACK
    key: value\9; IE6~10
    key: value\0; Oprea+IE8~10
    .key: value; IE6+7+8
    *key: value; IE6+7 (+或#亦可)
    _key: value; IE6 (-亦可)
    [;property:value;]; webkit(Chrome,Safari)
    @-moz-document url-prefix(){..} FireFox
    @media screen and (-webkit-min-device-pixel-ratio:0) {..} webkit(Chrome,Safari)

    参考资料1:GO TO!
    参考资料2:GO TO!
    参考资料3:GO TO!
  • *html selector选择符级HACK
    *html selector: IE6及以下
    *+html selector : IE7
    结合选择器能力
  • expression表达式,IE6-7支持,IE8不支持

[-] 常用选择符

  • *通配符
  • tagName元素标签名
  • #id#id选择器,也可以ele#id
  • .class类选择器,可以连缀.class1.class2
  • E F后代选择器
  • E>F子选择器
  • E+F相邻选择器
  • E~F兄弟选择器

[-] 伪类选择符

  • :link/:visited/:hover/:active a:hover 必须位于 a:link 和 a:visited 之后,a:active 必须位于 a:hover 之后(LVHA)
    a:link{}
    a:visited{}
    a:hover{}
    a:active{}
    目前hover可用于任何元素,例如li:hover{},也可以用为li:hover a{}
    IE6中:hover只对a元素有效,可通过JS控制
  • :not(selector)匹配不含有s选择符的元素E
  • :first-child :first-child 第一个子元素,前缀为被选元素,必须是第一个子元素而非第一个本类子元素
    :first-of-type 该选择符总是能命中父元素的第1个为E的子元素,不论第1个子元素是否为E
  • :last-child :last-child 最后一个子元素
    :last-of-type 最后一个此类元素
  • :nth-child(n) :nth-child(n) 第N个子元素
    :nth-child(2n) 偶数,:nth-child(2n+1) 奇数
    第N个子元素,如果有不同类别的其他同级标签元素亦会增长序列数
    :nth-of-type(n) 第N个此类子元素
  • :only-child :only-child 唯一一个子元素
    :only-of-type 为父元素中唯一元素的此类元素
  • :focus设置对象在成为输入焦点(该对象的onfocus事件发生)时的样式。
    webkit内核浏览器会默认给:focus状态的元素加上outline的样式,设置:focus{outline:0}
  • :empty匹配没有任何子元素(包括text节点)的元素E。
  • :target匹配相关URL指向的HASH目标元素。

[-] 属性选择符

  • [att]含有属性
  • [att='val']属性值为指定
  • [att~='val']选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素(包含只有一个值且该值等于val的情况)。完整包含,而非字符串。
  • [att^='val']属性值以..开头
  • [att$='val']属性值以..结尾
  • [att*='val']属性值包含..字符串
  • [att|='val']属性值以val开头并用连接符"-"分隔的字符串的元素

[-] 其他选择符

  • :lang(zh-cn)匹配使用特殊语言的E元素。
  • :root匹配E元素在文档的根元素。在HTML中,根元素永远是HTML
  • :checked匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时),不包含下拉菜单
  • :enabled匹配用户界面上处于可用状态的元素E。
  • :disabled匹配用户界面上处于禁用状态的元素E。

文本-

[-] 字体

  • font([i][b] size/lh family)【简写】font:italic bold 18px/22px 'Consolas' (简写时font-size和font-family属性不可省略)顺序不对则有可能出现BUG
  • font-size(px/180%) 字体大小,浏览器默认大小为1em(一般为16px),移动端则使用rem,PC端使用px。
    % : 页面元素中font-size使用百分比时,其百分比取值是基于父对象中字体的尺寸,不允许简写百分比。字体没有相对父盒子大小比例扩展算法。
    px : 像素,相对长度单位。1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px;
    em : 相对长度单位.相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。 PX转EM快速工具
    rem : 相对长度单位。相对于根元素(即html元素)font-size计算值的倍数。设置字体html{font-size:62.5% = 10px},则1.2rem=12px(手机端HTML5元素不主动继承body字体大小时,使用*)
    vm : 视窗可用宽度,0~100.(除去滚动条)
  • color 1.颜色:red(颜色名称),#ff3399(16进制),rgb(255,0,255)
    2.transparent
    IE6及更早浏览器(CSS1)只有background-color接受transparent取值。
    IE7及IE8(CSS2)除了background-color,还有border-color也开始接受transparent取值。
    在CSS3中,transparent被延伸到任何一个有color值的属性上。
    *IE8及以下,color属性值为transparent时,文本显示为黑色。
    IE6透明边框的处理
    
                        _border-color: #000000; 
                        _filter: ~"progid:DXImageTransform.Microsoft.Chroma(color='#000000')";
                        

    3.rgba(255,255,255,0.8)
    带Alpha通道的颜色模式,可以半透明(IE8-不支持)
    让IE8-通过IE滤镜来实现rgba效果
    
                        background: rgba(0,0,0,.92);
                        filter:progid:DXImageTransform.Microsoft.gradient(enabled='true', startcolorstr=#CC000000, endcolorstr=#CC000000);
                        

    扩展知识:DXImageTransform.Microsoft.gradient 滤镜里的 startcolorstr 参数值是 #AARRGGBB 形式的, 其中的AA是代表不透明度的十六进制,00表示完全透明,FF就是全不透明,化成十进制的范围就是0~255,剩下的 RRGGBB 就是颜色的十六进制代码。
    举例如:background: rgba(125, 0, 0, .3); 表示的是30%不透明度的红色背景。把30%的不透明度转换成十六制呢的方法如下:先计算#AA的的十进制x,x/255 = 3/10,解得x=3*255/10,然后再把x换算成十六进制,约等于4C。
    4.hsl,h色环角度,s饱和度,l亮度 Paletton.com
  • line-height(px/180%/1.8) 行高,可为百分比或乘积因子,具有继承性
    % : 当为百分比时,子级会继承父级,此时的百分比,基于父级的字体大小的百分比,可能发生重叠(不具动画性)。参考资料
    1.5 : 当为乘积因子时,以自身的百分比150%=1.5。

    扩展阅读:
    linebox模型与基线等 | 行高的深入理解
    兼容处理:
    1.在FF中的对齐规则BUG,解决方案使用FF专属HACK@-moz-document url-prefix(){some-style}
    2.使用乘积因子时,IE7对1处理不当,需设置1.1或避免设置为字符等高。
  • font-weight(bold/normal)粗体,normal正常=400,bold粗体=700,取值100~900
  • font-style(italic/normal)normal正常,italic字体自带斜体,oblique人为斜体
  • font-variant(small-caps)normal正常的字体,small-caps小型的大写字母字体
  • text-transform(c/u/l) none: 无转换
    capitalize: 将每个单词的第一个字母转换成大写
    uppercase: 将每个单词转换成大写
    lowercase: 将每个单词转换成小写
  • font-family 按优先顺序排列。以逗号隔开。如果字体名称包含空格或中文,则应使用引号括起。
    常用字体:Helvetica,Verdana,Arial,Consolas,Georgia,Impact,Trebuchet MS,Comic Sans MS,Tahoma,Time News Roman,微软雅黑,宋体
    参考常用字体预览
    移动端字体设置font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; 参考资料
  • @font-face{f:'n',src:'url'} @font-face 必须在字体使用前引入
    @font-face {
    font-family: 'diyfont';
    src: url('diyfont.eot'); /* IE9+ */
    src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('diyfont.woff') format('woff'), /* chrome、firefox */
    url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */
    }
    .iconfont{
    font-family:"iconfont";
    font-style:normal;
    display:block/inline-block;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    }
    放在html中时写为“& #xe62a;”赋值以对应class,当为伪元素content引用时,赋值“\e62a”
    图标字体 alibaba / Glyphicons / icomoon
    更多字体 Get it!
    字体转换 将一种字体转为网页所需的所有格式

[-] 对齐与缩进

  • text-align(l/r/c/j) 水平对齐:center居中,left左,right右,justify两端对齐
    对inline/inline-block元素均有效,在IE6-7下对block也有效
    在父级设置,让子级中内联(块)元素水平居中对齐父级
  • vertical-align(t/b/m) 垂直对齐:
    长度 通过距离升高(正值)或降低(负值)元素。'0cm'等同于'baseline'
    百分值 – % 通过距离(相对于line-height值的百分大小)升高(正值)或降低(负值)元素。'0%'等同于'baseline'
    baseline 默认。元素的基线与父元素的基线对齐。
    sub 降低元素的基线到父元素合适的下标位置。
    super 升高元素的基线到父元素合适的上标位置。
    top 把对齐的子元素的顶端与line box顶端对齐。
    text-top 把元素的顶端与父元素内容区域的顶端对齐。
    middle 元素的中垂点与 父元素的基线加1/2父元素中字母x的高度 对齐。
    bottom 把对齐的子元素的底端与line box底端对齐(受line-height影响)【line-box底端】。
    text-bottom 把元素的底端与父元素内容区域的底端对齐。【content-area底端】
    inherit 采用父元素相关属性的相同的指定值。

    对inline/inline-block元素有效,例如默认的图片,表单控件
    在子级设置,让自身与同级元素垂直对齐,而非对子集!
    参考资料
  • text-indent([+-]Npx) 缩进,可为负值.
    div内部的第一行及每个强制换行的首行都拥有2em的缩进:text-indent:2em each-line;【CSS3】
    技巧:对于要保留html文字,但不显示的文字,可设置text-indent:-999px/100%【SEO】
    对内联a应用text-indent无效,需将a设置为block/inline-block
  • :first-letter对象内第一个字符
    选择符与包含规则的花括号之间不能紧挨着,需留有空格或换行。
    例 p:first-letter[_]{} ([_]处保留空格)
  • :first-line对象内第一行
    选择符与包含规则的花括号之间不能紧挨着,需留有空格或换行
  • letter-spacing(Npx)字母/中文字间隔
  • word-spacing(Npx)单词间隔

[-] 文本装饰

  • text-decoration(n/u/o/t)none:无
    underline:下划线
    overline:上划线
    line-through:删除线
  • text-shadow(1px 1px 2px #248)文本阴影:1px 1px 5px #000; (水平,垂直,模糊半径,颜色)
    在线生成3DCSS文字GO TO!
  • ::selection对象被选择时的样式,必须使用双冒号【CSS】
    ::selection只能定义被选择时的background-color及color
  • -webkit-text-fill-color 文字的填充颜色,默认值transparent,参考:彩条文字
    
    	                    -webkit-background-clip: text;
    	                    -webkit-text-fill-color: transparent;
    	                    background-image: linear-gradient( to bottom, #9588DD, #9588DD 25%);
    	                    
  • -webkit-text-stroke文字的描边,1px #ff3399
  • -webkit-font-smoothing文字的平滑,-webkit-font-smoothing: antialiased;

[-] 文本折行

  • white-space normal:默认处理方式。
    pre:用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字超出边界时不换行。可查阅pre对象
    nowrap:强制在同一行内显示所有文本,合并文本间的多余空白,直到文本结束或者遭遇br对象。
    pre-wrap:用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字碰到边界时发生换行。
    pre-line:保持文本的换行,不保留文字间的空白距离,当文字碰到边界时发生换行。
    常用片段(设置宽度):white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
  • text-overflow(ellipsis/str)文本溢出:clip剪裁掉/ellipsis点点点/string指定字符串【CSS3】
    多行文本省略(webkit)
    /* height: 36px; line-height: 18px; */ 
    	                    display: -webkit-box; 
    	                    -webkit-line-clamp: 2; 
    	                    -webkit-box-orient: vertical; 
    	                    overflow: hidden;
    	                    
  • word-wrap当内容超过指定容器的边界时是否断行
    normal:允许内容顶开或溢出指定的容器边界。
    break-word:内容将在边界内换行。如果需要,单词内部允许断行。
    断行控制片段word-wrap: break-word;word-break: break-all;
  • word-break对象内文本的字内换行行为 normal:依照亚洲语言和非亚洲语言的文本规则,允许在字内换行。
    keep-all:与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本。
    break-all:该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本,比如使连续的英文字母间断行。

[-] 文本流

  • unicode-bidi(bidi-override) normal:对象不打开附加的嵌入层,对于内联元素,隐式重排序跨对象边界进行工作。
    embed:对象打开附加的嵌入层,direction属性的值指定嵌入层,在对象内部进行隐式重排序。
    bidi-override:严格按照direction属性的值重排序。忽略隐式双向运算规则。
    用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用
  • direction(ltr/rtl) ltr:文本流从左到右。
    rtl:文本流从右到左。
    设置direction:rtl;unicode-bidi:bidi-override;实现牌匾排字效果
  • writing-mode书写模式
    horizontal-tb:水平方向自上而下的书写方式。即 left-right-top-bottom(类似IE私有值lr-tb)
    lr-tb:左-右,上-下。对象中的内容在水平方向上从左向右流入,后一行在前一行的下面。 所有的字形都是竖直向上的。这种布局是罗马语系使用的(IE)
    vertical-rl:垂直方向自右而左的书写方式。即 top-bottom-right-left(类似IE私有值tb-rl)
    vertical-lr:垂直方向自左而右的书写方式。即 top-bottom-left-right
    tb-rl:上-下,右-左。对象中的内容在垂直方向上从上向下流入,自右向左。后一竖行在前一竖行的左面。全角字符是竖直向上的,半角字符如拉丁字母或片假名顺时针旋转90度
    设置-webkit-writing-mode:vertical-rl;writing-mode:tb-rl;writing-mode:vertical-rl;实现文笺排版效果。

[-] 内容

  • :before 设置在对象前(依据对象树的逻辑结构)发生的内容。IE6-7不支持,IE8支持。
    用来和content属性一起使用,并且必须定义content属性!必要时候即使有block表现仍需定义宽度
    伪元素的位置在内容之后,如果内容为空,则在起点,即使指定了父级尺寸
  • :after 设置在对象后(依据对象树的逻辑结构)发生的内容。IE6-7不支持,IE8支持。
    用来和content属性一起使用,并且必须定义content属性!必要时候即使有block表现仍需定义宽度
  • content(str/attr/url/count) content:'str' 一个字符串或符号,需加引号,例如 '»'
    content:attr(标签名) 载入此标签的一个属性节点上的内容,例如title
    content:url('文件地址') 使用指定的绝对或相对地址插入一个外部资源(图像,声频,视频或浏览器支持的其他任何资源)
    content:counter(name,list-style-type)使用一个已命名的计数器
    参考资料:GO TO!
  • counter-increment(name [N]) 定义一个计数器,并设定累加值,默认为1,可以为负值。
    在要计数的对象上设置 li{counter-increment:test 1}
    在起始伪对象上启用 li:before{content:counter(test)'.'}
    参考资料:GO TO!
    实例演示:GO TO!
  • counter-reset(name [N]) 复位计数器,默认为0.
    在要复位的对象(伪元素)上设置 li:before{counter-reset:test -1}
    参考资料:GO TO!
    复杂嵌套:GO TO!
    嵌套原理:
    1级列表设置计数器1,1级列表的before伪元素启用计数器1
    2级列表设置2计数器2,2级列表的before伪元素启用计数器2
    1级列表设置清空计数器
  • quotes('['*4) 设置或检索对象内使用的嵌套标记。
    设置标签的包围符号:q{quotes:'外层左标记' '外层右标记' '内层左标记' '内层右标记'}
    参考资料:GO TO!

样式-

[-] 滤镜与透明

  • opacity 透明度:使用浮点数指定对象的不透明度。值被约束在[0.0-1.0]范围内,如果超过了这个范围,其计算结果将截取到与之最相近的值。
    注意如果父级应用了此透明度方法,则子元素也会跟随一起透明,不受影响可以将子元素写在外面,再通过负值的margin或其他定位方法定位.
    IE8-不支持此属性,但可以用IE滤镜来处理,片段
    
                        .tm(@tm){
                        @alpha:@tm*100;
                        opacity:@tm;
                        filter:alpha(opacity=@alpha);
                        }
                        
  • (new)filter ele {filter: none | * }
    函数不传值,默认为100%=1完全渲染,多个函数之间用空格隔开
    grayscale() 灰度,黑白
    sepia() 褐色,黄褐色旧照片
    saturate() 饱和度
    hue-rotate() 色相旋转
    invert() 反色
    opacity() 透明度
    brightness() 亮度
    contrast() 对比度
    blur(3px) 模糊
    drop-shadow(5px 5px 5px #ccc) 阴影
    参考资料 示例
  • (ie)filter IE特有的滤镜属性,配合上述实现透明颜色,透明区块,另外由于IE无法正常显示PNG透明图片,当图片用作为背景图时,同样可以使用本属性解决.
    
                        background:url('../images/ex.png') no-repeat;
                        _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/ex.png");
                        

    *注意:通过滤镜对引入图片,滤镜引入图片的时候是相对于HTML文件,而不是相对于CSS文件,建议引入绝对路径。此方法不能应用于平铺图像!
    完整参考文档:GO TO!
    IE6使用滤镜PNG图片透明后,容器内链接失效,设置a{_position:relative;}
    扩展资料

    ie filter滤镜的说明:
    1.ie9滤镜重叠,给定统一class在条件注释中取消ie9滤镜。
    2.z-index与filter的渲染冲突bug。详情
    3.ie8中对img包裹元素a滤镜失效需要设置在img上。

[-] 背景

  • background [简写]background:#222 url() Xpx Ypx/size repeat attachment clip origin,...
    逗号隔开每组background的缩写值;如果有size值,需要紧跟position并且用"/"隔开;
    分解写法时,background-color只能设置一个。
    缩写时,如果前面设置了独立属性,在缩写中未被定义的会被覆盖会空或默认值,如果在后面补充了的,后面的属性会自动合并到缩写中,如果该属性不被支持,则造成整个缩写属性无法识别!因根据情况全部分开写。
  • background-color背景颜色,可用rgba来设置半透明背景,而不是用opacity,制作一些遮罩效果
  • currentcolor 让Border/backgroud等沿袭color的颜色
    参考资料
  • background-position背景图的位置,可以为负值和百分比,也可以用left(x=0),right(x=100%),top(y=100%),bottom(y=100%).先写水平,后写垂直.背景图的50%居中以图形中心为基点,不需要再移动自身一半尺寸
    雪碧图:CSS GAGA
    BASE64编码:GO TO!
  • background-size background-size: Xpx Ypx / A% B% / cover / contain / auto
    cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器;【全兼容的方式,独立图层img~100%】
    contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止。
    x% y%:百分比大小,占满父元素空间的百分比,可能导致图片变形
    x% auto | auto y%:使元素占父元素宽/高的百分比,并等比缩放~!
    一些情况不能识别/,反编译时候只需要反编译值,而不包括属性!
  • background-repeat平铺方式:
    repeat-x:背景图像在横向上平铺
    repeat-y:背景图像在纵向上平铺
    repeat:背景图像在横向和纵向平铺
    no-repeat:背景图像不平铺
    round:背景图像自动缩放直到适应且填充满整个容器。
    IE6不指定此属性时,默认不平铺,其他浏览器默认平铺
  • background-attachment fixed【相对浏览器固定】背景图像相对于窗体固定。
    scroll【相对元素固定】背景图像相对于元素固定,也就是说当元素内容滚动时背景图像不会跟着滚动,因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
    local【相对元素内容固定】背景图像相对于元素内容固定,也就是说当元素随元素滚动时背景图像也会跟着滚动,因为背景图像总是要跟着内容。
  • background-clip padding-box:从padding区域(不含padding)开始向外裁剪背景。
    border-box:从border区域(不含border)开始向外裁剪背景。(默认)
    content-box:从content区域开始向外裁剪背景。
    text:从前景内容的形状(比如文字)作为裁剪区域向外裁剪,如此即可实现使用背景作为填充色之类的遮罩效果。
    TEXT剪裁方式的遮罩效果:GO TO!
  • background-origin padding-box:从padding区域(含padding)开始显示背景图像。(默认)
    border-box:从border区域(含border)开始显示背景图像。
    content-box:从content区域开始显示背景图像。
  • background-image图像url(''),无none,渐变

[-] 阴影与倒影

  • box-shadow 盒子阴影,box-shadow:2px 2px 5px 50px #000 inset
    水平,垂直,模糊半径,阴影大小,颜色,内阴影
    可用逗号分隔多个阴影,制作复杂重叠阴影效果
    投影制作:GO TO!
    长阴影:GO TO!
    投影彩带:GO TO!
  • -webkit-box-reflect -webkit-box-reflect:none/direction offset mask
    可应用于盒子或者直接应用于图片
    direction(倒影方向): above / below / left / right
    offset(倒影与源间隔): length / %
    mask(蒙版): url() / gradient

[-] 遮罩

  • mask-image 遮罩使用的图片资源,支持多图片
    默认值:none / url(),..
    移动端可移除效果,同时设置border-radius配合实现粗略效果
  • mask-mode 默认值:match-source
  • mask-repeat 默认值:repeat
  • mask-position 默认值:left top
  • mask-clip 默认值:border-box
  • mask-origin 默认值:border-box
  • mask-size 默认值:auto
  • mask-composite 默认值:source-over(累加)
    add累加/substract相减/intersect相交/exclude排除

[-] 图像

  • image-set(1x,2x,Ndpi) 为不同的设备分配合适得图像;
     div{ background-image: image-set("test.png" 1x, "test-2x.png" 2x, "test-print.png" 300dpi);}
    为普通屏幕使用 test.png,为高分屏使用 test-2x.png,如果更高的分辨率则使用 test-print.png,比如印刷。
  • -ms-interpolation-mode:bicubicIE7图像缩放失真

[-] 渐变

  • grandient tools 图片渐变获取:从图片读取渐变生成CSS
    仿PS渐变生成:GO TO!
    渐变按钮生成:简洁 / 玻璃 / 水晶 / 简单 / 质感
  • linear-grandient() background:linear-gradient(point,#colorA lengthA/A%,……#colorB lengthB/B%) 线性渐变
    point:left/right/top/bottom/N deg 方向或角度
    默认以垂直上方点为0度向下
    技巧应用实例:
    
                        使用1像素背景渐变绘制分割线
                        /*使用伪元素制作导航列表项分隔线*/
                        .nav li:after{
                        content:""; 
                        width:1px;
                        height:15px;
                        position:absolute;
                        right:0;
                        top:20px;
                        background:linear-gradient(0deg,#990000,#ff0000,#990000);
                        }
                        /*删除第一项和最后一项导航分隔线*/
                        .nav li:last-child:after{
                        width:0;
                        height:0;
                        }
                        
  • repeating-linear-gradient()
    
                        repeating-linear-gradient(#f00, #ff0 10%, #f00 15%);
                        repeating-linear-gradient(to bottom, #f00, #ff0 10%, #f00 15%);
                        repeating-linear-gradient(180deg, #f00, #ff0 10%, #f00 15%);
                        repeating-linear-gradient(to top, #f00, #ff0 10%, #f00 15%);
                        
  • radial-grandient() background:radial-gradient(position,shape,#colorA lengthA/A%,……#colorB lengthB/B%)径向渐变
    position:left~center/lengthA lengthB/A% 5% 指定圆心位置
    shape:ellipse/circle形状
    可以使用rgba色,设置从透明到渐变效果!
  • repeating-radial-gradient()
    
                        repeating-radial-gradient(circle closest-side, #f00, #ff0 10%, #f00 15%);
                        

界面-

[-] 交互

  • cursor 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
    格式:使用自定义图像作为光标类型,IE, Opera只支持*.cur等特定的图片格式;Firefox, Chrome, Safari既支持特定图片类型也支持常见的*.jpg, *.gif, *.jpg等图片格式。
    兼容:cursor的属性值可以是一个序列,用逗号分隔地址,优先级递降。
    
                        示例代码:
                        :link,:visited{
                        cursor:url(example.svg#linkcursor),
                              url(hyper.cur),
                              url(hyper.png) 2 3,
                              pointer;
                        }
                        本例用来给所有的超链接定义光标类型,客户端如果不支持SVG类型的光标,则使用下个"hyper.cur";如果cur类型也不支持,则使用下个"hyper.png";依次类推。
                        

    附录:
    描述
    url 需使用的自定义光标的 URL。 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。
    default 默认光标(通常是一个箭头)
    auto 默认。浏览器设置的光标。
    crosshair 光标呈现为十字线。
    pointer 光标呈现为指示链接的指针(一只手)
    move 此光标指示某对象可被移动。
    e-resize 此光标指示矩形框的边缘可被向右(东)移动。
    ne-resize 此光标指示矩形框的边缘可被向上及向右移动(北/东)。
    nw-resize 此光标指示矩形框的边缘可被向上及向左移动(北/西)。
    n-resize 此光标指示矩形框的边缘可被向上(北)移动。
    se-resize 此光标指示矩形框的边缘可被向下及向右移动(南/东)。
    sw-resize 此光标指示矩形框的边缘可被向下及向左移动(南/西)。
    s-resize 此光标指示矩形框的边缘可被向下移动(北/西)。
    w-resize 此光标指示矩形框的边缘可被向左移动(西)。
    text 此光标指示文本。
    wait 此光标指示程序正忙(通常是一只表或沙漏)。
    help 此光标指示可用的帮助(通常是一个问号或一个气球)。
  • resize(both) 设置或检索对象的区域是否允许用户缩放,调节元素尺寸大小。
    如果希望此属性生效,需要设置对象的overflow属性,值可以是auto,hidden或scroll。
    none:不允许用户调整元素大小。
    both:用户可以调节元素的宽度和高度。
    horizontal:用户可以调节元素的宽度
    vertical:用户可以调节元素的高度。
  • ime-mode(disabled)输入法状态:设置或检索是否允许用户激活输入中文,韩文,日文等的输入法(IME)状态。
    auto:不影响IME的状态。
    normal:正常的IME状态
    active:指定所有使用ime输入的字符。即激活本地语言输入法。用户仍可以撤销激活ime
    inactive:指定所有不使用ime输入的字符。即激活非本地语言。用户仍可以撤销激活ime
    disabled:完全禁用ime。对于有焦点的控件(如输入框),用户不可以激活ime
  • pointer-events(none/auto) pointer-events:none 开启穿透点击,忽略自身
    pointer-events:auto 忽略部分的内部重新开启
    详细资料
  • user-select(none) 禁止用户选中文字
    none:文本不能被选择
    text:可以选择文本
    all:当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素,那么被选择的部分将是以该子元素向上回溯的最高祖先元素。
    element:可以选择文本,但选择范围受元素边界的约束
    IE6-9不支持该属性,但支持使用标签属性 onselectstart="return false;" 来达到 user-select:none 的效果;Safari和Chrome也支持该标签属性;
    直到Opera12.5仍然不支持该属性,但和IE6-9一样,也支持使用私有的标签属性 unselectable="on" 来达到 user-select:none 的效果;unselectable 的另一个值是 off;
    除Chrome和Safari外,在其它浏览器中,如果将文本设置为 -ms-user-select:none;,则用户将无法在该文本块中开始选择文本。不过,如果用户在页面的其他区域开始选择文本,则用户仍然可以继续选择将文本设置为 -ms-user-select:none; 的区域文本;
    html:
    
                        <p onselectstart="return false;" unselectable="on">禁止被选择的文字</p>
                        
    css:
    
                        p{user-select:none;} //在自动生成前缀时
                        

[-] 滚动条

  • ie
    scrollbar-base-color 基色
    scrollbar-track-color 轨道色
    scrollbar-face-color 滑块色
    scrollbar-arrow-color 箭头色
    scrollbar-highlight-color 左上阴影的颜色
    scrollbar-shadow-color 右下阴影的颜色
    scrollbar-3dlight-color 箭头阴影的颜色
    scrollbar-dark-shadow-color 立体阴影色

  • chrome
    ::-webkit-scrollbar 整体部分
    ::-webkit-scrollbar-track 轨道
    ::-webkit-scrollbar-track-piece 内层轨道
    ::-webkit-scrollbar-thumb 滚动条滑块
    ::-webkit-scrollbar-button 两侧按钮
    ::-webkit-scrollbar-corner 边角(横纵滚动条的交汇处)
    ::-webkit-resizer 边角拖拽控件

  • chrome伪元素
    :horizontal horizontal伪类适用于任何水平方向上的滚动条
    :vertical vertical伪类适用于任何垂直方向的滚动条
    :decrement decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片,例如可以使区域向上或者向右移动的区域和按钮
    :increment increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片,例如可以使区域向下或者向左移动的区域和按钮
    :start start伪类适用于按钮和轨道碎片。表示对象(按钮 轨道碎片)是否放在滑块的前面
    :end end伪类适用于按钮和轨道碎片。表示对象(按钮 轨道碎片)是否放在滑块的后面
    :double-button double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。
    :single-button single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。
    :no-button no-button伪类表示轨道结束的位置没有按钮。
    :corner-present corner-present伪类表示滚动条的角落是否存在。
    :window-inactive 适用于所有滚动条,表示包含滚动条的区域,焦点不在该窗口的时候。
  • [compare]
    整体 ::-webkit-scrollbar 整体样式,可用来设置宽度等,IE不可调整宽度
    轨道

    ::-webkit-scrollbar-track

    scrollbar-track-color

    轨道样式,IE只能设置颜色,chrome可以加点内阴影和圆角
    滑块

    ::-webkit-scrollbar-thumb

    scrollbar-face-color

    滑块样式,同上
    箭头

    ::-webkit-scrollbar-button

    scrollbar-arrow-color

    箭头样式,chrome下当设置了自定义scrollbar时默认则隐藏了箭头,这样看起来和平板差不多

    而IE还是需要给其配色,让它和整体看起来更协调

    其他(IE)

    scrollbar-base-color
    scrollbar-highlight-color
    scrollbar-shadow-color
    scrollbar-3dlight-color
    scrollbar-dark-shadow-color

     IE下为了整体协调美观,左侧属性仍根据实际情况调整,通常我将它设置与滑块一致
    其他(Chrome)

    ::-webkit-scrollbar-track-piece
    ::-webkit-scrollbar-corner
    ::-webkit-resizer

    chrome下有伪状态

盒模型-

[-] 表现

  • Standards/Quirks Mode HTML文档根据文档顶部的doctype声明来决定渲染模式,有标准模式(Standards Mode)怪异模式(Quirks mode,或叫做混杂模式)两种模式。
    IE5及以前默认总是表现为怪异模式,IE6~IE8遇到非正常声明或特定声明时也会进入怪异模式。
    否则,如果有正确声明doctype并在顶端,则默认进入标准模式,即包括HTML5声明在IE6~IE8,也会进入标准模式,而非一定需要HTML4长长的声明。
    而许多现代浏览器即使是怪异模式,表现也和标准模式是一致的。

    IE6+进入怪异模式的条件:
    1.IE6~IE8没有doctype的页面是在怪异模式下渲染。
    2.在文档类型定义之前出现非空格和换行字符,浏览器也会激活怪异模式。
    3.除上述两种情况外,有一些特殊声明时用来特定激活怪异模式的。
    具体见下表,删减至只考虑中国市场常用浏览器(来自《Activating Browser Modes with Doctype》
    参考资料
    标准模式与怪异模式下导致的和模型区别:
    需要知道的是,盒模型差异是两种模式导致的最重要的区别之一,但是IE一些其他的BUG,即使是在标准模式下,仍然需要通过HACK解决,而并非处于标准模式下则没有BUG。
    Box model :标准模式width=content,怪异模式width=content+padding+border
    例外:即使是标准模式下,button总是应用border-box,现代浏览器为了表现一致,默认添加了box-sizing:border-box属性,故在button的高度上仍然要考虑border而影响的高度,即设置height=height+border*2。
    另外,button在现代浏览器中总是表现为基于垂直对齐,在IE7~8中表现为顶部对齐,在IE6中表现为基线对齐,故需要设置vertical-align:middle初始化让所有表现一致。
    参考自《Quirks mode and strict mode》查阅更多区别
  • box-sizing content-box:padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和,即 ( Element width = width + border + padding ) 此属性表现为标准模式下的盒模型。
    border-box:padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值,即使定义有border和padding也不会改变对象的实际宽度,即 ( Element width = width ) 此属性表现为怪异模式下的盒模型。
  • display 完整参考资料:W3C
    当元素float,fixed,abosulte或者为根元素时,总是表现为块级元素(但并不会宽度占据100%,而是根据自己内容扩展,正确理解成inline-block?但又不完全是,由于float的性质为包裹)
    none 隐藏对象,不保留物理空间
    inline 内联元素 a,span,文本格式化(b,strong,i,em,sub,sup)
    block 块级元素 div,p,h1~h6,h5,form,ul,ol新元素
    inline-block img,表单控件(input,button,textarea,label)
    list-item 列表项目li
    table 块级元素级的表格table,表格内部元素表现为对应的table-cell等。
    table-caption | table-cell
    table-row | table-row-group
    table-u-column | table-u-column-group
    table-footer-group | table-header-group
    inline-table 内联元素级的表格
    flex 弹性伸缩盒
    box inline-box,块/内联块级弹性伸缩盒(旧)
    flex inline-flexbox,块/内联块级弹性伸缩盒(新)
    run-in 根据上下文决定对象是内联对象还是块级对象
  • zoom 设置或检索对象的缩放比例,normal实际尺寸,1.x浮点数,120%百分比.
    1.可局部用于响应式设计改变DOM尺寸,会有偏移错位(以像素起点对齐变换)
    2.可用于触发IE6的haslayout,拥有haslayout属性的层会自动管理其宽高,除非设置overflow否则宽高会自动扩展.
    现代浏览器会溢出显示,但自身宽高不变.
  • (hasLayout) 详细文档
    触发haslayout的条件:
    IE6:
    * display: inline-block
    * float: (left 或 right)
    * position: absolute
    * width: (任何值除了auto)
    * height: (任何值除了auto)
    * writing-mode: tb-rl
    * zoom: (除 normal 外任意值)
    IE7:(额外)
    * min-height: (任意值)
    * max-height: (除 none 外任意值)
    * min-width: (任意值)
    * max-width: (除 none 外任意值)
    * overflow: (除 visible 外任意值)
    * overflow-x: (除 visible 外任意值)
    * overflow-y: (除 visible 外任意值)
    * position: fixed
  • (BFC) block fomatting context详细文档
    BFC会阻止垂直外边距(margin-top、margin-bottom)折叠
    BFC不会重叠浮动元素
    BFC可以包含浮动
    触发BFC条件
    * 根元素,fieldset
    * float的值不为none
    * overflow的值不为visible
    * display的值为inline-block、table-cell、table-caption、flex、inline-flex
    * position的值为absolute或fixed

[-] 尺寸

  • calc()长度计算,width:calc(100% - 50px) 中间必须有空格!
  • width宽度
    1.IE6 BUG:当元素设置百分比宽高时,自动继承父级,宽度由于block默认占比100%,即总是不会缺失,但若父级高度自适应,则IE6会继续向上级继承,而现代浏览器则继承当前父级内容实际产生的高度.
    2.IE6 BUG:1像素BUG,尽量设置尺寸为偶数或不设置参考资料
    3.子元素设置100%宽高时不包含父元素的padding!当父元素有padding时,因设置固定尺寸或修改父级模型!
    4.width:auto 现代浏览器中表示根据内容自动扩展,而IE6-7表示占满父级
    5.IE6-7对宽度的处理略有差异,特别是IE7下有许多离奇BUG,取百分比小数时,尽量只取到1位或取整
  • height高度
    1.如果要给元素定义100%高度,必须要明确定义它的父级元素的高度,如果你需要给元素定义满屏的高度,就得先给html和body定义height:100%; 参考资料
    2.对于绝对定位拉伸的元素,内部元素可以直接使用百分比
    3.IE6-7中浮动创建的自适应布局,需要主动给定父级高度,否则绝对定位的元素无法正常定位。
    4.height:inherit的用法(IE8+)
  • min-width/height最小宽高
    ie7-8支持,仅ie6不支持
    IE6触发haslayout时,总是会自动管理其内容的宽高,自适应增长
    故可以写成.test{min-height:200px;_height:200px;}
  • max-width/height最大宽高
    1.ie7-8支持,仅ie6不支持

[-] 边框

  • border[简写]border:1px solid #ccc;
    [0px height]元素的边框位置IE6 BUG!
    当引入一个透明边框时,ie6+会增长内部空间至边框区域(背景色,不含内容),ie6显示黑色边框.
    border-width宽度:
    指定一个宽度,此宽度在双线时等于其间隔.
    border-style样式:
    none:无轮廓(等价border-width:0)
    dotted:点状轮廓。IE6下显示为dashed效果
    dashed:虚线轮廓。
    solid:实线轮廓
    double:双线轮廓。两条单线与其间隔的和等于指定的border-width值
    groove:3D凹槽轮廓。
    ridge:3D凸槽轮廓。
    inset:3D凹边轮廓。
    outset:3D凸边轮廓。
    border-color颜色:
    如果想在hover上做边框显示不发生抖动,应将默认状态添加如1px solid transparent
    三角制作:在线生成(利用宽高0,设置1个夹角边框大值)
    arrow生成:GO TO!
  • border-top 单边:border-top/border-bottom/border-left/border-right
    取消某一边:border:1px solid #ccc;border-bottom:none;
  • border-width/color/style border-width/color/style:上 右 下 左;4个值
  • border-radius [边框圆角简写]border-radius:5px 4px 3px 2px;
    四个半径值分别是左上角、右上角、右下角和左下角,可以设置百分比.
    提供2个参数,2个参数以“/”分隔,每个参数允许设置1~4个参数值,第1个参数表示水平半径,第2个参数表示垂直半径,如第2个参数省略,则默认等于第1个参数(顺时针顺序)
    border-radius: 15px 5px 25px 5px / 3px 5px 10px 15px;
    改变形状:
    正方形->圆:radius=width|height/2
    叶子-> 左上+右下,注意书写方式与简写代表
    半圆->宽度设为高度的一半,并且也只设置左上角和左下角的半径
    饼->四分之一圆的实现方法是把高度和宽度设置为相等,只设置一个圆角,其半径等于高度或宽度
    用radius画形状参考资料
    在线生成:GO TO!
    扩展:
    1.chrome hover radius bug
  • border-top-left-radius 单角圆角,注意书写格式,先写top/bottom后写left/right
    提供2个参数,2个参数以空格分隔,每个参数允许设置1个参数值,第1个参数表示水平半径,第2个参数表示垂直半径,如第2个参数省略,则默认等于第1个参数
    border-top-left-radius:5px 10px。不用“/”分割
  • border-image border-image:url(路径不需要引号) 80 80 80 80 round/stretch
    在线图片边框生成:GO TO!
    移动端1像素边框处理
  • outline 轮廓边框,在border之外,chrome有焦点样式.另可作为定位参考或特殊动画
    不支持圆角
    不允许类似border属性那样能将自身拆分为border-top..
    IE6-7不支持,IE8支持
  • outline-offset 用长度值来定义轮廓偏移。允许负值。
    0是以border边界作为参考点的,正值从border边界往外延,负值从border边界往里缩.
    可用outline来制作一些边框动画但又不改变原大小并非真正边框的改变(因为边框大小改变必然内容需要改变)

[-] 补白

  • padding 内部补白
    【设置】
    [简写]依次设置上右下左padding:1px 2px 3px 4px;
    [单边]padding-top/right/bottom/left
    [缩写]如果只提供一个,将用于全部的四边;如果提供两个,第一个用于上、下,第二个用于左、右;如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。
    【生效】
    非替代(non-Replaced)行内元素可以使用该属性设置左、右两边的内补丁;若要设置上、下两边的内补丁,必须先使该对象表现为块级或内联块级。即内联元素(a等)设置padding水平有效,垂直无效,除非转换display值。margin同理。
    【注意】
    1.默认背景图片的平铺是包含在padding区域的
    2.padding生效在伪对象之外。
    3.%比值水平(默认)书写模式下,参照其包含块 width 进行计算,其它情况参照包含块 height,margin同理参考资料
    【其它】
    1.IE7会胡乱继承padding,自适应宽高的地方必要应设置父级宽高并设置隐藏。
    2.当设置类似必须overflow但内部有元素偏移时,可用padding替代margin。

[-] 边距

  • margin(num/%/auto) 取值:num / % /auto
    1.auto:当margin-left/right同时为auto时水平居中
    2.%百分比:水平(默认)书写模式下,参照其包含块 width 进行计算,其它情况参照 height。
    3.num:可以为负值
    margin负值:
    1.当元素不存在width属性或者(width:auto)的时候,负margin-left/right会增加元素的宽度。
    <!-- 包裹层加宽应用实例 -->
    <div class="box">
    	<ul class="list">
    		<li class="item">item..</li>
    		<li class="item">item..</li>
    		<li class="item">item..</li>
    	</ul>
    </div>
    <style>
    .box{width:640px;height:200px;background-color:#0cf;overflow:hidden;}
    .list{margin-right:-20px;height:200px;background-color:#93f;list-style:none;}
    .item{width:200px;height:200px;margin-right:20px;float:left;background-color:#f39;}
    </style>
    
    2.margin-bottom为负值不会产生位移,会减少自身的供css读取的高度。
    <!-- 配合一个空的占位块,可实现一个非fixed定位实现的内容固定底部效果 -->
    <div class="box">
        text
        <div class="foottmp"></div>
    </div>
    <div class="copyright">© 2018 mgtv.com</div>
    <style>
        html,body{height:100%;}
        .box{min-height:100%;margin-bottom:-24px;}
        .foottmp{height:24px;}
        .copyright{font-size:12px;height:24px;line-height:24px;}
    </style>
    
    3.margin负值发生位移后,会影响其后的文档流位置。
    <!-- 左右固定,中间自适应(双飞翼) -->
    <div class="main">
                <div class="main-content">main content</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
    <style>
    	*{
            margin:0;
            padding: 0
        }
        .main{
            float: left;
            width: 100%;
    
        }
        .main .main-content{
            margin: 0 210px;
            background-color: rgba(33, 114, 214, 0.8);
            height: 500px
        }
        .left{
            width: 200px;
            float: left;
            background-color: rgba(255, 82, 0, 0.8);
            margin-left: -100%;
            height: 200px
    
        }
        .right{
            width: 200px;
            height: 200px;
            margin-left: -200px;
            float: left;
            background-color: rgba(90, 243, 151, 0.8);
        }
    </style>
    
    4.margin负值实现自动等高的多列布局。
    <!-- 自动等高多列布局 -->
    <div class="box">
    	<ul class="list">
    		<li class="item1 item">item..</li>
    		<li class="item2 item">item..</li>
    		<li class="item3 item">item..</li>
    	</ul>
    </div>
    <style>
    .list{overflow:hidden;}
    .item{margin-bottom:-5000px;padding-bottom:5000px;}
    .item1{height:100px;float:left;width:100px;background-color:#f39;}
    .item2{height:200px;float:left;width:100px;background-color:#f39;}
    .item3{height:300px;float:left;width:100px;background-color:#f39;}
    </style>
    
    参考资料
  • margin-left/right 1.IE6/7双倍margin
    对块状容器元素设置了float和与float相同方向的margin值就会出现双倍margin
    解决方法:设置BUG元素display:inline;
    由于当元素float的时候,display样式的值就会自动转换为“block”,无论display先前设置的属性是什么都会失去效果,不会影响块级特性。
  • margin-top/bottom 1.内联元素垂直无效
    非替代(non-Replaced)行内元素可以使用该属性设置左、右两边的外补丁;若要设置上、下两边的外补丁,必须先使该对象表现为块级或内联块级。
    2.外边距合并 参考文档
    当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。
    当一个元素包含在另一个元素中时【假设没有内边距或边框把外边距分隔开】,它们的上和/或下外边距也会发生合并。
    假设有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并 如果这个外边距遇到另一个元素的外边距,它还会发生合并。
    3.不发生margin合并的情况
    margin折叠只发生在块级元素上,且只发生在垂直上
    浮动元素的margin不与任何margin发生折叠;
    绝对定位元素的margin不与任何margin发生折叠;
    设置了display:inline-block的元素不发生折叠;
    设置了属性overflow且值不为visible的块级元素,将不与它的子元素发生margin折叠;
    根元素的margin不与其它任何margin发生折叠,指html而非body
    IE6-7中,如果父元素触发了haslayout,则不会发生折叠

[-] 溢出

  • visibility 此属性为隐藏的对象保留其占据的物理空间如果希望对象为可视,其父对象也必须是可视的。
    visible: 设置对象可视
    hidden: 设置对象隐藏
    collapse: 主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象,其作用等同于hidden。
    使得一个DOM元素不显示在浏览器可视范围内的方法:
    display:none
    visibility:hidden
    width:0;height:0;opacity:0;z-index:-1000
  • overflow溢出
    使overflow生效需要指定尺寸!而非自适应尺寸
    visible: 对溢出内容不做处理,内容可能会超出容器。
    hidden: 隐藏溢出容器的内容且不出现滚动条。
    scroll: 隐藏溢出容器的内容,溢出的内容将以卷动滚动条的方式呈现。
    auto: 当内容没有溢出容器时不出现滚动条,当内容溢出容器时出现滚动条,按需出现滚动条。此为body对象和textarea的默认值。
    在IE6/7中,overflow无法正确的隐藏有相对定位position:relative;的子元素。解决方法就是给外包容器.wrap加上position:relative;。
    扩展:
    IE78scroll无法用滚轮滚动bug
    当内含一个100%的元素时,外层设置overflow来与一个浮动元素水平衔接。
  • overflow-x横向溢出处理
  • overflow-y纵向溢出处理
    对html元素设置overflow:hidden;可隐藏浏览器滚动条,通过js设置让body,html滚动
  • clip 剪裁,【绝对定位元素】.
    auto:不剪裁
    rect(50px 20px 10px auto):上右下左,四个偏移数值,其中任一数值都可用auto替换,即此边不剪切。
    更多说明
    只有为shape时才支持动画性,可做遮罩动画效果
  • webkit-mask-imageurl(img) webkit-mask-image:url(img.png)

[+] 方案

  • 水平居中 1.自动margin(固定尺寸, .x(auto) )
    只适用于水平切为块级元素,margin:0 auto;
    2.text-align:center( 适用于inline/inline-block, .x )
    现代浏览器只对inline/inline-block元素有效,且非绝对定位.IE6-7可对block元素有效(需指定尺寸)
    3.绝对定位( 已知元素尺寸,ct(x,@width) )
    设置绝对定位,left:50%,并设置margin-left:-尺寸的一半
    4.绝对定位( 未知元素尺寸,.ct(x) )
    设置绝对定位,并设置left:0;right:0;margin-left:auto;margin-right:auto; 【IE6不支持】
    5.自动margin(伸缩尺寸,margin:x)
    设置margin:value 对边相等margin值,对盒子宽高未设置则自动扩展宽高
  • 垂直居中 1.绝对定位( 已知元素尺寸,ct(y,@height) )
    设置绝对定位,top:50%,并设置margin-top:-尺寸的一半
    2.绝对定位( 未知元素尺寸,.ct(y) )
    设置绝对定位,并设置top:0;bottom:0;margin-top:auto;margin-top:auto; 【IE6不支持】
    3.table-cell
    设置display:table-cell;vertical-align:middle;(子元素为inline或inline-block) 【IE6不支持】
    4.display:-webkit-box;-webkit-box-align:center;(手机端)
  • 中央居中 1.绝对定位( 已知元素尺寸,ct(o,@width,@height) )
    设置绝对定位,top:50%,left:50%,并设置margin-top:-尺寸的一半,margin-left:-尺寸的一半
    2.绝对定位( 未知元素尺寸,.ct )
    设置绝对定位,并设置top:0;bottom:0;left:0;right:0;margin:auto; 【IE6不支持】
    3.自动margin(伸缩尺寸,margin:x)
    设置margin:value 对边相等margin值,对盒子宽高未设置则自动扩展宽高
  • 尺寸兼容 1.hasLayout概念,ie6的自动管理,如不设置overflow总是自动扩展
    2.当元素设置百分比宽高时,自动继承父级,宽度由于block默认占比100%,即总是不会缺失,但若父级高度自适应,则IE6会继续向上级继承,而现代浏览器则继承当前父级内容实际产生的高度.
    3.IE6的1像素BUG,尽量设置尺寸为偶数或不设置参考资料
    4.IE6-7对百分比小数值例如33.33%解析不正确,因修正为*width:32%
  • % + border百分比尺寸下border的处理
    1.margin:-2px(hover处理则增加双倍)
    2.box-sizing
    3.calc函数 ~"calc(100% - 50px)"
    4.table布局,width=100%-50(无单位)
  • 自适应宽度自适应宽度
    1.margin:x val,由于默认block宽度占满100%,设置margin即占满剩余宽度【如side float则需要清除3px bug,可选择绝对定位】
    2.绝对定位,不设置宽高,left:x起始点,right:x结束点.margin:auto.【IE6不兼容】如为相对浏览器窗口可表达式计算
    3.calc函数 ~"calc(100% - 50px)"
    4.table-cell,根据内容扩展,占满剩余父级空间
    5.改table布局,使用width=100%-50(无单位)
  • 自适应高度自适应高度
    1.绝对定位,不设置宽高,top:x起始点,bottom:x结束点.margin:auto.【IE6不兼容】如为相对浏览器窗口可表达式计算
    2.calc函数 ~"calc(100% - 50px)"
    3.改table布局,使用height=100%-50(无单位)
  • 水平布局水平布局方案
    1.float
    2.inline-block,需设置vertical-align:top,去除inline-block的200B空格.【IE6中要使不断行还必须指定父级高度!】
    3.table-cell(总是等高最高的)【IE6不支持】

    float:错乱,换行不低于上行最高值,不等高
    inline-block:不会错乱,新行整齐,不等高
    table-cell:不会错乱,同行元素必定等高

布局I-

[-] 浮动

  • float 浮动详解 视频版
    【特性】:
    1.浮动内置设置:设置了float的元素则自动转换display为block.只有块级元素具有宽高等特性.
    2.浮动原理1.环绕特性本质,2.脱离文本流特性
    3.与非浮动元素的margin问题:如果浮动并未被闭合处理,下级非浮动元素默认还是以“环绕”浮动元素,其margin会作用在空的区域,此时应在浮动元素上设置margin
    【浮动闭合与BFC】 参考文档
    1.清除浮动解决方案:
    .clearfix:after {content:"\200B"; display:block; height:0; clear:both; }
    .clearfix:after {content:"";display:table;clear:both;}
    .clearfix { *zoom:1; }
    完整参考资料
    2.BFC条件:
    float为 left|right
    overflow为 hidden|auto|scroll
    display为 table-cell|table-caption|inline-block
    position为 absolute|fixed
    【IE BUG】
    1:IE6 双倍margin BUG
    对块状容器元素设置了float和与float相同方向的margin值就会出现双倍margin
    解决方法:设置BUG元素:display:inline;
    由于当元素float的时候,display样式的值就会自动转换为“block”,无论display先前设置的属性是什么都会失去效果,不会影响块级特性。
    2.IE6下3像素bug:
    当浮动元素与非浮动元素相邻时,会发生3像素间隙,可设置浮动元素_margin-right:-3px;或使非浮动元素浮动.
    详细参考资料
    中间列自适应布局方案:左右各浮动(层级需要都在不浮动之前!),需要解决3px bug
    3.IE6-7浮动自适应布局
    IE6-7中浮动创建的自适应布局,需要主动给定父级高度,否则绝对定位的元素无法正常定位。
  • clear清除浮动:none,left,right,both
    清除浮动只影响自己,而不影响其他元素;
    对于CSS的清除浮动(clear),一定要牢记:这个规则只能影响使用清除的元素本身,不能影响其他元素。
    参考资料1
    参考资料2

[-] 定位

  • position:static对象遵循常规流
  • position:relative 相对定位:对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left属性进行偏移时不影响常规流中的任何元素
    1.相对定位不同于margin-left/top,不会改变原先文档流,html后者层级默认仍然比前者高
    2.相对定位可设置z-index改变层级
  • position:absolute绝对定位:【参考资料】
    特征:
    1.对象脱离常规流,会在正常文档流之上,也可以通过z-index改为负值在正常流之下
    2.使用top,right,bottom,left等属性进行绝对定位,坐标总是以最近的被定位的父级元素为基准,如没有则以window窗口.
    3.盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。
    4.当元素设置为绝对定位时,则该元素变为inline-block块级.(不再占据100%)
    特殊用法:
    1.(未定义坐标):绝对定位的元素,在top,right,bottom,left属性未设置时,会紧随在其前面的兄弟元素之后,但在位置上不影响常规流中的任何元素。如无兄弟元素则贴在父元素起点。即绝对定位在不赋值位置属性时,可作为脱离文档流的相对定位。
    无依赖的绝对定位主要通过margin来实现位移.
    可配合text-align+ ;实现一些自动布局。
    关于跟随性,默认会跟在图片的顶端,由于200B baseline对齐会错位,可通过注释或串联来规避
    2.(未知/已知元素尺寸):垂直/水平/双向居中,可设置绝对定位,并设置top+bottom:0 / left+right:0 / top+left+bottom+right:0,并设置对应方向margin:auto【IE8支持,6-7均不支持】
    3.(已知元素尺寸):垂直/水平/双向居中,可设置绝对定位,并设置单向距离(left:50% / top:50%),并设置margin-left/top:-尺寸的一半.【IE6支持】
    4.(自适应宽高):一个绝对定位元素,如未对其宽高进行设置,但对其对向方位值设置时,则认为宽高总是扩展值定位点.可利用作为自适应宽高.【IE8支持,6-7均不支持】
    BUG:
    1.IE6中,父元素区域会管理到内部包含的绝对定位元素范围.
  • position:fixed窗口定位:
    对象脱离常规流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。
    HACK:
    IE6不支持fixed定位,通过CSS表达式解决,完整参考资料
    平板下的fixed有Bug,使用绝对定位代替。
  • top/bottom/left/right 配合定位属性进行定位,可为负值.
    值可以为百分比,百分比的值是以自身尺寸为参照。
  • z-indexZ轴设定,可以为负值.
    同一个层叠上下文中,层叠级别相同的两个元素,依据它们在HTML文档流中的顺序,写在后面的将会覆盖前面的。
    不同层叠上下文中,元素的显示顺序依据祖先的层叠级别来决定,与自身的层叠级别无关。
    在IE浏览器中,定位元素的z-index层级是相对于各自的父级容器,所以会导致z-index出现错误的表现。解决方法是给其父级元素定义z-index,有些情况下还需要定义position:relative。
    实例参考

[-] 列表

  • display:inline-block 1.IE6-7支持inline元素转换成inline-block,但不支持block元素转换成inline-block,所以非inline元素在IE6,7下要转换成inline-block,需先转换成inline,然后触发hasLayout,以此来获得和inline-block类似的效果;
    解决方案:
    div{display:inline-block;*display:inline;*zoom:1;}
    2.默认inline-block元素之间默认会有间隔,是由于html元素间200B空格导致的(根据上下文字体大小有差异),可以通过连接html元素,或注释,或分行,及其他方式去掉.(浮动亦可,但浮动无法制作横向布局)
    详细参考资料
    3.禁止换行还需要设置white-space:nowrap制作横向滚动效果.
  • ul/li 1.用ul+li打造table效果时,可以自适应宽度换行,边框设置的方式,设置全框,负margin,可规避padding及屏幕尺寸变化问题.
    2.IE6下ul默认表现为block,浮动后依旧占据100%,即使父级浮动,需要自身表现为dbi或fl(设置为dbi如果没有压缩html会出现空格),即用到ul,li来构造布局时,注意给ul,li添加浮动hack。
    3.在ul,li布局时,如非标准结构,在IE67中可能会解析错误导致bug,当非标准结构时建议使用div替代ul,li。
    4.ul表现为dbi在部分原生IE8中可能有渲染bug,添加margin强制渲染占据宽度。
  • list-style[简写] img position type,无序列表ul,有序列表ol,自定义列表dl
    可以用列表来进行布局,清除列表样式ul设置list-style:none,ul{padding:0,margin:0}
    如标记为图片时一般用背景图来替代
  • list-style-type 仅作用于具有display值等于list-item的对象(如li对象),如修改display值后不再显示(设置为块或其他特性均消失标记).
    注意:ol,ul,dl对象的type特性为其后的所有列表项目(如li对象)指明列表属性。
    此样式也可应用于counter计数器样式
    描述
    none 无标记。
    disc(默认) 实心圆。
    circle 空心圆。
    square 实心方块。
    decimal 数字。( 1,2,3…… )
    decimal-leading-zero 0开头的数字标记。( 01,02,03…… )
    lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
    upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
    lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
    upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
    lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
    lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
    upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
    hebrew 传统的希伯来编号方式
    armenian 传统的亚美尼亚编号方式
    georgian 传统的乔治亚编号方式(an, ban, gan, 等。)
    cjk-ideographic 简单的表意数字
    hiragana 标记是:a, i, u, e, o, ka, ki, 等。(日文片假名)
    katakana 标记是:A, I, U, E, O, KA, KI, 等。(日文片假名)
    hiragana-iroha 标记是:i, ro, ha, ni, ho, he, to, 等。(日文片假名)
    katakana-iroha 标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)
  • list-style-image list-style-image:url(img.png)
    定位位置上会有问题.以文字中线开始显示图片.
    并且也只当li依旧为list-item特性时才有效.
    一般使用背景图来制作列表背景.
  • list-style-position 指标记的内外方式,而非(图片)标记坐标位置
    outside:列表项目标记放置在文本以外,且环绕文本不根据标记对齐(默认值)
    1.当type在outside时,如RESET样式中设置ul的padding:0,则会看不到type图标(无论li是否设置padding);如设置ul的padding(例如)小于20,则type图标将会溢出在ul之外.
    2.如设置li的padding-left,则标记位置不更改,而标记与内容之间拉开间距
    3.如设置li的margin-left,则margin继承到标记之外,标记与父级拉开间距
    inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐。[查看演示]
    1.当type在inside时,type会和文字一起距离浏览器默认padding缩进,设置padding:0时,则会贴边显示.
    2.设置li的padding-left和margin-left视觉表现都为标记之外与父级拉开间距

[-] 表格

  • display:table-cell 特点:
    1.table-cell有类似inline-block的可并行性
    2.表格单元格宽度根据内容扩展,自行设置无效。
    3.表格单元格同行元素总是等高。
    注意:
    1.IE8+有效
    2.设置了display:table-cell的元素对宽度高度敏感,【对margin值无反应】,响应padding属性
    3.display:table-cell与float:left或是position:absolute属性不同时使用
    作用:
    1.可以通过设置vertical-align:middle内容垂直居中
    2.可用于宽度自适应布局,因为单元格本质宽度即由内容宽度决定。注意设置vertical-align:top
    hack处理display:table-cell; width:2000px;*width:auto;*zoom:1;
    3.可用于等高布局,即使不设置高度也会与同行元素等高。
    hack处理display:table-cell; width:30%; margin-bottom:-100px; *padding-bottom:110px;*float:left;
    参考资料
    4.自适应.cell{display:table-cell;*display:inline-block;} //table-cell content + auto side*2
    5.td中让元素垂直居中对齐,是对元素img设置y而非父级 ,文字则设置父级
  • table 1.表格中插div会脱离表格在外
    2.表格中对合并后 或tr 表现为block,会只有第一个单元格宽度,可直接应用arrow,tr的显示应用table-row而非block
    3.垂直th添加scope="col"
  • table-layout 适用于:table系元素。
    auto:默认的自动算法。布局将基于各单元格的内容,换言之,可能你给某个单元格定义宽度为100px,但结果可能并不是100px。表格在每一单元格读取计算之后才会显示出来,速度很慢
    fixed:固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关。也就是说,内容可能被裁切
    关于text-overflow在单元格中的失效
  • border-collapse separate:边框独立
    collapse:相邻边被合并
    只有当表格边框独立(即border-u-collapse属性等于separate时),border-spacing和empty-cells才起作用。
  • border-spacing 该属性作用等同于标签属性cellspacing(单元格边距)。border-spacing:0等同于cellspacing="0"
    如果提供全部两个length值时,第一个作用于横向间距,第二个作用于纵向间距。
    如果只提供一个length值时,这个值将作用于横向和纵向上的间距。
    *一般将此值与表格内标签属性cellpadding,cellspacing均设为0,通过CSS边距来控制.
  • caption-side top:指定caption在表格上边(默认)
    bottom:指定caption在表格下边
    要在IE7及以下浏览器中实现top与bottom参数值的效果,可直接在caption标签内定义标签属性valign为top和bottom。
  • empty-cells show:指定当表格的单元格无内容时,显示该单元格的边框。(默认)
    hide:指定当表格的单元格无内容时,隐藏该单元格的边框。
    IE7及以下浏览器中默认隐藏无内容的单元格边框,要想使其获得与show参数值相同的效果,可以变相给该空单元格加个占位且不可见的元素,例如全角空格或\ 等等。

[-] 表单

  • form text
    1.Chrome、IE、Firefox、Opera各有不同默认的padding和边框。
    2.IE中,不会因为行高而撑开高度
    3.所有浏览器均为content-box计算模式.
    4.IE6-7中,对input设置text-indent会整个缩进,应设为padding
    5.IE6-7中,过高行高字体显示异常,可能只有一半,则单独设置同字号行高与高度,添加专有padding。
    故重置text为:重定义padding,重定义边框样式,同时定义等值高度与行高。
    button
    1.Chrome、IE、Firefox、Opera各有不同默认的padding和边框。
    2.所有浏览器中,未定义高度时会受行高撑开高度
    3.Edge与IE8-中,为content-box计算模式,其他浏览器为border-box模式,但指定box-sizing将不会对IE8-生效。
    故重置button为:重定义padding,重定义边框样式,同时修改为content-box模式,可定义等值高度与行高,且设置ie7-的行高为normal。
    select
    1.各浏览器边框边距以及option的边距略有不同。
    2.默认所有浏览器均为border-box模式。
    3.仅firefox在未定义高度时会受行高撑开高度
    4.右侧padding在IE中会出现在下拉按钮以外。
    故重置select为:重定义padding,且不设置右侧padding,重定义边框样式,定义高度等于行高+padding+边框。
    radio/checkbox
    1.firefox无法修改其尺寸,opera无法修改复选框尺寸。
    2.单复选框的对齐问题,可用vertical-algin解决。参考资料
  • :placeholder 占位提示字符
    
                        &:-moz-placeholder
                        &:-ms-input-placeholder
                        &::-webkit-input-placeholder
                        //可定义文字样式:颜色、字号、对齐方式、字体等
                        
  • input::-ms-clear 设置为display:none,禁止IE10+显示密码切换功能
  • input::-mas-reveal 设置为display:none,禁止IE10+显示密码切换功能

[+] 其它

  • p/div 充分利用p,h1-h6等标签进行语义化.但不要在p中放置h1-h6,结构出错。
  • h1-h6 在H内部直接放置浮动右元素,IE7会换行,改用position定位
  • a 1.IE10-对于a与同级元素,空的a调整层级或顺序仍然无法点击,需要将a包裹其他元素
    2.在平板中a标签中包含:hover触发改变display:none/block的元素,旧平板无法点击,将display切换改为透明度更改并可能需要修改ie78的filter值

布局II-

[-] 多列

  • columns(Npx [M]) 多列,简写时注意加s,简写中只含宽度(带单位,不能百分比)和列数.Chrome需要前缀-webkit-
    应用于除table外的非替换块级元素,display:table-cell 元素, 内联块元素。
    实现多列的是里面的内容,而非自身.
    简写方式一:设置width,column:200px 3(固定3列200宽。)
    简写方式二:column:200px (自动根据父级宽度生成X列)
    同时指定2个值时,优先先按列数来分配宽.例如浏览器宽度1800px,指定3列200px宽,结果为分配为3列600px宽,忽略200宽指定值;如果指定宽度200px,未指定列数,则按宽度自动平分为9列
    参考资料:替换/非替换块级/内联元素
  • column-width(Npx)列宽
  • column-count(N)列数
  • column-gap(Npx)列间隔
  • column-rule(1px solid #ccc)列间隔边框 1px solid #ccc
    column-rule-style等同于border样式
  • column-span(N/all)列横跨,适用于:除浮动和绝对定位之外的块级元素
    是否横跨全部,all和none,不可设置数值非表格,此属性应设置在被应用多列属性的子元素上,多列无继承性,对于不想被继承多列的元素应写在多列父元素之外,而非去设置多列横跨.

[+] Flex

  • flex 教程 | 兼容旧版box教程
    在线调试flexbox布局效果
    display:flex/inline-flex;
    注意:
    所有column-*属性在flex容器上都不生效;flex容器上不能使用::first-line和::first-letter伪元素。
    float,clear和vertical-align属性应用在flex项目上将会无效和无法将其out-of-flow。
  • item flex 这个属性是flex-grow、flex-shrink和flex-basis属性的简写。
    如果缩写「flex: 1」, 则其计算值为「1 1 0%」
    如果缩写「flex: auto」, 则其计算值为「1 1 auto」
    如果「flex: none」, 则其计算值为「0 0 auto」
    如果「flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」,即「flex」初始值
  • item flex-grow 剩余空间的扩展比例,默认值0。
    flex-grow的默认值为0,如果没有显示定义该属性,是不会拥有分配剩余空间权利的。
  • item flex-shrink 剩余空间的收缩比例,默认1。
    默认情况之下,所有flex项目都可以收缩,但如果将它们设置为0时,他们不会缩小会保持原来的大小。
  • item flex-basis 如果所有子元素的基准值之和大于剩余空间,则会根据每项设置的基准值,按比率伸缩剩余空间
  • item order 用整数值来定义排列顺序,数值小的排在前面。可以为负值,默认值0。
  • item align-self指定flex项目自身的对齐方式或者使用align-items来指定单个flex项目。
    auto:如果'align-self'的值为'auto',则其计算值为元素的父元素的'align-items'值,如果其没有父元素,则计算值为'stretch'。
    flex-start:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。
    flex-end:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。
    center:弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。
    baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。
    stretch:如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制。
  • box flex-direction 该属性设置在flex元素上,非flex项目上。
    row:横向从左到右排列(左对齐),默认的排列方式。
    row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。
    column:纵向排列。
    row-reverse:反转纵向排列,从后往前排,最后一项排在最上面。
    注意:row和row-reverse依赖其写作模式,如果在rtl上下文方式下,他们都将分别被逆转。
  • box flex-wrap nowrap:flex容器为单行。该情况下flex子项可能会溢出容器
    wrap:flex容器为多行。该情况下flex子项溢出的部分会被放置到新行,子项内部会发生断行
    wrap-reverse:反转 wrap 排列。
  • box flex-flow 这个属性是flex-direction和flex-wrap属性的简写,默认值:row nowrap。
  • box justify-content 水平方向项目的分布方式。
  • box align-items 垂直方向单行项目的分布方式。
    flex-start: 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。
    flex-end: 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。
    center: 弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。
    baseline: 如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。
    stretch: 如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制。
  • box align-content 垂直方向多行项目的分布方式。

[+] Grid

  • grid 教程
    display: grid | inline-grid | subgrid;
    注意:
    grid盒子上column,float,clear,vertical-align都没有效果。
  • box grid-template-columns grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
    grid-template-columns: repeat(3, 20px [col-start]) 5%;
    grid-template-columns: 1fr 1fr 1fr;
  • box grid-template-rows grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
  • box grid-template-areas grid-template-areas: "<grid-area-name> | . | none | ..."
    "..."
  • box grid-column-gap grid-column-gap: 10px;
  • box grid-row-gap grid-row-gap: 15px;
  • box grid-gap grid-gap: <grid-column-gap> <grid-row-gap>;
  • box justify-items 水平方向网格内容的对齐方式。
    justify-items: start | end | center | stretch;
  • box align-items 垂直方向网格内容的对齐方式。
    align-items: start | end | center | stretch;
  • box justify-content 水平方向网格的分布方式。
    justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  • box align-content 垂直方向网格的分布方式。
    align-content: start | end | center | stretch | space-around | space-between | space-evenly;
  • box grid-auto-columns 定义隐式自动创建的网格大小
    grid-template-columns: 60px 60px;
  • box grid-auto-rows 定义隐式自动创建的网格大小
    grid-template-rows: 90px 90px
  • box grid-auto-flow 定义隐式自动创建的网格大小
    grid-auto-flow: row | column | row dense | column dense
  • box grid
    
    					grid: 200px auto / 1fr auto 1fr;
    
                        grid-template-rows: 200px auto;
                        grid-template-columns: 1fr auto 1fr;
                        grid-template-areas: none;
                        
  • item grid-column-start
  • item grid-column-end
  • item grid-row-start
  • item grid-row-end
  • item grid-column
  • item grid-row
  • item grid-area
  • item justify-self
  • item align-self

[+] Box

  • display:-webkit-box旧手机浏览器
    兼容处理
  • -webkit-box-orient设置或检索伸缩盒对象的子元素的排列方式。
    horizontal:设置伸缩盒对象的子元素从左到右水平排列
    vertical:设置伸缩盒对象的子元素从上到下纵向排列
    inline-axis:设置伸缩盒对象的子元素沿行轴排列
    block-axis:设置伸缩盒对象的子元素沿块轴排列
  • -webkit-box-pack设置或检索伸缩盒对象的子元素的对齐方式。
    start:设置伸缩盒对象的子元素从开始位置对齐(大部分情况等同于左对齐,受)
    center:设置伸缩盒对象的子元素居中对齐
    end:设置伸缩盒对象的子元素从结束位置对齐(大部分情况等同于右对齐)
    justify:设置或伸缩盒对象的子元素两端对齐
  • -webkit-box-align设置或检索伸缩盒对象的子元素的对齐方式。
    start:设置伸缩盒对象的子元素从开始位置对齐
    center:设置伸缩盒对象的子元素居中对齐
    end:设置伸缩盒对象的子元素从结束位置对齐
    baseline:设置伸缩盒对象的子元素基线对齐
    stretch:设置伸缩盒对象的子元素自适应父元素尺寸
  • -webkit-box-flex使用浮点数指定对象所分配其父元素剩余空间的比例。
  • -webkit-box-flex-group用整数值来定义伸缩盒对象的子元素所在的组。
  • -webkit-box-ordinal-group用整数值来定义伸缩盒对象的子元素显示顺序。
  • -webkit-box-direction设置或检索伸缩盒对象的子元素的排列顺序是否反转。normal | reverse
  • -webkit-box-lines设置或检索伸缩盒对象的子元素是否可以换行显示。single | multiple

动画-

[-] 2D/3D

  • transform 可以用【空格】(非逗号)分隔多个操作,被定义的元素必须为对外表现块级的元素.
    (*老版webkit一定要设置为块,否则内联元素的transfrom和animation无效).
    位移动画闪动问题,可提前加载为0.
  • transform-origin设置或检索对象以某个原点进行转换,数值或百分比.
    如果提供两个,第一个用于横坐标,第二个用于纵坐标。
    如果只提供一个,该值将用于横坐标;纵坐标将默认为50%。
  • transform:rotate旋转[n deg度数]
    transform:rotate(Ndeg) / rotateX(n) / rotateY(n) / rotateZ(n)
    transform:rotate3d(x,y,z,角度)
  • transform:skew倾斜[n deg度数]
    transform:skew(Ndeg / Xdeg,Ydeg) / skewX(n) / skewY(n)
  • transform:scale缩放[n倍数]
    transform:scale(x,y) / scaleX(n) / scaleY(n) / scaleZ(n)
    transform:scale3d(x,y,z)
    默认缩放以中心点为起点,不能用zoom
  • transform:translate位移/滑动[n px长度]
    transform:translate(x,y) / translateX(n) / translateY(n)
    transform:translate3d:(x,y,z) 案例演示
  • transform:matrix矩阵
    transform: matrix(6n)
    transform: matrix3d(16n)
  • transform-style规定被嵌套元素如何在 3D 空间中显示。
    flat,子元素将不保留其 3D 位置。
    preserve-3d 子元素将保留其 3D 位置。
  • backface-visibility定义元素在不面对屏幕时是否可见。
    取值背面可见/不可见visible|hidden;
    消除 transition 闪屏
    两个方法
    -webkit-transform-style: preserve-3d;
    /*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/
    -webkit-backface-visibility: hidden;
    /*(设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/
  • perspective(n)定义 3D 转换元素的透视视图。
    取值number|none,常用500; 参考资料
  • perspective-origin(x,y)规定 3D 元素的底部位置。
    50% 50%默认值,取值left,center,right,length,%

[-] 过渡

  • transition过渡,简写,属性-时间-缓动-延迟
    在Chrome下,使用过渡效果transition时有时会出现页面闪动
    设置:-webkit-transform-style:preserve-3d;或-webkit-backface-visibility:hidden;
  • transition-property过渡的属性,以逗号分割多个
  • transition-duration过度所需的时间
  • transition-timing-function缓动线:
    linear: 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
    ease: 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
    ease-in: 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
    ease-out: 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
    ease-in-out: 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
    cubic-bezier(, , , ): 特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内
    自定义缓动函数 ( stylie教程 )
  • transition-delay延迟时间

[-] 动画

  • @keyframes定义动画
    keyframes 名称{
    from{}
    to{}
    }
    @keyframes 名称{
    0% {}
    25%{}
    75% {}
    100% {}
    }
    注意写前缀
    过渡的动画不能使用简写。例如border:8px solid #fff无效,提前定义样式颜色,并给予0宽度,改变宽度.
    利用起点设置为非0%可设置出间隔动画
    不想设置断点的数据留空会线性执行到下一个有数据位置
    设置内层img等于祖层宽度,对子层尺寸进行变化形成遮罩显示效果(需设置overflow:hidden)
  • animation执行动画
    简写animation:
    name 5s ease-in 1s 8/infinite alternate paused forwards;
    名称 时间 缓动函数 延迟执行 重复次数 反向 暂停 停留在末尾状态;
    多个动画之间用【逗号】隔开,不同组动画属性的变化同时执行,可设置延迟达到队列效果,同属性例transform会覆盖
    动画帧数计算 腾讯工具 / cssanimate / liffect / 简单示例 / cssload / loading动画
  • animation-name动画名称
  • animation-duration时间
  • animation-timing-function缓动函数
    steps(num)逐帧动画
  • animation-delay延迟时间
  • animation-iteration-count执行次数
  • animation-directionanimation-direction:reverse / alternate / alternate-reverse (反向,奇正偶反,偶正奇反)
  • animation-play-stateanimation-play-state: running / paused 运行/暂停
  • animation-fill-modeanimation-fill-mode:none / forwards / backwords / both (返回初始,停留末尾,应用初始,两者)
  • 移动端动画 参考资料1 | 参考资料2
    1.减少BFC属性方式
    2.减少使用阴影与渐变
    3.让动画元素脱离文档流,减少重排
    4.JS中减少layout

移动端-

[-] 显示

[-] 交互

其它-

[-] 语法规则

  • @charset @charset "utf-8";
    在外部样式表文件内使用。指定该样式表使用的字符编码。
    该规则后面的分号是必需的,如果省略了此分号,会生成错误信息。
  • @import 指定导入的外部样式表
    @import url('demo.css') screen and (min-width:800px);
    该规则必须在样式表头部最先声明,并且其后的分号是必需的.IE9以前不支持.
  • @supports 检测是否支持某CSS特性
    @supports (rule) or | and | not (rule)
  • @media 详细资料
    @media [only/not] 媒体类型 [and (媒体特性表达式)] {你的样式}
    例:@media only/not print and (max-width: 1200px){样式代码}
    IE8及以下只能实现CSS2中的部分,即只可以设置媒体类型。
    其中部分支持max&min

[+] 打印

  • @page设置页面容器的版式,方向,边空等。可增加@page name
  • @page:first设置在打印时页面容器第一页使用的样式。
  • @page:left设置页面容器位于装订线左边的所有页面使用的样式。
  • @page:right设置页面容器位于装订线右边的所有页面使用的样式。
  • page检索或指定显示对象容器时使用的页面类型。需要先用@page定义name,调用ele{page:name;}
  • page-break-before检索或设置对象之前出现的页分割符。
  • page-break-after检索或设置对象之后出现的页分割符。
  • page-break-inside检索或设置对象容器内部出现的页分割符。

预编译-

[-] Less

  • Less中文文档
  • @var变量 .@{mySelector}{rule..}
    @{property}:value
    background: url("@{url}/white-sand.png");

    @fnord: "I am fnord.";
    @var: "fnord";
    content: @@var;
  • &:extend(.obj all)继承 .e:extend(.f,.p all) {}
  • Function 函数
  • Mixin 混合 随机数需在min下捕捉
    参考资料
  • ~ 避免编译 ~ 特殊内容
    ~`'goTop_'+Math.round(Math.random() * 1.0e8)` 字符串连接解析
    其中包括calc()运算函数在LESS中需要避免编译
  • ` JS表达式
  • when 条件与循环 .mixin (@a; @b: 0) when (isnumber(@b)) { ... }
    .mixin (@a; @b: black) when (iscolor(@b)) { ... }
    循环
    
    .generate-columns(4);
    
    .generate-columns(@n, @i: 1) when (@i =&lt; @n) {
      .column-@{i} {
        width: (@i * 100% / @n);
      }
      .generate-columns(@n, (@i + 1));
    }
    
    //输出
    .column-1 {
      width: 25%;
    }
    .column-2 {
      width: 50%;
    }
    .column-3 {
      width: 75%;
    }
    .column-4 {
      width: 100%;
    }
    

工具+

数字-

[+]值

  • 常规数 在 JavaScript 里面,数字均为双精度浮点类型double-precision 64-bit binary format IEEE 754 (也就是说一个数字的范围只能在+-2的53次方)
    十进制数:01、1
    二进制数:0b01、0B10 (只能为0和1)
    八进制数:0o777 (小于8)
    十六进制数:0x10、0XAB (0~9A~F)
    指数形式:1E2、1e2、0.1e2
  • 特殊值
    属性 描述
    Number.MAX_VALUE 可表示的最大值 1.79e+308
    Number.MIN_VALUE 可表示的最小值 5e-324
    Number.NEGATIVE_INFINITY 特指“负无穷”;在溢出时返回
    Number.POSITIVE_INFINITY 特指“正无穷”;在溢出时返回
    Number.EPSILON 表示1和比最接近1且大于1的最小Number之间的差别
    Number.MIN_SAFE_INTEGER JavaScript最小安全整数.
    Number.MAX_SAFE_INTEGER JavaScript最大安全整数.
    0/0=NaN,正数/0=正无穷,负数/0=负无穷
    正无穷+正无穷=正无穷,负无穷+负无穷=负无穷,正无穷+负无穷=NaN
    无穷乘法操作得到无穷,无穷除法与求余操作得到NaN
  • NaN 特指非数值
    任何与 NaN 进行运算的结果均为 NaN
    NaN 与自身不相等(NaN 不与任何值相等)

[-]检测

  • [Number.]isNaN(val) 判断传递的值是否为 NaN
    全局isNaN会自动转换参数为数值再做判断,Number.isNaN不会自动转换
  • [Number.]isFinite(val) 判断传递的值是否为有限数字
    全局的isFinite会自动转换参数为数值再作判断,Number.isFinite不会自动转换
  • Number.isInteger(val) 判断传递的值是否为整数
    IE不支持,需使用polyfill
  • Number.isSafeInteger(val) 判断传递的值是否为安全整数
    IE不支持,需使用polyfill

[-]转换

  • (num).toString([rad]) 指定进制,转为字符串,默认为10进制,范围[2~36]。
  • [Number.]parseInt(val,[rad]) 根据给定的进制数把一个字符串解析成整数
    自动判断进制,默认转换进制为10进制
    value 结果
    空字符串 NaN
    第一个非空字符不是数值或负号 NaN
    第一个非空字符是数值,遇到非数值时停止解析 number
  • [Number.]parseFloat(val) 把字符串参数解析成浮点数
    第一个小数点有效,第二个无效

[-]表示

  • (num).toFixed([n]) 指定小数点后位数,小数位数[0 ~ 20]
    会四舍五入,返回的是一个字符串
  • (num).toExponential([n]) 使用指数计数法,范围[0~20],返回的是一个字符串。
  • (num).toPrecision([n]) 以指定的精度返回该数值对象的字符串表示
    把数字格式化为指定的长度。N为显示位数,自动选择toFixed() toExponential(N)两者之一。
  • (num).toLocaleString([local],[opt]) 返回这个数字在特定语言环境下的表示字符串 参考资料
    仅浏览器中有效
    $num.toLocaleString('zh-u-nu-hanidec') //中文数字
    x.toLocaleString('cn-ZH',{
    style:'currency',
    currency:'CNY',
    currencyDisplay:'symbol'
    })
    en-US、en-JP
    USD、JPY...

数学与日期-

[-]Math

  • Math.abs(x) 返回 x 的绝对值
  • Math.sign(x) 判断一个数到底是正数、负数、还是零。
    参数为正数,返回+1;
    参数为负数,返回-1;
    参数为 0,返回0;
    参数为-0,返回-0;
    其他值,返回NaN。
  • Math.random() 返回 0 ~ 1 之间的随机数(大于等于 0.0且小于1.0的伪随机 double 值)
    1.随机颜色16进制:Math.floor( Math.random() * 16777215 ).toString( 16 )
    2.2个值之间的随机值:function random(min,max){return min + (max-min)*Math.random();}
    参考资料
  • Math.max/min(x,y,z..n) 返回 x,y,z,...,n 中的最高/低值
    参数中最大的值。如果没有参数,则返回 -Infinity。如果有某个参数为 NaN,或是不能转换成数字的非数字值,则返回 NaN。
  • Math.ceil/floor/round/trunc(x) 对数进行上/下舍入/四舍五入/返回整数部分
  • Math.根
    函数 描述
    Math.SQRT1_2 返回 2 的平方根的倒数(约等于 0.707)
    Math.SQRT2 返回 2 的平方根(约等于 1.414)
    Math.sqrt(x) 返回一个数的平方根
    Math.cbrt 返回一个数的立方根
    Math.hypot(x,y..) 返回所有参数的平方和的平方根
  • Math.指数对数
    函数 描述
    Math.E 返回算术常量 e,即自然对数的底数(约等于2.718)
    Math.LN2 返回 2 的自然对数(约等于0.693)
    Math.LN10 返回 10 的自然对数(约等于2.302)
    Math.LOG2E 返回以 2 为底的 e 的对数(约等于 1.414)
    Math.LOG10E 返回以 10 为底的 e 的对数(约等于0.434)
    Math.pow(x,y) 返回x的y次幂
    Math.exp(x) 返回E(x)的指数
    Math.log(x) 返回数的自然对数(底为e)
    Math.log2(x) 返回一个数字以2为底的对数
    Math.log10(x) 返回以10为底的对数
    Math.expm1(x) 返回e(x)-1
    Math.log1p(x) 返回一个数字加1后的自然对数,即log(x+1)
  • Math.三角函数
    函数 描述
    Math.PI 返回圆周率(约等于3.14159)
    Math.sin(π) 返回数的正弦
    Math.cos(π) 返回数的余弦
    Math.tan(π) 返回角的正切
    Math.asin(x) 返回数的反正弦值
    Math.acos(x) 返回数的反余弦值
    Math.atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值
    Math.atan2(y,x) 返回从 x 轴到点 (x,y) 的角度(介于 -PI/2 与 PI/2 弧度之间)
    Math.sinh(x) 返回数的双曲正弦值
    Math.cosh(x) 返回数的双曲余弦值
    Math.tanh(x) 返回数的双曲正切值
    Math.asinh(x) 返回数的反双曲正弦值
    Math.acosh(x) 返回数的反双曲余弦值
    Math.atanh(x) 返回数的反双曲正切值
  • Math.clz32/(x) 返回一个数的 32 位无符号整数形式有多少个前导 0
  • Math.imul(x,y) 返回两个数以 32 位带符号整数形式相乘的结果
  • Math.fround(x) 方法返回一个数的32位单精度浮点数形式

[-]Date

  • new Date([time..]) 返回:日期对象
    无参数时:创建计算机当前时间的日期对象
    var date = new Date();
    Sat Oct 07 2017 01:20:24 GMT+0800 (中国标准时间)
    有参数时:创建指定时间的日期对象
    var date = new Date(2015, 5, 19, 20, 15, 30, 123);
    var date = new Date(1435146562875);
    当前时间是浏览器从本机操作系统获取的时间,所以不一定准确,因为用户可以把当前时间设定为任何值。
  • date.getTime(){timestamp}时间戳,等同于date.valueOf()
  • date.getFullYear(){2017}年份
  • date.getMonth(){0~11}月份,范围0~11
  • date.getDate(){1~31}日期
  • date.getDay(){1~7}星期
  • date.getHours(){0~24}时,24小时制
  • date.getMinutes(){0~60}
  • date.getSeconds(){0~60}
  • date.getMilliseconds(){0~1000}毫秒
  • data.set... 设置日期对象
  • date.toString() Sat Oct 07 2017 01:36:58 GMT+0800 (中国标准时间)
  • date.toLocaleString() 2017/10/7 上午1:33:06
  • date.toUTCString() Fri, 06 Oct 2017 17:33:06 GMT
  • Date.parse(ISO){timestamp} 解析一个符合ISO 8601格式的字符串,并返回对应时间戳
    var d = Date.parse('2015-06-24T19:49:22.875+08:00');
    d; // 1435146562875
  • Date.now(){timestamp} 当前时间戳,IE8不支持

字符串-

[+]构建

  • 'str' 字面量方法
    `\u{xxxxx}` unicode编码
  • new String() 尽量避免使用包装对象
  • `__ ${varname} __` 模板字符串,支持多行
  • str.length 字符串的长度。
    需要特别注意的是,字符串是不可变的,如果对字符串的某个索引赋值,不会有任何错误,但是,也没有任何效果。

[-]转换

  • str.toUpperCase() 返回值:新字符串
    原对象:不变
    转为大写
  • str.toLowerCase() 返回值:新字符串
    原对象:不变
    转为小写
  • String.raw(str) 会对斜杠进行转义

[-]查找

  • str.indexOf(val,[i]) 参数:正向查找指定值,i为起始索引
    返回值:第一个出现的索引位置;如查找不到则返回-1
  • str.lastIndexOf(val,[i]) 参数:逆向查找指定值,i为起始索引
    返回值:最后一个出现的索引位置;如查找不到则返回-1
  • str.includes(str,[i]) 返回布尔值,表示是否找到了参数字符串
    第二个参数,表示开始搜索的位置
  • str.startsWith(str,[i]) 返回布尔值,表示参数字符串是否在原字符串的头部。
    第二个参数,表示开始搜索的位置
  • str.endsWidth(str,[i]) 返回布尔值,表示参数字符串是否在原字符串的尾部。
    第二个参数表示针对前n个字符

[-]匹配

  • str.split(/reg/,[len]) 参数1:字符串或正则表达式
    参数2:最大的数组长度
    返回值:数组
    原对象:不变
    把字符串按指定符号或正则分割为字符串数组
  • str.search(/reg/) 参数:字符串/正则表达式
    返回:第一个子串的索引/-1
    始终从头开始找,找到一个即返回,正则无需全局设置
  • str.match(/reg/g) 参数:字符串/正则表达式
    返回:子串数组/null
    如果传入非正则,会隐式地转换为正则表达式;
    如果没有参数,会返回空数组;
    数组:
    1.进行匹配完整的字符串
    2.圆括号捕获的结果
    3.index: 0,匹配结果在原字符串中的索引
    4.input: "原字符串"
    如果没有匹配到,返回null
  • str.replace(/reg/g,val|fn) 参数1:需要替换的字符或正则表达式,没有全局标识时只替换一次
    参数2:替换成的字符串或生成字符串的函数,用return返回
    返回值:新的字符串
    原对象:不变
    回调函数参数详情

[-]操作

  • str.concat(str,..) 参数:串联一个或更多字符串
    返回值:新的字符串
    原对象:不变。
  • str.slice[n,m) 参数:起始位置,末尾位置(不包含)
    返回值:被截取得到的新字符串。
    原对象:不变。
    当只有1个参数时,则为起始位置到末尾全部,且包含末尾元素(即m=arr.length)。
    n和m可为负值,-1 指最后一个元素,-2 指倒数第二个元素。
  • str.substring[n,m) 参数:起始位置,末尾位置(不包含),不接受负数
    返回值:被截取得到的新字符串。
    原对象:不变。
  • str.substr(n,[len]) 参数:开始提取字符的位置(如为负数,则用len+n),提取的字符数
    返回值:新字符串
    原对象:不变
    参考资料
  • str.trim() 返回值:新字符串
    原对象:不变
    移除字符串的两端删除空白字符。
    空白字符包括所有的空白字符 (space, tab, no-break space 等) 以及所有行终止符字符(如 LF,CR)。
  • str.repeat(n) 参数:重复次数(包含原)
    返回值:新的字符串
    原对象:不变
    会向下取整,当为0时变为空字符串
  • str.charAt(i) 参数:查找的索引位置
    返回值:索引上的字符

文本格式化-

[-]JSON

  • json 概念:
    它是一种表示结构化数据的形式,JSON是一个格式化的字符串,文件格式后缀为.json
    语法:
    简单值:字符串、数值、布尔值、null,不支持undefined
    对象:一组无序的键值对
    数组:一组有序的值的列表,可以通过索引来访问
    JSON与JS的区别:
    1.对象:JSON字符串必须使用双引号(单引号会导致语法错误),且对象的属性必须加双引号;
    2.对象和数组:最后一个属性后不能有逗号
    3.数值:禁止出现前导零,如果有小数点,则后面至少跟着一位数字
    参考资料
  • JSON.stringify(obj,[fn,space]) js对象 -> json字符串 参考资料
    参数1:传入的对象。
    如有键值为函数时,会排除该成员。我们可以在转换前将函数用.toString()方法转换为字符串来避免以上问题的发生。
    如有键值为日期对象时,会转为字符串。
    参数2:用于转换结果的函数或数组
    如果该参数是一个函数,则在序列化过程中,被序列化的值的每个属性都会经过该函数的转换和处理;如果该参数是一个数组,则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中;如果该参数为null或者未提供,则对象所有的属性都会被序列化;
    参数3:缩进空格
    指定缩进用的空白字符串,用于美化输出(pretty-print);如果参数是个数字,它代表有多少的空格;上限为10。该值若小于1,则意味着没有空格;如果该参数为字符串(字符串的前十个字母),该字符串将被作为空格;如果该参数没有提供(或者为null)将没有空格。
  • JSON.parse(json,[fn(key,val)]) json字符串 -> js对象
    转换函数需返回value值。
    参考资料
  • obj.toJSON() JS对象中添加toJSON()方法,自定义过滤一些数据,返回新的对象
    注意设置return值

[-]URI

  • encodeURI(uri) 参数:完整URI字符串
    返回:新字符串,表示提供的字符串编码为统一资源标识符
    不会编码:&,+,=
  • encodeURIComponent(uri) 除了字母、数字、(、)、.、!、~、*、'、-和_之外的所有字符均会被转移
  • decodeURI(uri) 解码某个编码的 URI。
  • decodeURIComponent(uri) 解码一个编码的 URI 组件。

[-]Unicode

  • str.charCodeAt(i) 参数:查找的索引位置
    返回值:unicode码点(十进制)
  • str.codePointAt(i) 参数:查找的索引位置
    返回值:unicode码点(十进制,需自行转16进制)
    支持大于2个字节的Uniode编码
  • String.fromCharCode(uni..) 参数:unicode码点
    返回值:字符串
  • String.fromCodePoint(uni..) 参数:unicode码点
    返回值:字符串
    支持大于2个字节的Uniode编码
  • str.normalize([NFC]) 按指定Unicode正规形式将当前字符串正规化。
    参数:四种 Unicode 正规形式 "NFC", "NFD", "NFKC", 以及 "NFKD" 其中的一个, 默认值为 "NFC".
    参考资料

[-]正则表达式

  • /exp/flags 正则表达式:/exp/flags
    RegExp对象:new RegExp('exp',flags)
    RegExp对象:new RegExp(/exp/flags)
    注意,如果使用第二种写法,因为字符串的转义问题,字符串的两个\\实际上是一个\。
    参考资料1 | 参考资料2
    修饰符:
    i:忽略大小写。
    g:全局匹配。
    m:多行模式。
    y:执行“粘性”搜索,匹配从目标字符串的当前位置开始。
    u:正确处理大于\uFFFF的 Unicode 字符(点.字符在正则表达式中,含义是除了换行符以外的任意单个字符。对于码点大于0xFFFF的 Unicode 字符,点字符不能识别,必须加上u修饰符。)
    s:行终止符
  • reg.exec(str) 返回:数组/null
    参考资料
  • reg.test(str) 返回:true/false

数组-

[+]构建

  • [val,...,] 数组直接量的语法允许有可选的结尾的逗号
    即[1,2,]长度为2
  • new Array([len]) var arr = new Array(val1,val2,...)
    var arr = new Array(len) //长度为len,但并数组内无任何值
  • Array.of(val..) Array.of() 和 Array 构造函数之间的区别在于处理整数参数:
    Array.of(7) 创建一个具有单个元素 7 的数组,而 Array(7) 创建一个包含 7 个 undefined 元素的数组。且不需要new运算符。
    参考资料

[+]属性

  • arr.constructor 返回值:Array
  • arr.entries() 返回一个新的Array Iterator对象,该对象包含数组中每个索引的键/值对。
  • arr.length 返回值:数组的长度(0 到 232-1 的整数)。
    你可以设置 length 属性的值来截断任何数组。当通过改变length属性值来扩展数组时,实际元素的数目将会增加。
  • arr[index] 返回值:指定索引处数组的值
    如果是字符串下标,不会体现在数组上,需要指定下标键打印,如果是索引下标,则可以直接打印

[-]检测

[-]转换

  • ...[argArr] 返回值:参数序列
    扩展运算符,好比rest参数的逆运算,将一个数组转为用逗号分隔的参数序列,主要用于函数调用
    如果扩展运算符后面是一个空数组,则不产生任何效果。
    ES5写法:fn.apply(null,argArr)
    求最大值:Math.max(...argArr)
    参考资料
  • Array.from(o,[fn],[fthis]) 从一个类似数组或可迭代对象中创建一个新的数组实例。
    参数:包括arguments,set,map,DOM元素集,字符串等 | 回调函数(当前值val)并返回一个新的替换的值 | 回调函数的this指向
    返回:新数组
    原对象:不变。
    参考资料1 | 参考资料2
    Array.from(arrayLike,callback(val),this)
    callback -> return replace_val
    扩展运算符背后调用的是遍历器接口(Symbol.iterator),如果一个对象没有部署这个接口,就无法转换。Array.from方法还支持类似数组的对象。所谓类似数组的对象,本质特征只有一点,即必须有length属性。因此,任何有length属性的对象,都可以通过Array.from方法转为数组,而此时扩展运算符就无法转换。如:Array.from({ length: 3 });

    Array.from()的另一个应用是,将字符串转为数组,然后返回字符串的长度。因为它能正确处理各种 Unicode 字符,可以避免 JavaScript 将大于\uFFFF的 Unicode 字符,算作两个字符的 bug。
  • arr.join(symbol) 使用指定符号把数组元素拼接为字符串
    参数:符号
    返回:新字符串
    原对象:不变。
    如果元素是undefined 或者null,则会转化成空字符串
    如果缺省符号,数组元素用逗号分隔

[-]查找

  • arr.indexOf(val,[i]) 参数:正向查找指定值,i为起始索引
    返回值:第一个出现的索引位置;如查找不到则返回-1
    默认起始索引为0,如为-2则从倒数第二个元素开始查找。
    该方法执行严格相等判断
  • arr.lastIndexOf(val,[i]) 参数:逆向查找指定值,i为起始索引
    返回值:第一个出现的索引位置;如查找不到则返回-1
    默认起始索引为arr.length - 1,从数组末尾往前开始查找。
    该方法执行严格相等判断
  • arr.includes(val,[i]) 返回值:true/false
    参数:从i索引处开始查找val,默认为 0。
    如果i为负值,则按升序从array.length + fromIndex 的索引开始搜索。
    指定了i的时候升序查找到末端不会再从头查找。
  • arr.find(fn,[fthis]) 查找数组中满足提供的测试函数的第一个元素的值
    返回:第一个满足的值 | undefined
    arr.find(callback(val,i,arr),this)
    callback -> return val
    参考资料
  • arr.findIndex(fn,[fthis]) 返回符合测试条件的第一个数组元素索引
    返回:第一个满足的值的索引 | -1
    arr.find(callback(val,i,arr),this)
    callback -> return true/false
    参考资料

[-]排序

  • arr.sort([fn]) 对数组进行排序。
    参数:空(如果省略,元素按照转换为的字符串的各个字符的Unicode位点进行排序) | 指定按某种顺序进行排列的函数
    返回:改变后的数组。
    原对象:改变。
    如果数组包含undefined元素,它们会被排到数组的尾部。
    compareFunction(a,b)
    如return < 0,a排在b之前;
    如return > 0,a排在b之后;
    如return = 0,两个参数相等。
  • arr.reverse() 反转当前数组排序
    参数:无
    返回:改变后的数组
    原对象:改变

[-]添加

  • arr.push(val...) 参数:在数组末端添加若干个元素
    返回值:数组的新长度。
    原数组:改变。
    该方法和 call() 或 apply() 一起使用时,可应用在类似数组的对象上。push 方法根据 length 属性来决定从哪里开始插入给定的值。如果 length 不能被转成一个数值,则插入的元素索引为 0,包括 length 不存在时。当 length 不存在时,将会创建它。
    唯一的原生类数组(array-like)对象是 Strings,尽管如此,它们并不适用该方法,因为字符串是不可改变的。
  • arr.unshift(val...) 参数:在数组最前方添加若干个元素
    返回值:数组的新长度。
    原数组:改变。
    这个方法能够通过 call 或 apply 方法作用于类似数组的对象上。不过对于没有 length 属性(代表从0开始的一系列连续的数字属性的最后一个)的对象,调用该方法可能没有任何意义。
  • arr.splice(i,0,val...) 参数:在数组指定的i索引位置添加若干个元素
    返回值:空数组。
    原数组:改变。

[-]移除

  • arr.pop() 参数:移除数组的最后一个元素,无参数。
    返回值:被删除的元素。
    原数组:改变。
    该方法和 call() 或 apply() 一起使用时,可应用在类似数组的对象上。pop方法根据 length属性来确定最后一个元素的位置。如果不包含length属性或length属性不能被转成一个数值,会将length置为0,并返回undefined。
  • arr.shift() 参数:移除数组的第一个元素,无参数。
    返回值:被删除的元素。
    原数组:改变。
    这个方法能够通过 call 或 apply 方法作用于类似数组的对象上。但是对于没有 length 属性(从0开始的一系列连续的数字属性的最后一个)的对象,调用该方法可能没有任何意义。
  • arr.splice(i,[delnum]) 参数:在数组指定的i索引位置删除指定个数
    返回值:被删除的元素组成的数组。
    原数组:改变。
    delnum=空:如第2个参数缺省,则删除从索引位置起到数组末尾的全部元素。
    delnum=1:如第2个参数存在,且=1,则相当于删除索引位置的元素。
    delnum=n:如第2个参数存在,且>1,删除arr[i]~arr[i+n-1]的元素。

[-]替换

  • arr.fill(val,[n,m)) 参数:用一个固定值替换数组的元素。
    返回值:新的数组。
    原数组:改变。
    包含n位置,不包含m位置。默认值n=0,m=length
  • arr.copyWithin(i,[n,m)) 参数:复制(索引n ~ 索引m-1)的元素,替换(索引i ~ 索引i+m-n-1)的元素。
    返回值:新的数组。
    原数组:改变。
    复制选取的部分包含n,但不包含m。如果m不定义,即到数组末端。
    i 为基底的索引,复制序列到该位置。如果是负数,target 将从末尾开始计算
    如果 n 被忽略,copyWithin 将会从0开始复制。
    如果 m 被忽略,copyWithin 将会复制到 arr.length。
    参考资料
  • arr.splice(i,[delnum],val...) 参数:在数组指定的i索引位置删除和添加若干个元素(用新的替换旧的)
    返回值:被删除的元素组成的数组。
    原数组:改变。
    delnum=空:如第2个参数缺省,则删除从索引位置起到数组末尾的全部元素。
    delnum=1:如第2个参数存在,且=1,则相当于删除索引位置的元素。
    delnum=n:如第2个参数存在,且>1,删除arr[i]~arr[i+n-1]的元素。

[-]操作

  • arr.concat(val...) 参数:串联一个新的数组元素或数组内的元素(当串联的是一个新数组时,只取数组里的值)。
    返回:一个新的数组。
    原数组:不变。
  • arr.slice[n,m) 参数:起始位置,末尾位置(不包含)
    返回值:被截取得到的新数组。
    原数组:不变。
    当只有1个参数时,则为起始位置到末尾全部,且包含末尾元素(即m=arr.length)。
    n和m可为负值,-1 指最后一个元素,-2 指倒数第二个元素。

[-]遍历

  • arr.forEach(fn(val,i),[fthis]) 对数组的每个元素执行一次提供的函数
    返回值:无
    原数组:不变
    回调返回:无
    必定会每个均遍历一次,无法用continue或break退出
    参考资料
    如果使用箭头函数表达式传入函数参数,thisArg 参数会被忽略,因为箭头函数在词法上绑定了this值。
    如果数组在迭代时被修改了,则其他元素会被跳过
  • arr.map(fn(val,i),[fthis]) 创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果
    返回值:新数组
    原数组:不变
    回调返回:新值
    传入的是函数名或匿名函数,不是一个执行的函数。
    callback需返回一个新val,注意不能直接用parseInt方法,具体见参考资料 参考资料
  • arr.filter(fn(val,i),[fthis]) 检测数值元素,并返回符合条件所有元素的数组。
    返回值:新数组
    原数组:不变
    回调返回:true/false
    和map()不同的是,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素。
    参考资料
  • arr.every(fn(val,i),[fthis]) 测试数组的所有元素是否都通过了指定函数的测试
    返回值:true/false
    原数组:不变
    回调返回:true/false
    回调中请指定所有返回的true/false情况
  • arr.some(fn(val,i),[fthis]) 测试数组中的某些元素是否通过由提供的函数实现的测试
    返回值:true/false
    原数组:不变
    回调返回:true/false

[-]递归

  • arr.reduce(fn(total,val,i),[init]) 将数组中的元素通过回调函数累计处理
    返回值:最终累计处理结果
    原数组:不变
    回调返回:新的total值(total与val的规则)
    total:累加器累加回调的返回值; 它是上一次调用回调时返回的累积值,或初始值
    val:当前正在处理的元素
    i:当前处理元素的索引号;如果提供了初始值,索引号为0开始,否则索引为1开始
    init:用作第一个调用callback的第一个参数的值。如果没有提供初始值,则将使用数组中的第一个元素。在没有初始值的空数组上调用 reduce 将报错。
  • arr.reduceRight(fn(total,val,i),[init]) 从右向左递归。

索引集合类-

[-]类数组对象

  • arguments 函数内部的arguments对象
    不能直接使用数组原型方法,但是可以用call实现
  • NodeList dom遍历方法返回的节点列表

集合-

[+]构建

  • new Set([arr]) Set是一组key的集合,但不存储value,且key不能重复。
    [...$set] 解构成一个数组
  • new Map([[val1,val2]]) 初始化Map需要一个二维数组
    map的键可以为任意数据类型,object只能为字符串
    [...$map] 解构成一个二维数组

[-]属性

  • set/map.size 返回值:数值
    返回实例的长度

[-]增删改查

  • set.add(key) 返回值:set本身
    添加一个值
  • map.set(key,val) 返回值:map本身
    添加新的key-value键值对
  • map.get(key) 返回值:value | undefined
    取key的值
  • set/map.has(key) 返回值:布尔
    该值是否为实例的成员
  • set/map.delete(key) 返回值:布尔
    删除一个值
  • set/map.clear() 返回值:无
    清除所有成员

[-]遍历

  • set/map.keys() 返回键名的遍历器
    set/map.keys()返回的是遍历器,而对象的Object.keys(obj)返回的是数组
  • set/map.values() 返回键值的遍历器
  • set/map.entries() 返回所有成员的遍历器
  • set/map.forEach(fn(val,key,sm)) 使用回调函数遍历每个成员
    Set 结构的键名就是键值,因此第一个参数与第二个参数的值永远都是一样的(并非像数组是索引号)

类型数组-

[-]Buffer

[-]Stream

[-]TypedArray

函数-

[+]构建与调用

  • function name(arg){} 函数声明
    1.使用函数声明时,会提升优先级(一等公民),不包括函数表达式。
    2.如果同一个函数被多次声明,后面的声明就会覆盖前面的声明。
    3.函数参数是拷贝值传递:对于基本类型,不会修改原值;对于引用类型,拷贝的是指针,如修改原数据属性会改变原数据,如替换整个目标则不修改原数据,此外始终不改变原指针的指向。参考资料
    4.函数可以被递归,函数可以调用其本身。
    5.ES6中块级作用域中声明的函数,在块级作用域之外不可引用
  • var handle = function [name](arg){} 函数表达式
    1.函数表达式是一个匿名函数
    2.当定义name时,此时可以用name在函数内部指代函数本身,但在函数体外部无效
    3.函数表达式,不会被提升。
    4.如果同时采用function命令和赋值语句声明同一个函数,最后总是采用赋值语句的定义。 参考资料
  • (x) => x*x 箭头函数
    1.不可以当做构造函数,即不能使用new操作符
    2.不可以使用arguments、super、new.target,均指向外层函数的对应变量
    3.不可以使用yield命令,因此箭头函数不能用作 Generator 函数
    4.没有自己的this,函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象,且固定不可变,即使使用call也无法修改,更多的可在构造函数或闭包内使用,则可替代普通函数需要用that指代this。
    this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。正是因为它没有this,所以也就不能用作构造函数。所以call的绑定也是无效,但上层的普通函数的call绑定有效。
    5.没有prototype属性,也不能使用yield关键字
    例:
    1.当只有一行直接返回变量的处理时,x=>x*x,返回x的平方
    2.当只有一行且无需返回值时,x=>void dosomething
    3.当有多个参数或多条语句时,需添加括号和花括号,(x,y)=>{dosomething / return xx}
  • var handle = new Function('arg..','fnbody') Function构造函数构建
    1.此形式构建的是匿名函数
    2.参数为字符串
    3.只有最后一个参数会被当做函数体,如果只有一个参数,该参数就是函数体。
  • IIFE ( function(){}() );
    ( function(){} )();
    [ function(){}() ];

    ~ function() {}();
    ! function() {}();
    + function() {}();
    - function() {}();

    delete function() {}();
    typeof function() {}();
    void function() {}();
    new function() {}();
    new function() {};

    var f = function() {}();

    1, function() {}();
    1 ^ function() {}();
    1 > function() {}();

[+]参数

  • (arg=x) 一旦设置了参数的默认值,函数进行声明初始化时,参数会形成一个单独的作用域 参考资料
  • ...args rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。
    rest 参数之后不能再有其他参数(即只能是最后一个参数)
  • arguments 函数的实参,一个类数组对象。
    1.在JavaScript中,函数参数的默认值是undefined
    2.严格模式下为只读对象,不允许修改。
    3.箭头函数不存在(浏览器)
    对象值 描述
    arguments[0] 第一个参数名字
    arguments.length 参数的个数
    arguments.callee 主体函数本身,拥有这个参数对象的函数 (严格模式禁用)
  • fn.length 返回函数预期传入的参数个数,即函数定义之中的参数个数(定义之时的个数)
    指定了默认值以后,函数的length属性,将返回没有指定默认值的参数个数。也就是说,指定了默认值后,length属性将失真。

[+]内部

  • 理论 作用域:静态/词法作用域,取决于函数声明时所在的作用域,与其运行时所在的作用域无关。
    执行上下文栈:变量对象、作用域链、this
    1.变量对象:函数的所有形参、函数声明、变量声明(如果变量名称与声明的形参或函数相同,则变量声明不会干扰已经存在的这类属性)参考资料
    变量对象为进入执行上下文阶段,在执行阶段,可能被重新赋值。
    2.作用域链:[VO=>AO压入栈顶,全局作用域链]
    闭包:参考资料
  • this this关键字总是指向函数所在的当前对象
    普通函数:严格模式(undefined)、严格模式(全局对象)
    构造函数:对象的实例
    对象方法:对象本身
    call/apply/bind:绑定的对象
    箭头函数:函数所在的块的this
    从ES规范解读this
  • return [val] 如果没有return语句,函数执行完毕后也会返回结果,只是结果为undefined.
    尾调用优化

[-]方法

  • fn.call(obj,arg) fn.call(作用域,[传递参数])
    apply与call均让函数作用于特定作用域,call必须明确传入每一个参数。
    apply()把参数打包成Array再传入;call()把参数按顺序传入
    对普通函数调用,我们通常把this绑定为null。
    在非严格模式下,如果参数为空、null和undefined,则默认传入全局对象。
  • fn.apply(obj,[argArr]) fn.apply(作用域,[传递参数Arr])
  • fn.bind(obj) 返回由指定的this值和初始化参数改造的原函数拷贝 参考资料
  • fn.toString() 返回一个表示当前函数源代码的字符串,注释也可以返回

异步编程-

[-]Promise

  • new Promise(fn(resolve,reject)) 参考资料
    Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。它们是两个函数,由 JavaScript 引擎提供,不用自己部署。
    resolve函数的作用是,将Promise对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;reject函数的作用是,将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。
    Promise 新建后就会立即执行。
  • pms.then(fn(val)]) Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。
  • pms.catch(fn(error)) Promise.prototype.catch方法是.then(null, rejection)的别名,用于指定发生错误时的回调函数。
    Promise 对象的错误具有“冒泡”性质,会一直向后传递,直到被捕获为止。也就是说,错误总是会被下一个catch语句捕获。
    跟传统的try/catch代码块不同的是,如果没有使用catch方法指定错误处理的回调函数,Promise 对象抛出的错误不会传递到外层代码,即不会有任何反应。
  • pms.finally(fn) 不管 Promise 对象最后状态如何,都会执行的操作
  • Promise.all(arr) const p = Promise.all([p1, p2, p3]);
    用于:多个promise实例全部完成时
    Promise.all方法的参数可以不是数组,但必须具有 Iterator 接口,且返回的每个成员都是 Promise 实例。
    只有数组里的promise实例状态都变为fulfilled,p的状态才会变成fulfilled,只要有一个rejected,则p的状态也会变为rejected
  • Promise.race(arr) 用于:任意promise实例完成时
  • Promise.resolve(o) 将需要的对象转为promise对象
    如果为普通对象,将直接改变状态至resolved,且传递参数至then
    如果没有任何参数时,立即resolve的 Promise 对象,是在本轮“事件循环”(event loop)的结束时,而不是在下一轮“事件循环”的开始时。
  • Promise.reject(o) Promise.reject()方法的参数,会原封不动地作为reject的理由,变成后续then方法的第2个函数的参数
  • Promise.try(o) 参考资料

[-]Iterable

  • [...iterable] 只要具有 Iterator 接口的对象,都可以使用扩展运算符
    [...str]
    [...arr|TypedArray]
    [...set|map]
    [...arguments]
    [...nodeList]
  • for(.. of iterable) for(let key of iterable){}
    任何部署了Interator接口的数据都可以用for..of来遍历
    String、Array、TypedArray、Map、Set、函数arguments对象、NodeList对象都内置Interator接口,因为它们的原型对象都有一个 Symbol.iterator 方法。
    数组使用for .. of 直接取值更快捷
  • for await(.. of iterable) 遍历异步的 Iterator 接口

[-]Iterator

  • o.[Symbol.iterator] 一个数据结构只要具有Symbol.iterator属性,就可以认为是“可遍历的”
    Symbol.iterator属性本身是一个函数,就是当前数据结构默认的遍历器生成函数。
    执行这个函数,就会返回一个遍历器。
    给对象自定义一个遍历器
    由于 Generator 函数就是遍历器生成函数,因此可以把 Generator 赋值给对象的Symbol.iterator属性,从而使得该对象具有 Iterator 接口。
  • ite.next([val]) 每次调用next方法,都会返回一个代表当前成员的信息对象,具有value和done两个属性。
  • ite.return([val]) 如果一个对象在完成遍历前,需要清理或释放资源,就可以部署return方法
  • ite.throw([val]) next、throw、return的共同点

[-]Generator

  • function* {ite} 执行 Generator 函数会返回一个遍历器对象
    这个遍历器是 Generator 函数的实例,也继承了 Generator 函数的prototype对象上的方法
    Generator的this与new
    var g = Generator.call(Generator.prototype)
    此时Generator函数中的this指向实例g
    var F() = {return Generator.call(Generator.prototype)}
    则可通过 var f = new F() 来生成实例
  • yield[*] 暂停标志,遍历器每执行一次next则执行当前yield。
    yield表达式本身没有返回值,或者说总是返回undefined。
    next方法可以带一个参数,该参数就会被当作上一个yield表达式的返回值,作为当下一个yield依赖上一个yield时使用。
    yield表达式后面执行一个函数,函数的返回值,相当于生成器运行了该步骤并返回给遍历器对象value的值。 Generator 函数也可以不用yield表达式,这时就变成了一个单纯的暂缓执行函数。
    在Generator函数内部,调用另一个 Generator 函数,需要使用yield* Generator()
    会一次执行完被代理对象的全部步骤
  • return 结束标志

[-]Async Function

  • async function {promise} async函数返回一个 Promise 对象,可以使用then方法添加回调函数。当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。
  • await promise await表示紧跟在后面的表达式需要等待结果
    async函数的await命令后面,可以是 Promise 对象和原始类型的值(数值、字符串和布尔值,但这时等同于同步操作)
  • return async函数内部return语句返回的值,会成为then方法回调函数的参数

[-]Async Iterator

  • o.[Symbol.asyncIterator] asyncIterator是一个异步遍历器
  • aite.next() {promise} 调用next方法以后,返回一个 Promise 对象。
    因此,可以使用then方法指定,这个 Promise 对象的状态变为resolve以后的回调函数。
    回调函数的参数,则是一个具有value和done两个属性的对象,这个跟同步遍历器是一样的。

[-]Async Generator

  • async function* {aite} 返回一个异步遍历器对象
  • yield* yield*语句也可以跟一个异步遍历器

对象-

[+]构建

  • {key:val,[$key]:val...} 字面量创建方法
    对象有时也被叫作关联数组。对象的属性之间用逗号分隔,最后一个属性后面可以加逗号,也可以不加。
    对象的所有键名都是字符串,可以不加引号。但如果不符合表示名的条件,则需要加引号。参考资料
    如果不同的变量名指向同一个对象,那么它们都是这个对象的引用,也就是说指向同一个内存地址。修改其中一个变量,会影响到其他所有变量。
    但如果取消某一个变量对于原对象的引用,不会影响到另一个变量。
    这种引用只局限于对象,对于原始类型的数据则是传值引用,也就是说,都是值的拷贝。
    故在设置一个新的对象继承旧对象时,不能直接通过new.prototype = old.prototype进行设置,否则对new原型的任何修改,将直接会影响旧的原型对象。
    如果行首是大括号,一律解释为语句(即代码块)。如果要解释为表达式(即对象),必须在大括号前加上圆括号。
    如果读取一个不存在的键,会返回undefined,而不是报错。
    但不能对一个未声明的对象直接指定属性,这样会报错
  • new Fn() 用构造函数创建
    
    							function Obj(opts){
    								this.key = value
    							}
    							var o = new Obj(opts)
    						
    new命令总是返回一个对象,要么是实例对象,要么是return语句指定的对象。
    new 构造函数时,this指向新创建的对象,并默认返回this,也就是说,不需要在最后写return this
    函数内部可以使用new.target属性。如果当前函数是new命令调用,new.target指向当前函数,否则为undefined
  • new Object() var obj = new Object();
    var obj = Object.creat(Object.prototype)
    obj.key = value;
    从Object原型创建

[+]属性表示

  • obj.key 一个对象的属性可以被解释成一个附加到对象上的变量,使用.表示法时必须是一个合法的标识符 参考资料
  • obj['key'] 对象的属性也可以通过方括号访问或者设置,对象有时也被叫作关联数组, 因为每个属性都有一个用于访问它的字符串值。
    一个对象的属性名可以是任何有效的 JavaScript 字符串,或者可以被转换为字符串的任何类型,包括空字符串。
    当属性含空格、关键字时,只能用中括号表示
  • obj[$key] 当属性为变量时,只能用中括号表示

[-]属性设置

  • {key:val} 定义一个属性,值可以为任意类型
    对于一个已经存在的对象,可用obj.key = val 来进行设置
  • {get|set key([x]){}} 使用对象初始化器定义getter/setter方法
    getter方法必须是无参数的,setter方法只接受一个参数
    对于已经存在的对象,则需使用Object.defineProperties
  • Object.defineProperty(obj,key,desc) 在一个对象上定义一个新属性或者修改现有属性, 并返回这个对象。参考资料
  • Object.defineProperties(obj,{key:{desc}}) 在一个对象上定义新的属性或修改现有属性, 并返回这个对象。 参考资料
  • delete obj.key delete 操作符删除一个不是继承而来的属性
    删除成功后返回true,注意,删除一个不存在的属性,delete不报错,而且返回true。
    只有一种情况,delete命令会返回false,那就是该属性存在,且不得删除。

[+]属性描述对象

  • Object.getOwnPropertyDescriptor(obj,key) 返回指定对象上一个自有属性对应的属性描述符。 参考资料
    注意,Object.getOwnPropertyDescriptor方法只能用于对象自身的属性,不能用于继承的属性
  • Object.getOwnPropertyDescriptors(obj) 获取一个对象的所有自身属性的描述符 参考资料
  • configurable false|true
    表示该属性的描述对象是否可以修改(属性是否可被删除)。
    数据描述符和存取描述符均具有此键值
  • enumerable false|true
    表示该属性是否可枚举
    数据描述符和存取描述符均具有此键值
  • value undefined|val
    该属性对应的值
    数据描述符具有此键值
  • writable false|true
    表示属性值是否可改变
    数据描述符具有此键值
  • get undefined|fn
    存放一个函数,表示该属性的取值函数(getter)
    存取描述符具有此键值
  • set undefined|fn
    存放一个函数,表示该属性的存值函数(setter)
    存取描述符具有此键值

[-]属性判断

[-]属性枚举

  • for $key in obj 依次访问一个 [对象及其原型链] 中所有 [可枚举的属性]
  • Object.keys(obj) 返回 [对象] 自身(不包括原型中)的所有 [可枚举的属性] 的数组
  • Object.getOwnPropertyNames(obj) 返回 [对象] 自身(不包括继承的)的所有 [属性] 的数组
  • Object.getOwnPropertySymbols(obj) 返回一个数组,成员是当前对象的所有用作属性名的 Symbol 值。
  • Reflect.ownKeys(obj) 返回一个数组,包含对象自身的所有键名,不管键名是 Symbol 或字符串,也不管是否可枚举。
    参考资料
    首先遍历所有数值键,按照数值升序排列。
    其次遍历所有字符串键,按照加入时间升序排列。
    最后遍历所有 Symbol 键,按照加入时间升序排列。

[+]状态控制

  • Object.preventExtensions(obj) 防止对象扩展
  • Object.isExtensible(obj) 判断对象是否可扩展
  • Object.seal(obj) 禁止对象配置,既无法添加新属性,也无法删除旧属性,但并不影响修改某个属性的值
  • Object.isSealed(obj) 判断一个对象是否可配置
  • Object.freeze(obj) 冻结一个对象,无法添加新属性、无法删除旧属性、也无法改变属性的值
    冻结指的是不能向这个对象添加新的属性,不能修改其已有属性的值,不能删除已有属性,以及不能修改该对象已有属性的可枚举性、可配置性、可写性。也就是说,这个对象永远是不可变的。
  • Object.isFrozen(obj) 判断一个对象是否被冻结

[+]其它

  • Object.values(obj) 返回一个对象的值的数组
  • Object.entries(obj) 返回一个对象的键值的二维数组
  • Object.assign(to,from...) 将所有可枚举属性的值从一个或多个源对象复制到目标对象,将返回目标对象。
    1.浅拷贝,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用
    2.只会拷贝源对象自身的并且可枚举的属性到目标对象
    Object.assign 不会跳过那些值为 null 或 undefined 的源对象
    参考资料
  • Object.is(x,y) 判断两个值是否全等(必须引用地址也一致)
  • obj.toString() 可通过自定义toString方法替换原型的返回值。
    Object.prototype.toString.call(value) 可判断其构造函数:
    value 返回值
    数值 [object Number]
    字符串 [object String]
    布尔值 [object Boolean]
    undefined [object Undefined]
    null [object Null]
    数组 [object Array]
    arguments对象 [object Arguments]
    函数 [object Function]
    Error对象 [object Error]
    Date对象 [object Date]
    RegExp对象 [object RegExp]
    其他对象 [object Object]
  • obj.valueOf() 返回指定对象的原始值
    参考资料

面向对象-

[-]类与继承

  • class name 1.类的内部所有定义的方法,都是不可枚举的。
    2.类和模块的内部,默认就是严格模式,所以不需要使用use strict指定运行模式。
    3.类不存在变量提升
    4.类不能继承常规(非可构造)对象,如要继承常规对象,则改用Object.setPrototypeOf()
  • class $child extends $parent 1.如果子类中存在构造函数,则需要在使用“this”之前首先调用 super()。
    2.在子类的构造函数中,只有调用super之后,才可以使用this关键字
  • class.constructor([opt]){} 1.constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法
    2.一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。
  • class.super(key)|.fn 1.super作为函数调用时,代表父类的构造函数。
    2.super作为对象时,在普通方法中,指向父类的原型对象;在静态方法中,指向父类。
    环境 this super
    构造函数 实例对象 父类构造函数
    普通方法 实例对象 父类原型对象
    静态方法 父类
  • class.fn(){} 原型方法
  • class.static fn(){} 1.静态方法不会被实例继承,而是直接通过类来调用
    2.静态方法会被子类继承
    3.如果静态方法包含this关键字,这个this指的是类,而不是实例。参考资料
  • class.get|set prop(){} getter/setter

[+]类修饰器

  • @decorator(cls) 修饰器是一个对类进行处理的函数
  • @decorator(cls,prop,desc) 修饰器不仅可以修饰类,还可以修饰类的属性

[+]原型链

  • cst.prototype 返回值:构造函数创建的实例的原型(prototype是函数才会有的属性)
    为减少内存消耗,将公共方法写在构造函数的原型上,参考资料
    在改变原型对象时,一般要同时设置constructor属性
  • pro.constructor 原型对象的这个属性指向构造函数

    参考资料
  • obj.__proto__ 返回值:Object / 构造函数原型对象(仅浏览器环境)
    在编写JavaScript代码时,不要直接用obj.__proto__去改变一个对象的原型,并且,低版本的IE也无法使用__proto__。

[+]原型方法

  • Object.create(obj) 基于一个对象创建新对象,源对象会成为新对象的原型对象,原型对象属性并不能在自身默认可见 参考资料
    不能直接将b的原型赋值给a,否则当b的原型修改时,a的原型也会被更改
    Child.prototype = Object.create(Parent.prototype)
    Child.prototype.constructor = Child
  • pro.isPrototypeOf(obj) 判断当前对象是否为另一个对象的原型
    Object.prototype处于原型链的最顶端,所以对各种实例都返回true,只有继承null的对象除外。
  • Object.getPrototypeOf(obj) 获取对象的原型对象
  • Object.setPrototypeOf(obj,proto) 为现有对象设置原型,返回新对象。

元编程-

[+]Symbol

  • Symbol([des]) 它是一种类似于字符串的数据类型,但独一无二。
    1.Symbol函数前不能使用new命令,否则会报错
    2.Symbol 是一个原始类型的值,不是对象。也就是说,由于 Symbol 值不是对象,所以不能添加属性。
    3.Symbol函数可以接受一个字符串作为参数,表示对 Symbol 实例的描述,主要是为了在控制台显示,或者转为字符串时,比较容易区分。
    4.Symbol 值不能与其他类型的值进行运算
    5.Symbol 值可以通过toString或String方法显式转为字符串
    6.Symbol 值也可以转为布尔值,但是不能转为数值
    7.不能使用.运算符,必须使用[]
    8.Symbol 作为属性名,该属性不会出现在for...in、for...of循环中,也不会被Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回。但是,它也不是私有属性,有一个Object.getOwnPropertySymbols方法,可以获取指定对象的所有 Symbol 属性名。
  • Symbol.for(desc) 接受一个字符串作为参数,然后搜索有没有以该参数作为名称的 Symbol 值。如果有,就返回这个 Symbol 值,否则就新建并返回一个以该字符串为名称的 Symbol 值。
  • Symbol.keyfor(symbol) 返回一个已登记的 Symbol 类型值的key

[-]Proxy

  • new Proxy(target,handler) var proxy = new Proxy(target,{handler})
    在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。
    参考资料
    通过改写return值,可实现链式操作
    当被代理的对象为不同的类型时:
    对象:target=源对象,key=源对象的属性;
    数组:target=源数组,key=源数组的索引;
    函数:target=执行源函数,target[key]=函数源;
  • Proxy.revocable(target,handler) 返回一个可取消的Proxy实例
    let {proxy, revoke} = Proxy.revocable(target, handler);
    目标对象内部的this关键字会指向 Proxy 代理
    Proxy.revocable方法返回一个对象,该对象的proxy属性是Proxy实例,revoke属性是一个函数,可以取消Proxy实例 参考资料
  • handler.get(target,key,receiver) 拦截对象属性的读取
  • handler.set(target,key,val,receiver) 拦截对象属性的设置
  • handler.has(target,key) 拦截propKey in proxy的操作,返回一个布尔值。
  • handler.deleteProperty(target,key) 拦截delete proxy[propKey]的操作,返回一个布尔值。
  • handler.construct(target, args) 拦截 Proxy 实例作为构造函数调用的操作,比如new proxy(...args)。
  • handler.apply(target,object,args) 拦截 Proxy 实例作为函数调用的操作,比如proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。
  • handler.ownKeys(target) 拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy),返回一个数组。该方法返回目标对象所有自身的属性的属性名。
  • handler.getOwnPropertyDescriptor(target,key) 拦截Object.getOwnPropertyDescriptor(proxy, propKey),返回属性的描述对象。
  • handler.defineProperty(target,key,desc) 拦截Object.defineProperty(proxy, propKey, propDesc)、Object.defineProperties(proxy, propDescs),返回一个布尔值。
  • handler.preventExtensions(target) 拦截Object.preventExtensions(proxy),返回一个布尔值。
  • handler.isExtensible(target) 拦截Object.isExtensible(proxy),返回一个布尔值。
  • handler.getPrototypeOf(target) 拦截Object.getPrototypeOf(proxy),返回一个对象。
  • handler.setPrototypeOf(target,proto) 拦截Object.setPrototypeOf(proxy, proto),返回一个布尔值。如果目标对象是函数,那么还有两种额外操作可以拦截。

[+]Reflect

  • Reflect 1.将Object对象的一些明显属于语言内部的方法(比如Object.defineProperty),放到Reflect对象上。
    2.修改某些Object方法的返回结果,让其变得更合理。
    3.让Object操作都变成函数行为。
    参考资料
  • Reflect.get(target,key,[receiver]) 查找并返回target对象的name属性,如果没有该属性,则返回undefined。
  • Reflect.set(target,key,value,[receiver]) 设置target对象的name属性等于value
  • Reflect.has(target,key) 对应key in obj里面的in运算符
  • Reflect.deleteProperty(target,key) 等同于delete obj[name],用于删除对象的属性
  • Reflect.construct(target,args) 等同于new target(...args),这提供了一种不使用new,来调用构造函数的方法。
  • Reflect.apply(fn,thisArg,args) 等同于Function.prototype.apply.call(func, thisArg, args),用于绑定this对象后执行给定函数。
  • Reflect.ownKeys(target) 返回对象的所有属性,基本等同于Object.getOwnPropertyNames与Object.getOwnPropertySymbols之和。
  • Reflect.getOwnPropertyDescriptor(target,key) 基本等同于Object.getOwnPropertyDescriptor,用于得到指定属性的描述对象
  • Reflect.defineProperty(target,key,desc) 基本等同于Object.defineProperty,用来为对象定义属性。
  • Reflect.preventExtensions(target) 对应Object.preventExtensions方法,用于让一个对象变为不可扩展。它返回一个布尔值,表示是否操作成功。
  • Reflect.isExtensible(target) 对应Object.isExtensible,返回一个布尔值,表示当前对象是否可扩展。
  • Reflect.getPrototypeOf(obj) 用于读取对象的__proto__属性,对应Object.getPrototypeOf(obj)。
  • Reflect.setPrototypeOf(obj,proto) 用于设置对象的__proto__属性,返回第一个参数对象,对应Object.setPrototypeOf(obj, newProto)。

其它-

[-]全局函数

  • eval(str) 将传入的字符串当做 JavaScript 代码进行执行。
    1.eval没有自己的作用域,都在当前作用域内执行。
    2.JavaScript规定,如果使用严格模式,eval内部声明的变量,不会影响到外部作用域。
    3.在严格模式下,eval依然可以读写当前作用域的变量。
    4.eval“间接调用”时作用域总是全局作用域 参考资料

[+]其它

  • Error new Error('msg')
    错误对象属性:
    属性 描述
    err.message 错误提示信息
    err.name 错误名称(非标准属性)
    err.stack 错误的堆栈(非标准属性)

    原生错误类型:
    名称 描述
    SyntaxError 解析代码时发生的语法错误
    ReferenceError 引用一个不存在的变量时发生的错误;将一个值分配给无法分配的对象
    RangeError 当一个值超出有效范围时发生的错误
    TypeError 变量或参数不是预期类型时发生的错误
    URIError URI相关函数的参数不正确时抛出的错误
    EvalError eval函数没有被正确执行
    自定义错误 参考资料


    如果在一个函数内部发生了错误,它自身没有捕获,错误就会被抛到外层调用函数,如果外层函数也没有捕获,该错误会一直沿着函数调用链向上抛出,直到被JavaScript引擎捕获,代码终止执行。所以,我们不必在每一个函数内部捕获错误,只需要在合适的地方来个统一捕获,一网打尽。
    涉及到异步代码,无法在调用时捕获,原因就是在捕获的当时,回调函数并未执行。
    类似的,当我们处理一个事件时,在绑定事件的代码处,无法捕获事件处理函数的错误。
  • WebAssembly

数据类型+

[+]数据类型

  • Boolean 布尔:原始类型
  • Number 数值:原始类型
    根据 ECMAScript 标准,JavaScript 中只有一种数字类型:基于 IEEE 754 标准的双精度 64 位二进制格式的值(-(263 -1) 到 263 -1)
    数字类型只有一个整数: 0
  • String 字符串:原始类型
    JavaScript 字符串是不可更改的
  • Symbol 符号:原始类型
    符号类型是唯一的并且是不可修改的,可以用来作为Object的key的值
  • Undefined 未定义:原始类型
    一个没有被赋值的变量会有个默认值 undefined
  • Null 空:原始类型
    Null 类型只有一个值: null
    内存优化
  • Object 对象:引用类型(包括数组、函数、标准对象等)

[+]类型检测

  • typeof val 返回的是字符串。
    可通过Object.prototype.toString.call(o)测试
    类型 结果
    true/false boolean
    数值/NaN boolean
    Symbol symbol
    字符串/JSON string
    fn function
    obj/数组/null object
    undefined/不存在的属性或方法 undefined


    1.判断null请使用myVar === null
    2.不存在的变量与未声明的变量typeof检测均为undefined,但两者其实不同,故建议总是初始化。
    3.Null 类型是一个只有一个值的数据类型,即特殊的值 null。它表示一个空对象引用(指针),而 typeof 操作符检测 null 会返回 object。如果定义的变量准备在将来用于保存对象,那么最好将该变量初始化为 null。这样,当检查 null 值就知道是否已经变量是否已经分配了对象引用了。
    4.undefined 是派生自 null 的,因此 ECMA-262 规定对它们的相等性测试返回 true。alert(undefined == null);但typeof数据类型不等。
  • obj instanceof cst instanceof运算符返回一个布尔值,表示某个对象是否为指定的构造函数的实例。
    测试目标 测试结果
    数组 arr instanceof Array
    函数/构造函数 fn instanceof Function
    构造函数实例 child instanceof parent
    泛对象 obj instanceof Object
    日期 value instanceof Date
    正则表达式 value instanceof RegExp
    数学 value instanceof Math

[+]类型转换

  • Boolean(val) 省略该参数
    其值为 0、-0、null、false、NaN、undefined、或者空字符串("")
    参数是DOM对象document.all
    以上均生成值为false的Boolean对象
  • Number(val)
    value 返回值
    number/包含单个数值的数组 number
    boolean 1 / 0
    null/空字符串/空数组 0
    undefined/string/object NaN
  • String(val)
    value 返回值
    数值 转为相应的字符串
    字符串 转换后还是原来的值
    布尔值 true转为"true",false转为"false"
    undefined 转为"undefined"
    null 转为"null"
    数组 返回该数组的字符串形式 "1,2,3"
    对象 返回一个类型字符串 "[object Object]"
    可通过toString方法来设置修改

语法-

[+]变量

  • var x1 = 1;
    var x2 = 2;
    window.x3 = 3;
    3种全局变量的异同
    1.变量会提升,在没有声明前调用,会输出undefined
    2.假设声明a、b、c,且c=a+b,且均为非引用类型,当ab发生变化时,c不会改变,应设为c=fn(return a+b)
  • let let i = 1;
    1.申明一个块级作用域的变量
    2.不能使用let重复定义一个变量
    3.只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响,暂时性死区。
  • const const PI = 3.14
    1.const来定义常量,在声明时就必须赋值。
    2.const与let都具有块级作用域。
    2.一旦声明,常量的指针就不能改变。

[+]表达式与运算符

  • 运算符
  • void void运算符对给定的表达式进行求值,然后返回 undefined
    在使用立即执行的函数表达式时,可以利用 void 运算符让 JavaScript 引擎把一个function关键字识别成函数表达式而不是函数声明(语句)

[+]流程控制与错误处理

  • if..else.. if..
    if..else..
    if..else if..else..
  • switch switch(expression){
    case ex:
    ..
    break;
    default:
    ..
    }
    1.switch中的case为全等判断
    2.多个case使用同一个执行块应写为case 1: case2: ...
    3.每个case代码块内部的break不能少,否则会接着执行下一个case
  • try..catch try{..}
    catch(e){..}
    finally{..}
  • throw 抛出一个异常
  • debugger 调用任何可用的调试功能,例如设置断点。

[+]循环与迭代

  • for 设置循环变量的部分和循环体内部有各自单独的作用域,变量彼此不影响(使用let时)。
  • for..in 循环一个对象所有可枚举的属性
  • for..of 在可迭代的对象上创建了一个循环
    包括Array, Map, Set, 参数对象( arguments) 等等
  • do..while(exp) 一直重复直到指定的条件求值得到假
  • while(exp).. 一个 while 语句只要指定的条件求值为真(true)就会一直执行它的语句块
  • label: 使用 break 或者 continue 来指出程序是否该停止循环还是继续循环
  • break [label] 跳出(内部/指定)循环
  • continue [label] 跳至(内部/指定)循环
    不带参数的break和continue语句都只针对最内层的循环,如continue语句后面不使用标签,则进入下一轮的内层循环
    带参数的break和continue语句,满足条件时,会跳过当前循环,直接进入下一轮外层循环

[+]模块引入与导出

global-

[-] global变量

  • global 全局对象
  • module 对当前模块的引用
    全局变量在所有模块中均可使用,但以下变量的作用域只在模块内
  • __filename 当前正在执行的脚本的文件名,它将输出文件所在位置的绝对路径
    如果在模块中,返回的值是模块文件的路径。
  • __dirname 表示当前执行脚本所在的目录
  • exports 这是一个对于 module.exports 的更简短的引用形式
    如果一个新的值被赋值给 exports,它就不再绑定到 module.exports
    但如果是对exports.prop进行赋值,则依然当做module.exports.prop输出
    当 module.exports 属性被一个新的对象完全替代时,也会重新赋值 exports
  • require(mod) 引入模块
    缓存 > 原生模块 > 文件模块 > node_modules > 全局目录

[+] module对象

  • module.exports 模块对外输出
    单个函数输出,需要 module.exports = fn(){}
    作为对象输出,可以exports.prop = fn(){}
    或者 module.exports = $obj
  • module.children 被该模块引用的模块对象,返回数组
    不会包括内置对象
  • module.parent 最先引用该模块的模块
  • module.id 模块的标识符。 通常是完全解析后的文件名
    被引入的模块,同__filename
  • module.filename 模块的完全解析后的文件名
  • module.loaded 模块是否已经加载完成,或正在加载中
  • module.paths 模块的搜索路径,返回数组
  • require.cache 被引入的模块将被缓存在这个对象中。从此对象中删除键值对将会导致下一次 require 重新加载被删除的模块。
  • require.main 当 Node.js 直接运行一个文件时,require.main 会被设为它的 module。 这意味着可以通过 require.main === module 来判断一个文件是否被直接运行
    通过检查 require.main.filename 来获取当前应用程序的入口点

[-] timers

  • setImmediate(fn,[arg]) 预定立即执行的 callback,它是在 I/O 事件的回调之后被触发。
    当多次调用 setImmediate() 时,callback 函数会按照它们被创建的顺序依次执行。 每次事件循环迭代都会处理整个回调队列。 如果一个立即定时器是被一个正在执行的回调排入队列的,则该定时器直到下一次事件循环迭代才会被触发。
  • clearImmediate(immediate) 取消一个由 setImmediate() 创建的 Immediate 对象。
  • setInterval(fn,delay,[arg]) 预定每隔 delay 毫秒重复执行的 callback。
  • clearInterval(timeout) 取消一个由 setInterval() 创建的 Timeout 对象。
  • setTimeout(fn,delay,[arg]) 预定在 delay 毫秒之后执行的单次 callback。
  • clearTimeout(timeout) 取消一个由 setTimeout() 创建的 Timeout 对象。
  • timeout.ref() 调用时,只要 Timeout 处于活动状态就要求 Node.js 事件循环不要退出。
    返回 Timeout 的一个引用。
  • timeout.unref() 当调用时,活动的 Timeout 对象不要求 Node.js 事件循环保持活动。
    返回对 Timeout 的一个引用。

[+] console

  • new Console(stdout,[stderr]) 通过传入一个或两个可写流实例,创建一个新的 Console 对象。 stdout 是一个可写流,用于打印日志或输出信息。 stderr 用于输出警告或错误。 如果没有传入 stderr ,则警告或错误输出会被发送到 stdout 。
  • console.log/info([data,..]) 打印到 stdout,并带上换行符。
  • console.error/warn([data,..]) 打印到 stderr,并带上换行符。
  • console.dir(obj,[opt]) 在 obj 上使用 util.inspect() 并打印结果字符串到 stdout。
    showHidden - 如果为 true,则该对象中的不可枚举属性和 symbol 属性也会显示。默认为 false。
    depth - 告诉 util.inspect() 函数当格式化对象时要递归多少次。 这对于检查较大的复杂对象很有用。 默认为 2。 设为 null 可无限递归。
    colors - 如果为 true,则输出会带有 ANSI 颜色代码。 默认为 false。 颜色是可定制的,详见定制 util.inspect() 颜色。
  • console.time(label) 启动一个定时器,用以计算一个操作的持续时间。 定时器由一个唯一的 label 标识。 当调用 console.timeEnd() 时,可以使用相同的 label 来停止定时器,并以毫秒为单位将持续时间输出到 stdout。 定时器持续时间精确到亚毫秒。
  • console.timeEnd(label) 停止之前通过调用 console.time() 启动的定时器,并打印结果到 stdout
  • console.count([label]) 维护一个指定 label 的内部计数器并且输出到 stdout 指定 label 调用 console.count() 的次数。label计数器的显示标签,默认为 'default'。
  • console.countRest([label]) 重置指定 label 的内部计数器。
  • console.group([label]) 将后续行的缩进增加两个空格。
  • console.groupEnd() 将后续行的缩进减少两个空格。
  • console.clear() 当 stdout 是一个 TTY 时,调用 console.clear() 将尝试清除 TTY。 当 stdout 不是一个TTY时,该方法什么都不做。
  • console.assert(val,[msg,..]) 一个简单的断言测试,验证 value 是否为真。 如果不为真,则抛出 AssertionError。
  • console.trace([msg,..]) 打印字符串 'Trace :' 到 stderr ,并通过 util.format() 格式化消息与堆栈跟踪在代码中的当前位置。

events-

[+] EventEmitter类

[-] 添加/移除/触发监听器

  • eet.on(evt,listener) 绑定事件及事件处理程序
    也可以写作eet.addListener(evt,fn)
    一个事件可以有多个监听器,但参数应是一致的,否则应作为多个事件处理
    返回值:返回一个 EventEmitter 引用,可以链式调用。
  • eet.prependListener(evt,listener) 添加 listener 函数到名为 eventName 的事件的监听器数组的开头。
    不会检查 listener 是否已被添加。 多次调用并传入相同的 eventName 和 listener 会导致 listener 被添加与调用多次。
    返回值:返回一个 EventEmitter 引用,可以链式调用。
  • eet.once(evt,listener) 为指定事件注册一个单次监听器,即监听器最多只会触发一次,触发后立刻解除该监听器。
    返回值:返回一个 EventEmitter 引用,可以链式调用。
  • eet.prependOnceListener(evt,listener) 添加一个单次 listener 函数到名为 eventName 的事件的监听器数组的开头。
    下次触发 eventName 事件时,监听器会被移除,然后调用。
    返回值:返回一个 EventEmitter 引用,可以链式调用。
  • eet.removeListener(evt,listener) 移除指定事件的某个监听器,监听器必须是该事件已经注册过的监听器。
    removeListener 最多只会从监听器数组里移除一个监听器实例。 如果任何单一的监听器被多次添加到指定 eventName 的监听器数组中,则必须多次调用 removeListener 才能移除每个实例。
    返回值:返回一个 EventEmitter 引用,可以链式调用。
  • eet.removeAllListeners([evt]) 移除全部或指定 eventName 的监听器。
    返回值:返回一个 EventEmitter 引用,可以链式调用。
  • eet.emit(evt,[arg]) 触发事件
    arg为监听器回调函数传入的参数,同一个事件下的监听器应使用同样的参数
    返回值:布尔值,如果事件有监听器,则返回 true ,否则返回 false。

[+] 内置事件

  • [evt]newListener EventEmitter 实例会在一个监听器被添加到其内部监听器数组之前触发自身的 'newListener' 事件。
  • [evt]removeListener 'removeListener' 事件在 listener 被移除后触发。
  • [evt]error 我们一般要为会触发 error 事件的对象设置监听器,避免遇到错误后整个程序崩溃。

[+] 其它属性/方法

  • eet.eventNames() 列出触发器上所有绑定的事件,返回一个数组。
  • eet.getMaxListeners() 返回 EventEmitter 当前的最大监听器限制值,默认10
  • eet.setMaxListeners(n) 值设为 Infinity(或 0)表明不限制监听器的数量。
    返回值:返回一个 EventEmitter 引用,可以链式调用。
  • eet.listenerCount(evt) 返回指定事件的监听器的数量
  • eet.listeners(evt) 返回指定事件的监听器数组的副本

path-

[-] 路径信息

  • path.dirname(path) 返回路径中代表文件夹的部分,同 Unix 的dirname 命令类似。
    不要以\\结尾,总是返回上一级目录
  • path.basename(path,[ext]) 返回路径中的最后一部分。同 Unix 命令 bashname 类似。
    ext:可选的文件扩展名,使用了时,返回的数据不带扩展名
  • path.extname(path) 返回路径中文件的后缀名,即路径中最后一个'.'之后的部分。
    如果一个路径中并不包含'.'或该路径只包含一个'.' 且这个'.'为路径的第一个字符,则此命令返回空字符串。
  • path.parse(path) 返回路径字符串的对象
    root:根目录,dir:目录,base:文件名,name:文件名称,ext:扩展名
  • path.format(obj) 从对象中返回路径字符串,和 path.parse 相反。

[-] 路径操作

  • path.relative(from,to) 返回从 from 到 to 的相对路径(基于当前工作目录)
  • path.resolve([...paths]) 会返回当前工作目录的绝对路径
  • path.isAbsolute(path) 判断参数 path 是否是绝对路径
  • path.join([...paths]) 用于连接路径。
    该方法的主要用途在于,会正确使用当前系统的路径分隔符,Unix系统是"/",Windows系统是"\"。
    当出现..自动跳至上一级目录
  • path.normalize(path) 规范化路径

[+] 平台特性

  • path.sep 平台的文件路径分隔符,'\\' 或 '/'
  • path.delimiter 平台特定的路径分隔符
    windows为; posix为:
  • path.posix 提供了 path 方法针对 POSIX 的实现
  • path.win32 提供上述 path 的方法,不过总是以 win32 兼容的方式交互

process-

[+] 事件

  • [evt]exit(exitCode) 显式调用process.exit()方法,使得Node.js进程即将结束;
    Node.js事件循环数组中不再有额外的工作,使得Node.js进程即将结束
    'exit'事件监听器的回调函数,只有一个入参,这个参数的值可以是process.exitCode的属性值,或者是调用process.exit()方法时传入的exitCode值。
    'exit'事件监听器的回调函数,只允许包含同步操作。所有监听器的回调函数被调用后,任何在事件循环数组中排队的工作都会被强制丢弃,然后Nodje.js进程会立即结束。 例如回调中的timeout操作永远不会被执行(因为不是同步操作)。
    退出状态码参考资料
  • [evt]beforeExit(exitCode) 当Node.js的事件循环数组已经为空,并且没有额外的工作被添加进来,事件'beforeExit'会被触发。
    process.exitCode 作为唯一的参数值传递给'beforeExit'事件监听器的回调函数。
    正常情况下,如果没有额外的工作被添加到事件循环数组,Node.js进程会结束。但是如果'beforeExit'事件绑定的监听器的回调函数中,含有一个可以进行异步调用的操作,那么Node.js进程会继续运行。
    如果进程由于显式的原因而将要终止,例如直接调用process.exit()或抛出未捕获的异常,'beforeExit'事件不会被触发。
  • [evt]uncaughtException(err) 如果Javascript未捕获的异常,沿着代码调用路径反向传递回event loop,会触发'uncaughtException'事件。 Node.js默认情况下会将这些异常堆栈打印到stderr 然后进程退出。 为'uncaughtException'事件增加监听器会覆盖上述默认行为。
  • [evt]Signal Events 当进程接收到信号时就触发。信号列表详见标准的 POSIX 信号名,如 SIGINT、SIGUSR1 等。
    参考资料
  • [evt]disconnect 如果Node.js进程是由IPC channel的方式创建的,当IPC channel关闭时,会触发'disconnect'事件。
  • [evt]message(msg,sendHanle) 如果Node.js进程是由IPC channel的方式创建的,当子进程收到父进程的的消息时(消息通过childprocess.send()发送), 会触发'message'事件。
    'message'事件监听器的回调函数中被传递的参数如下:
    message - 解析的JSON对象,或primitive值。
    sendHandle - 一个net.Socket 或 net.Server对象,或undefined。
  • [evt]rejectionHandled 如果有Promise被rejected,并且此Promise在Nodje.js事件循环的下次轮询及之后期间,被绑定了一个错误处理器[例如使用promise.catch()][]), 会触发'rejectionHandled'事件。
    参考资料
  • [evt]unhandledRejection 参考资料

[-] 基本属性

  • process.stdout 标准输出流
  • process.stderr 标准错误流
  • process.stdin 标准输入流
  • process.exitCode 进程退出时的代码,如果进程优通过 process.exit() 退出,不需要指定退出码。

[-] 常用方法

  • process.cwd() 返回当前进程的工作目录
  • process.chdir(dir) 改变当前工作进程的目录,如果操作失败抛出异常。
  • process.nextTick(callback,[args]) 一旦当前事件循环结束,调用回到函数
  • process.abort() 这将导致 node 触发 abort 事件。会让 node 退出并生成一个核心文件。
  • process.exit([code]) 使用指定的 code 结束进程。如果忽略,将会使用 code 0。
  • process.kill(pid,[signal]) 发送信号给进程. pid 是进程id,并且 signal 是发送的信号的字符串描述。信号名是字符串,比如 'SIGINT' 或 'SIGHUP'。如果忽略,信号会是 'SIGTERM'。

[-] 进程环境

  • process.argv argv 属性返回一个数组,由命令行执行脚本时的各个参数组成。
    它的第一个成员总是node,第二个成员是脚本文件名,其余成员是脚本文件的参数。
  • process.argv0 v6.4+
    保存Node.js启动时传入的argv[0]参数值的一份只读副本
  • process.execPath 返回执行当前脚本的 Node 二进制文件的绝对路径
  • process.execArgv 返回一个数组,成员是命令行下执行脚本时,在Node可执行文件与脚本文件之间的命令行参数。
  • process.env 返回一个对象,成员为当前 shell 的环境变量
  • process.version Node 的版本
  • process.versions 一个属性,包含了 node 的版本和依赖.
  • process.config 一个包含用来编译当前 node 执行文件的 javascript 配置选项的对象。它与运行 ./configure 脚本生成的 "config.gypi" 文件相同。
  • process.pid 当前进程的进程号
  • process.title 进程名
  • process.arch 当前 CPU 的架构:'arm'、'ia32' 或者 'x64'。
  • process.platform 运行程序所在的平台系统 'darwin', 'freebsd', 'linux', 'sunos' 或 'win32'
  • process.mainModule require.main 的备选方法。不同点,如果主模块在运行时改变,require.main可能会继续返回老的模块。可以认为,这两者引用了同一个模块。

[+] 关联控制

  • process.umask([mask]) 设置或读取进程文件的掩码。子进程从父进程继承掩码。如果mask 参数有效,返回旧的掩码。否则,返回当前掩码。
  • process.channel 如果Node.js进程是由IPC channel方式创建的,process.channel属性保存IPC channel的引用。 如果IPC channel不存在,此属性值为`undefined。
  • process.connected 如果Node.js进程是由IPC channel方式创建的, 只要IPC channel保持连接,process.connected属性就会返回true。 process.disconnect()被调用后,此属性会返回false。
    process.connected如果为false,则不能通过IPC channel使用process.send()发送信息。
  • process.disconnect() 关闭到父进程的IPC频道,以允许子进程一旦没有其他链接来保持活跃就优雅地关闭。
  • process.send(msg,{},fn) 给父进程发送消息

[+] 性能相关

  • process.memoryUsage() 返回一个对象,描述了 Node 进程所用的内存状况,单位为字节。
  • process.cpuUsage([previousValue]) v6.1+
    返回包含当前进程的用户CPU时间和系统CPU时间的对象
  • process.uptime() 返回 Node 已经运行的秒数
  • process.hrtime() 返回当前进程的高分辨时间,形式为 [seconds, nanoseconds]数组。它是相对于过去的任意事件。该值与日期无关,因此不受时钟漂移的影响。主要用途是可以通过精确的时间间隔,来衡量程序的性能。你可以将之前的结果传递给当前的 process.hrtime() ,会返回两者间的时间差,用来基准和测量时间间隔。

[+] POSIX权限

  • process.getgid() 获取进程的群组标识。获取到得时群组的数字 id,而不是名字。
    注意:这个函数仅在 POSIX 平台上可用(例如,非Windows 和 Android)。
  • process.setgid(id) 设置进程的群组标识.可以接收数字 ID 或者群组名。如果指定了群组名,会阻塞等待解析为数字 ID 。
    注意:这个函数仅在 POSIX 平台上可用(例如,非Windows 和 Android)。
  • process.getuid() 获取进程的用户标识。这是数字的用户 id,不是用户名。
    注意:这个函数仅在 POSIX 平台上可用(例如,非Windows 和 Android)。
  • process.setuid(id) 设置进程的用户标识。接收数字 ID或字符串名字。果指定了群组名,会阻塞等待解析为数字 ID 。
    注意:这个函数仅在 POSIX 平台上可用(例如,非Windows 和 Android)。
  • process.getgroups() 返回进程的群组 iD 数组。POSIX 系统没有保证一定有,但是 node.js 保证有。
    注意:这个函数仅在 POSIX 平台上可用(例如,非Windows 和 Android)。
  • process.setgroups(groups) 设置进程的群组 ID。这是授权操作,所有你需要有 root 权限,或者有 CAP_SETGID 能力。
    注意:这个函数仅在 POSIX 平台上可用(例如,非Windows 和 Android)。
  • process.initgroups(user,extra_group) 读取 /etc/group ,并初始化群组访问列表,使用成员所在的所有群组。这是授权操作,所有你需要有 root 权限,或者有 CAP_SETGID 能力。
    注意:这个函数仅在 POSIX 平台上可用(例如,非Windows 和 Android)。

child_process-

[-] 创建

  • ipc.spawn(cmd,[args],[opt]) 通过当前命令启动一个新的进程
    cmd - str,要运行的命令行
    args - arr,字符串参数列表
    opt - obj,设置 参考资料
  • ipc.fork(modulePath,[arg],[opt]) child_process.fork() 方法是 child_process.spawn() 的一个特殊情况,专门用于衍生新的 Node.js 进程。 跟 child_process.spawn() 一样返回一个 ChildProcess 对象。 返回的 ChildProcess 会有一个额外的内置的通信通道,它允许消息在父进程和子进程之间来回传递。 参考资料
  • ipc.exec(cmd,[opt],[fn]) 在shell中运行一个命令,并缓存其输出 参考资料
  • ipc.execFile(file,[arg],[opt],[fn]) 指定的可执行的 file 被直接衍生为一个新进程 参考资料

[+] 事件

  • [evt]close 当子进程的 stdio 流被关闭时会触发 'close' 事件。 这与 'exit' 事件不同,因为多个进程可能共享同一 stdio 流。
  • [evt]disconnect 在父进程中调用 subprocess.disconnect() 或在子进程中调用 process.disconnect() 后会触发 'disconnect' 事件。 断开后就不能再发送或接收信息,且 subprocess.connected 属性会被设为 false。
  • [evt]error 每当出现以下情况时触发 'error' 事件:
    1.进程无法被衍生;
    2.进程无法被杀死;
    3.向子进程发送信息失败。
    注意,在错误发生后,'exit' 事件可能会也可能不会触发。 当同时监听了 'exit' 和 'error' 事件,谨防处理函数被多次调用。
  • [evt]exit 子进程结束后会触发 'exit' 事件。 如果进程退出了,则 code 是进程的最终退出码,否则为 null。 如果进程是收到的信号而终止的,则 signal 是信号的字符串名称,否则为 null。 这两个总有一个是非空的。
    注意,当 'exit' 事件被触发时,子进程的 stdio 流可能依然是打开的。
  • [evt]message 当一个子进程使用 process.send() 发送消息时会触发 'message' 事件。

[+] 子进程

  • subp.channel 当前子进程的 IPC 通道的引用。如果当前没有 IPC 通道,则该属性为 undefined。
  • subp.connected 表明是否仍可以从一个子进程发送和接收消息。 当 subprocess.connected 为 false 时,则不能再发送或接收的消息。
  • subp.disconnect() 关闭父进程与子进程之间的 IPC 通道,一旦没有其他的连接使其保持活跃,则允许子进程正常退出。 调用该方法后,父进程和子进程上各自的 subprocess.connected 和 subprocess.connected 属性都会被设为 false,且进程之间不能再传递消息。
  • subp.kill([signal]) 向子进程发送一个信号。 如果没有给定参数,则进程会发送 'SIGTERM' 信号。
  • subp.killed 表明该子进程是否已成功接收到 subprocess.kill() 的信号。 该属性不代表子进程是否已被终止。
  • subp.pid 返回子进程的进程标识(PID)
  • subp.send(msg,[handle],[opt],[fn]) 发送消息到子进程
  • subp.stderr 一个代表子进程的 stderr 的可读流。
  • subp.stdin 一个代表子进程的 stdin 的可写流。
  • subp.stdio 一个到子进程的管道的稀疏数组
  • subp.stdout 一个代表子进程的 stdout 的可读流

os-

[-] 特征

  • os.hostname() 返回操作系统的主机名
  • os.release() 返回操作系统的发行版本
  • os.platform() 返回操作系统平台.
    可能的值'aix','darwin','freebsd','linux','openbsd','sunos','win32'
  • os.arch() 返回操作系统 CPU 架构
    可能的值'arm', 'arm64', 'ia32', 'mips', 'mipsel', 'ppc', 'ppc64', 's390', 's390x', 'x32', 'x64', 和 'x86'
  • os.type() 返回操作系统类型.
    系统 返回值
    linux 'Linux'
    macOS 'Darwin'
    Windows 'Windows_NT'

[+] 性能

  • os.uptime() 返回操作系统运行的时间,以秒为单位。
  • os.loadavg() 返回一个包含 1、5、15 分钟平均负载的数组。
    平均负载是系统活动的测量,由操作系统计算得出,表达为一个分数. 一般来说,平均负载应该理想地比系统的逻辑CPU的数目要少. 平均负载是UNIX相关的概念,在Windows平台上没有对应的概念. 在Windows上,其返回值总是[0, 0, 0].
  • os.totalmen() 返回系统内存总量,单位为字节。
  • os.freemem() 返回操作系统空闲内存量,单位是字节。
  • os.cpus() 返回一个对象数组,包含所安装的每个 CPU/内核的信息:型号、速度(单位 MHz)、时间(一个包含 user、nice、sys、idle 和 irq 所使用 CPU/内核毫秒数的对象)。 参考资料
  • os.networkInterfaces() 获得网络接口列表。 参考资料

[+] 数据

  • os.tmpdir() 返回操作系统的默认临时文件夹。
    C:\Users\iRuxu\AppData\Local\Temp
  • os.homedir() 返回当前用户的home目录
  • os.userInfo([opt]) os.userInfo()方法当前有效用户的信息
    1.在 POSIX平台上, 这通常是password 文件的子集. 返回的对象包括 username, uid, gid, shell, 和 homedir.
    2.在Windows系统上, uid 和 gid 域是 -1, and shell是 null.
  • os.endianness() 返回 CPU 的字节序,可能的是 "BE" 或 "LE"。
  • os.constants 返回一个包含错误码,处理信号等通用的操作系统特定常量的对象 参考资料
  • os.EOL 一个定义了操作系统的一行结束的标识的常量
    系统 标志
    POSIX \n
    Windows \r\n

buffer-

[+] 字符集

  • ASCII ascii
    作用:表语英语及西欧语言。
    位数:ASCII是用7位表示的,能表示128个字符;其扩展使用8位表示,表示256个字符。
    范围:ASCII从00到7F,扩展从00到FF
    iso8859-1
    作用:扩展ASCII,表示西欧、希腊语等。
    位数:8位
    范围:从00到FF,兼容ASCII字符集
  • GB GB2312字符集
    作用:国家简体中文字符集,兼容ASCII。
    位数:使用2个字节表示,能表示7445个符号,包括6763个汉字,几乎覆盖所有高频率汉字。
    范围:高字节从A1到F7, 低字节从A1到FE。将高字节和低字节分别加上0XA0即可得到编码。
    GBK字符集
    作用:它是GB2312的扩展,加入对繁体字的支持,兼容GB2312。
    位数:使用2个字节表示,可表示21886个字符。
    范围:高字节从81到FE,低字节从40到FE。
    BIG5字符集
    作用:它解决了中文、日文、朝鲜语等的编码,兼容GBK。
    位数:它采用变字节表示(1 ASCII,2,4字节)。可表示27484个文字。
    范围:1字节从00到7F; 2字节高字节从81到FE,低字节从40到7E和80到FE;4字节第一三字节从81到FE,第二四字节从30到39。
  • Unicode UTF-8/UTF-32/UTF-16/UTF-7
    作用:为世界650种语言进行统一编码,兼容ISO-8859-1。
    位数:UNICODE字符集有多个编码方式,分别是UTF-8,UTF-16和UTF-32。
    参考资料

[+] 字符编码

  • ascii 仅支持 7 位 ASCII 数据。如果设置去掉高位的话,这种编码是非常快的。
  • latin1/binary 一种把 Buffer 编码成一字节编码的字符串的方式
    ISO-8859-1的别名
  • utf8 多字节编码的 Unicode 字符。许多网页和其他文档格式都使用 UTF-8 。
  • utf16le/ucs2 2 或 4 个字节,小字节序编码的 Unicode 字符。支持代理对(U+10000 至 U+10FFFF)。
  • base64 MIME编码的一种
  • hex 将每个字节编码为两个十六进制字符

[-] Buffer类

  • Buffer.from(str,[encoding]) 返回一个被 string 的值初始化的新的 Buffer 实例
  • Buffer.from(buffer) 复制传入的 Buffer 实例的数据,并返回一个新的 Buffer 实例
  • Buffer.from(array) 返回一个被 array 的值初始化的新的 Buffer 实例(传入的 array 的元素只能是数字,不然就会自动被 0 覆盖)
  • Buffer.from(arrayBuffer,[byteOffset],[length]) 返回一个新建的与给定的 ArrayBuffer 共享同一内存的 Buffer
    参考资料
  • Buffer.alloc(size,[fill],[encoding]) 返回一个指定大小的 Buffer 实例,如果没有设置 fill,则默认填满 0
    1. size - 新建的buffer期望的长度(>0,<max)
    2. fill - 用来预填充新建的Buffer值,默认0(str,buffer,integer)
    3. encoding - 如果fill是字符串,则该值是它的字符编码,默认utf8
  • Buffer.allocUnsafe(size) 返回一个指定大小的 Buffer 实例,但是它不会被初始化,所以它可能包含敏感的数据
  • Buffer.allocUnsafeSlow(size) 以这种方式创建的 Buffer 实例的底层内存是未初始化的。 新创建的 Buffer 的内容是未知的,且可能包含敏感数据。
    应当仅仅作为开发者已经在他们的应用程序中观察到过度的内存保留之后的终极手段使用。

[+] 属性

  • buf.length 返回 buf 在字节数上分配的内存量。 注意,这并不一定反映 buf 内可用的数据量。
  • Buffer.byteLength(str,[encoding]) 返回一个字符串的实际字节长度。
    当 string 是一个 Buffer/DataView/TypedArray/ArrayBuffer 时,返回实际的字节长度。
  • buf[index] 索引操作符 [index] 可用于获取或设置 buf 中指定 index 位置的八位字节。
    这个值指向的是单个字节,所以合法的值范围是的 0x00 至 0xFF(十六进制),或 0 至 255(十进制)。
  • buf.buffer buffer 属性指向创建该 Buffer 的底层的 ArrayBuffer 对象。
  • buf.constants
    属性 描述
    buffer.INSPECT_MAX_BYTES 当调用 buf.inspect() 时返回的最大字节数。 可以被用户模块重写。
    buffer.constants.MAX_LENGTH 单个Buffer实例允许的最大量度
    buffer.constants.MAX_STRING_LENGTH 单个string实例允许的最大长度
    buffer.kMaxLength 分配给单个 Buffer 实例的最大内存
  • Buffer.poolSize 这是用于决定预分配的、内部 Buffer 实例池的大小的字节数。 这个值可以修改。
  • Buffer.isBuffer(obj) 如果 obj 是一个 Buffer 则返回 true ,否则返回 false 。
  • Buffer.isEncoding(encoding) 如果 encoding 是一个支持的字符编码则返回 true,否则返回 false 。

[-] 读取/写入

  • buf.toString([encoding],[n,m]) 根据 encoding 指定的字符编码解码 buf 成一个字符串。 start 和 end 可传入用于只解码 buf 的一部分。
  • buf.write(str,[offset],[length],[encoding]) 根据 encoding 的字符编码写入 string 到 buf 中的 offset 位置。 length 参数是写入的字节数。 如果 buf 没有足够的空间保存整个字符串,则只会写入 string 的一部分。 只部分解码的字符不会被写入。

[-] 修改

  • buf.fill(val,[offset],[end],[encoding]) 填充一个buffer
  • buf.slice[n,m) 返回一个指向相同原始内存的新建的 Buffer,但做了偏移且通过 start 和 end 索引进行裁剪。
    注意,修改这个新建的 Buffer 切片,也会同时修改原始的 Buffer 的内存,因为这两个对象所分配的内存是重叠的。
    指定负的索引会导致切片的生成是相对于 buf 的末尾而不是开头。
  • Buffer.concat(list,[totalLength]) 返回一个合并了 list 中所有 Buffer 实例的新建的 Buffer 。
    1. list - 要合并的 Buffer 或 Uint8Array 实例的数组
    2. totalLength - 合并时 list 中 Buffer 实例的总长度
  • buf.copy(target,[range]) 贝 buf 的一个区域的数据到 target 的一个区域,即便 target 的内存区域与 buf 的重叠。

[-] 转换

  • buf.toJSON() 返回 buf 的 JSON 格式。
    {"type":"Buffer","data":[1,2,3,4,5]}
  • buf.transcode(source,from,to) 将给定的 Buffer 或 Uint8Array 实例从一个字符编码重新编码到另一个字符。 返回一个新的Buffer实例。

[-] 检索

  • buf.includes(val,[byteOffset],[encoding]) 检索一个buffer
  • buf.indexOf(val,[byteOffset],[encoding]) 查找一个值在buffer中的索引
    如果 buf 没包含 value 则返回 -1
  • buf.lastIndexOf(val,[byteOffset],[encoding]) 与 buf.indexOf() 类似,除了 buf 是从后往前搜索而不是从前往后。

[+] 迭代器

  • buf.entries() 从 buf 的内容中,创建并返回一个 [index, byte] 形式的迭代器
  • buf.keys() 创建并返回一个包含 buf 键名(索引)的迭代器。
  • buf.values() 创建并返回一个包含 buf 的值(字节)的迭代器。 当 Buffer 使用 for..of 时会自动调用该函数。

[+] 比较

  • buf.compare(target,[range]) 比较 buf 与 target,返回表明 buf 在排序上是否排在 target 之前、或之后、或相同。 对比是基于各自 Buffer 实际的字节序列。
    如果 target 与 buf 相同,则返回 0 。
    如果 target 排在 buf 前面,则返回 1 。
    如果 target 排在 buf 后面,则返回 -1 。
  • Buffer.compare(buf1,buf2) 比较 buf1 和 buf2 ,通常用于 Buffer 实例数组的排序。
  • buf.equals(buffer) 如果 buf 与 otherBuffer 具有完全相同的字节,则返回 true,否则返回 false。

[+] 读取

  • buf.readDoubleBE(offset,[noAssert]) 用指定的字节序格式(readDoubleBE() 返回大端序,readDoubleLE() 返回小端序)从 buf 中指定的 offset 读取一个64位双精度值。
  • buf.readFloatBE(offset,[noAssert]) 用指定的字节序格式(readFloatBE() 返回大端序,readFloatLE() 返回小端序)从 buf 中指定的 offset 读取一个32位浮点值。
  • buf.readInt8(offset,[noAssert]) 从 buf 中指定的 offset 读取一个有符号的8位整数值。
  • buf.readInt16BE(offset,[noAssert]) 用指定的字节序格式(readInt16BE() 返回大端序,readInt16LE() 返回小端序)从 buf 中指定的 offset 读取一个有符号的16位整数值。
  • buf.readInt32BE(offset,[noAssert]) 用指定的字节序格式(readInt32BE() 返回大端序,readInt32LE() 返回小端序)从 buf 中指定的 offset 读取一个有符号的32位整数值。
  • buf.readIntBE(offset,byteLength,[noAssert]) 从 buf 中指定的 offset 读取 byteLength 个字节,且读取的值会被解析为二进制补码值。 最高支持48位精度。
  • buf.readUInt8(offset,[noAssert]) 从 buf 中指定的 offset 读取一个无符号的8位整数值。
  • buf.readUInt16BE(offset,[noAssert]) 用指定的字节序格式(readUInt16BE() 返回大端序,readUInt16LE() 返回小端序)从 buf 中指定的 offset 读取一个无符号的16位整数值。
  • buf.readUInt32BE(offset,[noAssert]) 用指定的字节序格式(readUInt32BE() 返回大端序,readUInt32LE() 返回小端序)从 buf 中指定的 offset 读取一个无符号的32位整数值。
  • buf.readUIntBE(offset,byteLength,[noAssert]) 从 buf 中指定的 offset 读取 byteLength 个字节,且读取的值会被解析为无符号的整数。 最高支持48位精度。

[+] 交换

  • buf.swap16() 将 buf 解析为一个无符号16位的整数数组,并且以字节顺序原地进行交换。 如果 buf.length 不是2的倍数,则抛出 RangeError 错误。
  • buf.swap32() 将 buf 解析为一个无符号32位的整数数组,并且以字节顺序原地进行交换。 如果 buf.length 不是4的倍数,则抛出 RangeError 错误。
  • buf.swap64() 将 buf 解析为一个64位的数值数组,并且以字节顺序原地进行交换。 如果 buf.length 不是8的倍数,则抛出 RangeError 错误。

string_decoder-

[-] 字符串解码器

  • string_decoder string_decoder 模块提供了一个 API,用于把 Buffer 对象解码成字符串,但会保留编码过的多字节 UTF-8 与 UTF-16 字符。
    const {StringDecoder} = require('string_decoder')
    const decoder = new StringDecoder('utf8')
  • string_decoder.write(buffer) 返回一个解码后的字符串,并确保返回的字符串不包含 Buffer 末尾残缺的多字节字符,残缺的多字节字符会被保存在一个内部的 buffer 中用于下次调用
  • string_decoder.end([buffer]) 以字符串的形式返回内部 buffer 中剩余的字节。 残缺的 UTF-8 与 UTF-16 字符的字节会被替换成符合字符编码的字符。

crypto-

[-] 加密

stream-

[-] fs.Stream

  • fs.createReadStream(path,[opt]) 返回一个新建的 ReadStream 对象
    path : string / buffer / url
    option : string(encoding) / object
    1. flags - 'r'
    2. encoding - null
    3. fd - null
    4. mode - 0o666
    5. autoClose - true
    6. start - [
    7. end - ]
    options 可以包括 start 和 end 值,使其可以从文件读取一定范围的字节而不是整个文件。
    如果指定了 fd,则 ReadStream 会忽略 path 参数并且会使用指定的文件描述符。 这意味着不会触发 'open' 事件。
    参考资料:从流读取数据、写入流、管道流、链式流
  • fs.createWriteStream(path,[opt]) 返回一个新建的 WriteStream 对象
    path : string / buffer / url
    option : string(encoding) / object
    1. flags - 'w'
    2. encoding - 'utf8'
    3. fd - null
    4. mode - 0o666
    5. autoClose - true
    6. start - [
    7. end - ]
    如果是修改一个文件而不是覆盖它,则需要flags 模式为 r+ 而不是默认的 w 模式。
  • stream.bytesRead 已读取的字节数
  • stream.bytesWritten 已写入的字节数。 不包括仍在排队等待写入的数据。
  • stream.path 流正在读取的文件的路径,指定在 fs.createReadStream() 的第一个参数。 如果 path 传入的是一个字符串,则 readStream.path 是一个字符串。 如果 path 传入的是一个 Buffer,则 readStream.path 是一个 Buffer。
  • [evt]open 当 ReadStream/WriteStream 的文件被打开时触发
  • [evt]close 当 ReadStream/WriteStream 底层的文件描述符被关闭时触发。
    'close' 事件触发后,该流将不会再触发任何事件。
    不是所有可写流都会触发 'close' 事件。
  • [evt]error 'error' 事件在写入数据出错或者使用管道出错时触发。事件发生时,回调函数仅会接收到一个 Error 参数。
    注意: 'error' 事件发生时,流并不会关闭。

[-] 可读流

  • stream.setEncoding(encoding) 为从可读流读入的数据设置字符编码
  • stream.pipe(dest,[opt]) 将可读流写入到可写流
  • stream.unpipe([dest]) 将之前通过stream.pipe()方法绑定的流分离
    如果 destination 没有传入, 则所有绑定的流都会被分离.
    如果传入 destination, 但它没有被pipe()绑定过,则该方法不作为.
  • stream.read([size]) 从内部缓冲区中抽出并返回一些数据。 如果没有可读的数据,返回null。
    默认数据将作为“Buffer”对象返回 ,除非已经使用readable.setEncoding()方法设置编码或流运行在对象模式。
  • stream.pause() 使 flowing 模式的流停止触发 'data' 事件, 进而切出 flowing 模式。任何可用的数据都将保存在内部缓存中。
  • stream.isPaused() 返回可读流的当前操作状态
  • stream.resume() 重新触发 'data' 事件, 将暂停模式切换到流动模式。
  • stream.unshift(chunk) 会把一块数据压回到Buffer内部
  • stream.destroy([error]) 销毁流,并且触发error事件。然后,可读流将释放所有的内部资源。
  • [evt]data 'data' 事件会在流将数据传递给消费者时触发。
    当流转换到 flowing 模式时会触发该事件。调用 readable.pipe(), readable.resume() 方法,或为 'data' 事件添加回调可以将流转换到 flowing 模式。 'data' 事件也会在调用 readable.read() 方法并有数据返回时触发。
  • [evt]end 'end' 事件将在流中再没有数据可供消费时触发。
    注意: 'end' 事件只有在数据被完全消费后 才会触发 。 可以在数据被完全消费后,通过将流转换到 flowing 模式, 或反复调用 stream.read() 方法来实现这一点。
  • [evt]readable 'readable' 事件将在流中有数据可供读取时触发。
    在某些情况下,为 'readable' 事件添加回调将会导致一些数据被读取到内部缓存中。

[-] 可写流

  • stream.setDefaultEncoding(encoding) 设置编码
    返回: this
  • stream.write(chunk,[encoding],[fn]) 向流中写入数据,并在数据处理完成后调用 callback 。
    如果有错误发生, callback 不一定 以这个错误作为第一个参数并被调用。要确保可靠地检测到写入错误,应该监听 'error' 事件
    在确认了 chunk 后,如果内部缓冲区的大小小于创建流时设定的 highWaterMark 阈值,函数将返回 true 。 如果返回值为 false ,应该停止向流中写入数据,直到 'drain' 事件被触发。
    返回:布尔值,如果流需要等待 'drain' 事件触发才能继续写入数据,这里将返回 false ; 否则返回 true。
  • stream.end([chunk],[encoding],[fn]) 调用 writable.end() 方法表明接下来没有数据要被写入 Writable
    chunk - 需要写入的数据。对于非对象模式下的流, chunk 必须是字符串、或 Buffer、或 Uint8Array。对于对象模式下的流, chunk 可以是任意的 JavaScript 值,除了 null。
    encoding - 如果 chunk 是字符串,这里指定字符编码。
    callback - 流结束时的回调函数,它将作为 'finish' 事件的回调函数
  • stream.cork() 强制所有写入数据都存放到内存中的缓冲区里。 直到调用 stream.uncork() 或 stream.end() 方法时,缓冲区里的数据才会被输出。
    在向流中写入大量小块数据(small chunks of data)时,内部缓冲区(internal buffer)可能失效,从而导致性能下降。writable.cork() 方法主要就是用来避免这种情况。 对于这种情况, 实现了 writable._writev() 方法的流可以对写入的数据进行缓冲,从而提高写入效率。
  • stream.uncork() 输出在 stream.cork() 方法被调用之后缓冲在内存中的所有数据。
    如果一个流多次调用了 writable.cork() 方法,那么也必须调用同样次数的 writable.uncork() 方法以输出缓冲区数据。
  • stream.destroy([error]) 摧毁这个流,并发出传过来的错误。当这个函数被调用后,这个写入流就结束了。
    返回: this
  • [evt]finish 在调用了 stream.end() 方法,且缓冲区数据都已经传给底层系统(underlying system)之后, 'finish' 事件将被触发。
  • [evt]pipe 在可读流(readable stream)上调用 stream.pipe() 方法,并在目标流向 (destinations) 中添加当前可写流 ( writable ) 时,将会在可写流上触发 'pipe' 事件。
  • [evt]unpipe 在 Readable 上调用 stream.unpipe() 方法,从目标流向中移除当前 Writable 时,将会触发 'unpipe' 事件。
  • [evt]drain 如果调用 stream.write(chunk) 方法返回 false,流将在适当的时机触发 'drain' 事件,这时才可以继续向流中写入数据。

readline-

[+] 逐行读取

[+] Interface

fs-

[+] 基本参数

  • flags 文件打开行为
    Flag描述
    r以读取模式打开文件。如果文件不存在抛出异常。
    r+ 以读写模式打开文件。如果文件不存在抛出异常。
    rs以同步的方式读取文件。
    rs+以同步的方式读取和写入文件。
    w以写入模式打开文件,如果文件不存在则创建。
    wx类似 'w',但是如果文件路径存在,则文件写入失败。
    w+以读写模式打开文件,如果文件不存在则创建。
    wx+类似 'w+', 但是如果文件路径存在,则文件读写失败。
    a以追加模式打开文件,如果文件不存在则创建。
    ax类似 'a', 但是如果文件路径存在,则文件追加失败。
    a+以读取追加模式打开文件,如果文件不存在则创建。
    ax+类似 'a+', 但是如果文件路径存在,则文件读取追加失败。

[+] 文件系统常量

  • fs.constants 返回一个包含常用文件系统操作的常量的对象。
  • 文件访问常量 以下常量用于 fs.access()
    常量 描述
    F_OK 该标志表明文件对于调用进程是可见的。
    R_OK 该标志表明文件可被调用进程读取。
    W_OK 该标志表明文件可被调用进程写入。
    X_OK 该标志表明文件可被调用进程执行。
  • 文件打开常量 以下常量用于 fs.open()
    常量 描述
    O_RDONLY 该标志表明打开一个文件用于只读访问。
    O_WRONLY 该标志表明打开一个文件用于只写访问。
    O_RDWR 该标志表明打开一个文件用于读写访问。
    O_CREAT 该标志表明如果文件不存在则创建一个文件。
    O_EXCL 该标志表明如果设置了 O_CREAT 标志且文件已经存在,则打开一个文件应该失败。
    O_NOCTTY 该标志表明如果路径是一个终端设备,则打开该路径不应该造成该终端变成进程的控制终端(如果进程还没有终端)。
    O_TRUNC 该标志表明如果文件存在且为一个常规文件、且文件被成功打开为写入访问,则它的长度应该被截断至零。
    O_APPEND 该标志表明数据会被追加到文件的末尾。
    O_DIRECTORY 该标志表明如果路径不是一个目录,则打开应该失败。
    O_NOATIME 该标志表明文件系统的读取访问权不再引起相关文件 atime 信息的更新。该标志只在 Linux 操作系统有效。
    O_NOFOLLOW 该标志表明如果路径是一个符号链接,则打开应该失败。
    O_SYNC 该标志表明文件打开用于同步 I/O。
    O_DSYNC 该标志标明文件为同步I/O打开,写入操作会等待数据完整性
    O_SYMLINK 该标志表明打开符号链接自身,而不是它指向的资源。
    O_DIRECT 当设置它时,会尝试最小化文件 I/O 的缓存效果。
    O_NONBLOCK 该标志表明当可能时以非阻塞模式打开文件。
  • 文件类型常量 以下常量用于 fs.Stats 对象中用于决定一个文件的类型的 mode 属性
    常量 描述
    S_IFMT 用于提取文件类型码的位掩码。
    S_IFREG 表示一个常规文件的文件类型常量。
    S_IFDIR 表示一个目录的文件类型常量。
    S_IFCHR 表示一个面向字符的设备文件的文件类型常量。
    S_IFBLK 表示一个面向块的设备文件的文件类型常量。
    S_IFIFO 表示一个 FIFO/pipe 的文件类型常量。
    S_IFLNK 表示一个符号链接的文件类型常量。
    S_IFSOCK 表示一个 socket 的文件类型常量。
  • 文件模式常量 以下常量用于 fs.Stats 对象中用于决定一个文件访问权限的 mode 属性
    常量 描述
    S_IRWXU 该文件模式表明可被所有者读取、写入、执行。
    S_IRUSR 该文件模式表明可被所有者读取。
    S_IWUSR 该文件模式表明可被所有者写入。
    S_IXUSR 该文件模式表明可被所有者执行。
    S_IRWXG 该文件模式表明可被群组读取、写入、执行。
    S_IRGRP 该文件模式表明可被群组读取。
    S_IWGRP 该文件模式表明可被群组写入。
    S_IXGRP 该文件模式表明可被群组执行。
    S_IRWXO 该文件模式表明可被其他人读取、写入、执行。
    S_IROTH 该文件模式表明可被其他人读取。
    S_IWOTH 该文件模式表明可被其他人写入。
    S_IXOTH 该文件模式表明可被其他人执行。

[+] 获取文件信息

  • fs.stat(path,fn(err,stats)) 异步获取文件信息
    不建议在调用 fs.open() 、fs.readFile() 或 fs.writeFile() 之前使用 fs.stat() 检查一个文件是否存在。 作为替代,用户代码应该直接打开/读取/写入文件,当文件无效时再处理错误。
    如果要检查一个文件是否存在且不操作它,推荐使用 fs.access()。
    如果发生错误,则 err.code 会是常见系统错误之一。
  • fs.statSync(path) 同步获取文件信息
  • fs.fstat(fd,fn(err,stats)) 异步获取文件信息(文件是通过文件描述符 fd 指定的)
    fstat系统调用接受的是 一个“文件描述符”,而另外两个则直接接受“文件全路径”。文件描述符是需要我们用open系统调用后才能得到的,而文件全路经直接写就可以了。
  • fs.fstatSync(fd) 同步获取文件信息
  • fs.lstat(path,fn(err,stats)) 异步获取文件信息
    当文件是一个符号链接时,lstat返回的是该符号链接本身的信息;而stat返回的是该链接指向的文件的信息。 参考资料
  • fs.lstatSync(path) 异步获取文件信息
  • stats.isFile() 如果是文件返回 true,否则返回 false。
  • stats.isDirectory() 如果是目录返回 true,否则返回 false。
  • stats.isBlockDevice() 如果是块设备返回 true,否则返回 false。
  • stats.isCharacterDevice() 如果是字符设备返回 true,否则返回 false。
  • stats.isSymbolicLink() 如果是软链接返回 true,否则返回 false。
  • stats.isFIFO() 如果是FIFO,返回true,否则返回 false。FIFO是UNIX中的一种特殊类型的命令管道。
  • stats.isSocket() 如果是 Socket 返回 true,否则返回 false。
  • stats.value
    属性 描述
    atime 文件数据最近被访问的时间
    mtime 文件数据最近被修改的时间
    ctime 文件状态最近更改的时间
    birthtime 文件创建的时间

[+] 检查文件状态

  • fs.access(path,[mode],fn) 判断用户是否有权限操作给定的目录或者是文件
    fs.constants.F_OK - path 文件对调用进程可见。 这在确定文件是否存在时很有用,但不涉及 rwx 权限。 如果没指定 mode,则默认为该值。
    fs.constants.R_OK - path 文件可被调用进程读取。
    fs.constants.W_OK - path 文件可被调用进程写入。
    fs.constants.X_OK - path 文件可被调用进程执行。 对 Windows 系统没作用(相当于 fs.constants.F_OK)
  • fs.accessSync(path,[mode]) 判断用户是否有权限操作给定的目录或者是文件
  • fs.existsSync(path) 检测文件是否存在。
    返回值:布尔(true存在.false不存在)

[+] 文件权限

  • fs.chmod(path,mode,fn(err)) 修改文件/文件夹权限
  • fs.chmodSync(path,mode) 修改文件/文件夹权限
  • fs.fchomod(fd,mode,fn(err)) 修改文件/文件夹权限
  • fs.fchomodSync(fd,mode,fn(err)) 修改文件/文件夹权限
  • fs.lchmod(path,mode,fn(err)) 修改文件/文件夹权限(不解析符号链接)
    只在 macOS 有效
  • fs.chown(path,uid,gid,fn(err)) 更改文件/文件夹所有权
  • fs.chownSync(path,uid,gid) 更改文件/文件夹所有权
  • fs.fchown(fd,uid,gid,fn(err)) 更改文件/文件夹所有权
  • fs.fchownSync(fd,uid,gid) 更改文件/文件夹所有权
  • fs.lchown(path,uid,gid,fn(err)) 更改文件/文件夹所有权(不解析符号链接)

[-] 文件监视

  • fs.watch(file,[opt],listener(evtype,which)) 监听file的变化,返回的对象是一个fs.FSWatcher
    file - 可以是一个文件或一个目录
    opt - 如果是一个字符串则指定encoding,否则以对象传入。
    1. persistent - boolean,指明如果文件正在被监视,进程是否应该继续运行。默认 = true
    2. recursive - boolean,指明是否全部子目录应该被监视,或只是当前目录。 适用于当一个目录被指定时,且只在支持的平台(详见 Caveats)。默认 = false
    3. encoding - 指定用于传给监听器的文件名的字符编码。默认 = 'utf8'
    evtype - rename、change、error
    which - 触发事件的文件的名称
    注意,在大多数平台,当一个文件出现或消失在一个目录里时,'rename' 会被触发 参考资料
  • FSWatcher.close() 停止监听 fs.FSWatcher 的变化
  • fs.watchFile(file,[opt],listener(current,previous)) 监视file的变化,回调 listener 会在每次访问文件时被调用
    1. persistent - boolean,指明如果文件正在被监视,进程是否应该继续运行。默认 = true
    2. interval - 表示目标应该每隔多少毫秒被轮询。默认 = 5007
    listener的两个参数表示当前的状态对象和以前的状态对象,是一个fs.Stat实例。
  • fs.unwatchFile(file,listener) 停止监视file的变化
    如果指定了 listener,则只移除特定的监听器。 否则,所有的监听器都会被移除,且已经有效地停止监视 filename。
    调用 fs.unwatchFile() 且带上一个未被监视的文件名,将会是一个空操作,而不是一个错误

[-] 打开文件

  • fs.open(path,flag,[mode],fn(err,fd)) 异步打开文件
    path - 文件的路径。
    flags - 文件打开的行为。
    mode - 设置文件模式(权限),文件创建默认权限为 0666(可读,可写)。
    callback - 回调函数,带有两个参数如:callback(err, fd)。fd为文件描述符。
  • fs.openSync(path,flags,[mode]) 同步打开文件。
    返回一个表示文件描述符的整数。
  • fs.fdatasync(fd,fn(err)) 刷新数据到磁盘
  • fs.fdatasyncSync(fd) 刷新数据到磁盘
  • fs.fsync(fd,fn(err)) 同步缓存数据到磁盘
  • fs.fsyncSync(fd,fn(err)) 同步缓存数据到磁盘

[-] 读取文件

  • fs.readFile(path,[opt],fn(err,data)) 异步读取一个文件的全部内容
    如果未指定字符编码,则返回的data为原始buffer。
  • fs.readFileSync(path,[opt]) 同步读取一个文件的全部内容
    返回path的内容
  • fs.read(fd,buffer,offset,length,postion,fn) 异步读取文件
    该方法使用了文件描述符来读取文件。
    fd - 通过 fs.open() 方法返回的文件描述符。
    buffer - 数据写入的缓冲区。
    offset - 缓冲区写入的写入偏移量。
    length - 要从文件中读取的字节数。
    position - 文件读取的起始位置,如果 position 的值为null,则会从当前文件指针的位置读取。
    callback - 回调函数,有三个参数err, bytesRead, buffer,err 为错误信息,bytesRead 表示读取的字节数,buffer 为缓冲区对象。
  • fs.readSync(fd,buffer,offset,length,postion,fn) 同步读取文件。
    返回 bytesRead 的数量。
  • fs.close(fd,fn) 异步关闭文件。
    使用了文件描述符来读取文件
  • fs.closeSync(fd) 同步关闭文件

[+] 截取文件

  • fs.truncate(path,len,fn(err)) 异步截取文件
  • fs.truncateSync(path,len) 同步截取文件
  • fs.ftruncate(fd,len,fn) 异步截取文件
    使用文件描述符来读取文件。
    fd - 通过 fs.open() 方法返回的文件描述符。
    len - 文件内容截取的长度。
    callback - 回调函数,没有参数。
  • fs.ftruncateSync(fd,len) 同步截取文件

[-] 写入文件

  • fs.writeFile(file,data,[opt],fn(err)) 异步写入文件。
    file - 文件名或文件描述符。
    data - 要写入文件的数据,可以是 String(字符串) 或 Buffer(流) 对象。
    options - 该参数是一个对象,包含 {encoding, mode, flag}。默认编码为 utf8, 模式为 0666 , flag 为 'w'
    callback - 回调函数,回调函数只包含错误信息参数(err),在写入失败时返回。
  • fs.writeFileSync(file,data,[opt]) 同步写入文件
  • fs.appendFile(file,data,[opt],fn(err)) 异步地追加数据到一个文件,如果文件不存在则创建文件。
    data 可以是一个字符串或 buffer。
  • fs.appendFileSync(file,data,[opt]) 同步地追加数据到一个文件,如果文件不存在则创建文件。
  • fs.write(fd,buffer,[offset],[length],[position],fn(err,bytes,buffer)) 异步写入文件
  • fs.writeSync(fd,buffer,[offset],[length],[position]) 同步写入文件
  • fs.write(fd,string,[position],[encoding],fn(err,written,string)) 异步写入字符串
  • fs.writeSync(fd,string,[position],[encoding]) 同步写入字符串

[+] 修改时间戳

  • fs.utimes(path,atime,mtime,fn(err)) 修改文件时间戳
    atime 参数和 mtime 参数遵循以下规则:
    值可以是 Unix 时间戳数值、Date 对象、或数值字符串如 '123456789.0'。
    如果值不能被转换为数值,或值是 NaN 、 Infinity 或 -Infinity,则会抛出错误。
  • fs.utimesSync(path,atime,mtime) 修改文件时间戳
  • fs.futimes(fd,atime,mtime,fn(err)) 修改文件时间戳
  • fs.futimesSync(fd,atime,mtime) 修改文件时间戳

[-] 重命名/移动

  • fs.rename(old,new,fn(err)) 异步重命名文件
  • fs.renameSync(old,new) 同步重命名文件

[-] 复制文件

  • fs.copyFile(from,to,[flags],fn(err)) 异步复制文件(v8.5.0+)
    默认情况下,如果 dest 已经存在会被覆盖
    flags 是一个可选的整数,用于指定行为的拷贝操作。唯一支持的 flag 是 fs.constants.COPYFILE_EXCL ,如果 dest 已经存在,则会导致拷贝操作失败。
  • fs.copyFileSync(from,to,[flags]) 同步复制文件(v8.5.0+)

[-] 删除文件

[-] 目录操作

  • fs.mkdir(path,[mode],fn) 异步创建目录,如果目录已存在,将抛出异常
    path - 文件路径。
    mode - 设置目录权限,默认为 0777。
    callback - 回调函数,没有参数。
  • fs.mkdirSync(path,[mode]) 同步创建目录,如果目录已存在,将抛出异常
  • fs.mkdtemp(prefix,[opt],fn(err,folder)) 异步创建一个唯一的临时目录
    prefix - 临时文件夹名,会生成六位随机字符在其后
    option - 可以是一个字符串并指定一个字符编码,或是一个对象且由一个 encoding 属性指定使用的字符编码。
    folder - 生成的临时目录的路径
    如果目的是要在 /tmp 里创建一个临时目录,则 prefix 必须 以一个指定平台的路径分隔符(require('path').sep)结尾
  • fs.mkdtempSync(prefix,[opt]) 同步创建一个唯一的临时目录
  • fs.readdir(path,fn(err,files)) 异步读取目录
    path - 文件路径。
    callback - 回调函数,回调函数带有两个参数err, files,err 为错误信息,files 为 目录下的文件数组列表。
  • fs.readdirSync(path) 同步读取目录
  • fs.rmdir(path,fn) 异步删除目录
  • fs.rmdirSync(path) 同步删除目录

[+] 链接操作

  • fs.link(old,new,fn(err)) 创建硬链接(只能在本券中)
  • fs.linkSync(old,new) 创建硬链接(只能在本券中)
  • fs.symlink(target,path,[type],fn(err)) 创建符号链接
    异步创建一个名为path且指向target的符号链接
    type 参数可以设为 'dir'、'file' 或 'junction'(默认为 'file'),且仅在 Windows 上有效(在其他平台上忽略)。 注意,Windows 结点要求目标路径是绝对的。 当使用 'junction' 时,target 参数会被自动标准化为绝对路径。
  • fs.symlinkSync(target,path,[type]) 创建符号链接
  • fs.readlink(path,[opt],fn(err,link)) 读取软连接信息
  • fs.readlinkSync(path,[opt]) 读取软连接信息
  • fs.realpath(path,[opt],fn(err,path)) 获取真实路径
  • fs.realpathSync(path,[opt]) 获取真实路径

zlib-

[-] 压缩

HTTP-

[-] 创建http server

  • http.createServer([fn(request,response)]) 返回一个新建的 http.Server 实例

[-] http.Server类

  • server.listen(80) 指定HTTP服务器监听的端口

[-] http

  • http.METHODS 返回解析器支持的 HTTP 方法的列表
  • http.STATUS_CODES 返回标准的 HTTP 响应状态码的集合,以及各自的简短描述。 例如,http.STATUS_CODES[404] === 'Not Found'。
  • http.globalAgent Agent 的全局实例,作为所有 HTTP 客户端请求的默认 Agent。

https-

[-] https

url-

[-] 网址

  • url.parse(urlstr) 解析一个 URL 字符串并返回一个 URL 对象
  • url.resolve(from,to) 会以一种 Web 浏览器解析超链接的方式把一个目标 URL 解析成相对于一个基础 URL
  • url.format(obj) 返回一个从 urlObject 格式化后的 URL 字符串

[+] URL

  • var {URL} = require('url') 引入的url模块是个对象
  • new URL(input,[base]) 通过将input解析到base上创建一个新的URL对象。
  • url.protocol 获取及设置URL的协议(protocol)部分。
  • url.username 获取及设置URL的用户名(username)部分
  • url.password 获取及设置URL的密码(password)部分。
  • url.hostname 获取及设置URL的主机名(hostname)部分
  • url.port 获取及设置URL的端口(port)部分。
  • url.host 获取及设置URL的主机(host)部分。
  • url.origin 获取只读序列化的URL origin部分。 参考资料
  • url.pathname 获取及设置URL的路径(path)部分。
  • url.search 获取及设置URL的序列化查询(query)部分部分。
  • url.searchParams 获取表示URL查询参数的URLSearchParams对象。
  • url.hash 获取及设置URL的分段(hash)部分。
  • url.href 获取及设置序列化的URL
    url.toString() / url.toJSON() 值相同

[+] URLSearchParams

  • var {URLSearchParams} = require('url') 引入的url模块是个对象
  • new URLSearchParams(str/obj) 通过将input解析到base上创建一个新的URL对象。
  • params.get(name) 返回键是name的第一个键值对的值。
  • params.getAll(name) 返回键是name的所有键值对的值,如果没有满足条件的键值对,则返回一个空的数组。
  • params.has(name) 如果存在至少一对键是name的键值对则返回 true。
  • params.set(name,val) 将URLSearchParams对象中与name相对应的值设置为value。如果已经存在键为name的键值对,将第一对的值设为value并且删除其他对。如果不存在,则将此键值对附加在查询字符串后。
  • params.append(name,val) 在查询字符串中附加一个新的键值对。
  • params.delete(name) 删除所有键为name的键值对
  • params.entries() 在查询中的每个键值对上返回一个ES6迭代器
  • params.keys() 在每一个键值对上返回一个键的ES6迭代器
  • params.values() 在每一个键值对上返回一个值的ES6迭代器。
  • params.forEach(fn,[arg]) 在查询字符串中迭代每个键值对,并调用给定的函数。
  • params.sort() 按现有名称就地排列所有的名称-值对。使用[稳定排序算法][]完成排序,因此保留具有相同名称的名称-值对之间的相对顺序。

querystring-

[-] 查询字符串

  • querystring.stringify(str,[sep],[eq],[opt]) 通过遍历给定的 obj 对象的自身属性,生成 URL 查询字符串。
    如果 obj 对象中的属性的类型为str,num,bool,arr则属性的值会被序列化。 其他类型的属性的值会被强制转换为空字符串。
  • querystring.parse(str,[sep],[eq],[opt]) 把一个 URL 查询字符串 str 解析成一个键值对的集合
    str = 要解析的 URL 查询字符串
    sep = 用于界定查询字符串中的键值对的子字符串。默认为 '&'。
    eq = 用于界定查询字符串中的键与值的子字符串。默认为 '='。
    opt(obj) =
    1. decodeURIComponent - 解码查询字符串的字符时使用的函数。默认为 querystring.unescape()
    2. maxKeys - 指定要解析的键的最大数量。默认为 1000。指定为 0 则不限制。

    返回一个对象
  • querystring.escape(str) 该方法是提供给 querystring.stringify() 使用的,通常不直接使用。 它之所以对外开放,是为了在需要时可以通过给 querystring.escape 赋值一个函数来重写编码的实现。
  • querystring.unescape(str) 对给定的 str 进行解码。

net-

[-] 网络

dgram-

[-] 数据报

dns-

[-] 域名服务器

tls-

[-] 安全传输层

cluster-

[+] Worker

[+] 集群

tty-

[+] 终端

其它+

[-] error

[-] assert

[-] repl

[-] c++插件

[-] V8引擎

[-] 虚拟机

工具资料-

[+] NPM

  • npm init [--yes] 初始化
  • package.json name - 包名。
    version - 包的版本号。
    description - 包的描述。
    keywords - 关键词。
    homepage - 包的官网 url 。
    author - 包的作者姓名。
    contributors - 包的其他贡献者姓名。
    license - 共享协议。
    repository - 包代码存放的地方的类型,可以是 git 或 svn,git 可在 Github 上。
    main - 默认入口文件。
    scripts - 可执行的脚本,通过npm run $cmd 例:{"build":"babel src -d lib"}
    dependencies - 依赖包
    devDependencies - 依赖包,仅用于开发和测试
  • npm install [$package] 本地安装指定的模块
    如没有指定包名,则安装package.json中devDependencies中的所有依赖包
  • npm install --save-dev $package 本地安装指定的模块,并添加到package.json的devDependencies中
  • npm install --save $package 本地安装指定的模块,并添加到package.json的dependencies中
  • npm install --g $package 全局安装指定模块
    当目标环境没有时,不会自动依赖安装
  • npm uninstall 移除包,同安装包各项参数
  • npm update [$package] 更新包
  • npm outdated 查看哪些包已经过期
  • npm adduser 注册npm资源库
  • npm login 登录npm资源库
  • npm publish 发布npm模块
  • npm unpublish $pak@ver 撤销发布自己发布过的某个版本代码

[-] Doc

Meta-

[-]Info

  • !doctype html HTML5

    HTML4无框架

    HTML4有框架
  • lang 简体中文 html lang="zh-cmn-Hans"
    繁体中文 html lang="zh-cmn-Hant"
    参考资料
  • title标题
  • charset HTML5

    HTML4
  • base 定义页面中所有链接的默认地址或默认目标。
    注释:如果使用了base标签,则必须具备 href 属性或者 target 属性或者两个属性都具备。

[-]Name

  • (SEO)
    namecontent
    author作者
    description描述
    keywords关键词
    generator创建者/程序
    copyright版权信息
    revised页面的最新版本 ( David, 2008/8/8/ )
  • viewport
    width viewport 宽度(数值/device-width)
    height viewport 高度(数值/device-height)
    initial-scale 初始缩放比例
    maximum-scale 最大缩放比例
    minimum-scale 最小缩放比例
    user-scalable 是否允许用户缩放(yes/no)
    minimal-ui 在页面加载时最小化上下状态栏(iOS7.1)
  • robots 设定为all:文件将被检索,且页面上的链接可以被查询;
    设定为none:文件将不被检索,且页面上的链接不可以被查询;
    设定为index:文件将被检索;
    设定为follow:页面上的链接可以被查询;
    设定为noindex:文件将不被检索,但页面上的链接可以被查询;
    设定为nofollow:文件将不被检索,页面上的链接可以被查询。
    参考资料
  • google
    <meta name="googlebot" content="index,follow">
    设置搜索引擎的检索,仅对google有效
    <meta name="google" content="nositelinkssearchbox">
    告诉 Google 不显示网站链接的搜索框
    <meta name="google" content="notranslate">
    告诉 Google 不提供此页面的翻译
    参考资料

[-]http-equiv

  • X-UA-Compatible
    
                            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
                            //强制使用IE最高版本及谷歌内核
    
                            <meta name="renderer" content="webkit">
                            //360安全浏览器默认使用极速模式渲染
                        

    360浏览器内核控制 Meta 标签说明文档
  • Cache-Control不允许百度转码
    旧写法:

    新写法:
  • refresh
    定时让网页在指定的时间n内,跳转到页面http://yourlink;
  • windows-target
    强制页面在当前窗口中以独立页面显示,可以防止自己的网页被别人当作一个frame页调用
  • Page-Enter Duration持续时间(单位:秒)
    Transition滤镜类型。表示使用哪种特效,取值为0-23:
    0 矩形缩小 1矩形扩大 2 圆形缩小 3 圆形扩大 4 下到上刷新 5 上到下刷新
    6 左到右刷新 7 右到左刷新 8 竖百叶窗 9 横百叶窗 10 错位横百叶窗 11 错位竖百叶窗
    12 点扩散 13 左右到中间刷新 14 中间到左右刷新 15 中间到上下 16 上下到中间 17 右下到左上
    18 右上到左下 19 左上到右下 20 左下到右上 21 横条 22 竖条 23 以上22种随机选择一种
  • expires 网页到期时间
  • pragma 禁止缓存和脱机浏览
  • set-cookie Cookie过期自动删除
  • pics-label IE网页评级
  • Content-Security-Policy
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
    对外部资源加载的限制(允许控制从哪里加载资源)
    参考资料
  • x-dns-prefetch-control
    <meta http-equiv="x-dns-prefetch-control" content="off">
    通过设置为 “off” 完全退出 DNS 预取
    <link rel="dns-prefetch" href="//www.spreadfirefox.com?">
    强制查询特定主机名 参考资料

[-]Link

  • stylesheet 可配合条件注释或指定media媒体查询引入样式表
    <link rel="stylesheet" href="">
  • icon 小ICON图标
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico?">
    参考资料1 | 参考资料2
  • dns-prefetch 提前域名解析
    <link rel="dns-prefetch" href="//www.domain1.com?">
    参考资料1 | 参考资料2
  • canonical
    <link rel="canonical" href="https://example.com/2010/06/9-things-to-do-before-entering-social-media.html?">
    有助于防止出现内容重复的问题
    参考资料

[-]Script

  • script 可以写在body区域或底部,推荐放在底部加载
    type : 如果type属性的值,浏览器不认识,那么它不会执行其中的代码。
    integrity : 指定了外部脚本Hash签名,一旦有人改了这个脚本,导致签名不匹配,浏览器就会拒绝加载。
    defer : 延迟加载
    async : 异步加载
    一般来说,如果脚本之间没有依赖关系,就使用async属性,如果脚本之间有依赖关系,就使用defer属性。如果同时使用async和defer属性,后者不起作用,浏览器行为由async属性决定。
    defer与async的区别是:defer要等到整个页面在内存中正常渲染结束(DOM 结构完全生成,以及其他脚本执行完成),才会执行;async一旦下载完,渲染引擎就会中断渲染,执行这个脚本以后,再继续渲染。一句话,defer是“渲染完再执行”,async是“下载完就执行”。另外,如果有多个defer脚本,会按照它们在页面出现的顺序加载,而多个async脚本是不能保证加载顺序的。
  • noscript 禁用脚本提示
  • IE9- IE9-支持HTML5
    IE9-支持媒体查询
    IE9-支持CSS3选择器
    modernizr

[+]Windows

[+]iOS

[+]Other

  • UC Browser
    
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
  • QQ Browser
    
                        
                        
                        
                        
                        
                        
                        

DOM属性-

[-] DOM

[-] Node

  • node.nodeName 返回元素的标记名(大写)。
    如果节点是一个元素节点,则返回标签名;如为属性节点,则返回属性名。
  • node.nodeType 返回元素的节点类型(数值)。
    参考资料
  • node.nodeValue 返回元素的节点值
    需先取到文本节点,再取文本节点的值。
    由于只有Text节点、Comment节点、XML文档的CDATA节点有文本值,因此只有这三类节点的nodeValue可以返回结果,其他类型的节点一律返回null。同样的,也只有这三类节点可以设置nodeValue属性的值。对于那些返回null的节点,设置nodeValue属性是无效的。

[-] NodeList

  • nodelist.item(i) 等同于nodelist[i]
  • nodelist.length 节点列表长度

[-] Document

  • doc.readyState 返回当前文档的状态
    1. uninitalized - 还未开始载入
    2. loading - 载入中
    3. interactive - 已加载,文档与用户可以开始交互
    4. complete - 载入完成
  • doc.referrer 返回载入当前文档的来源文档的URL。
    如果当前文档不是通过超级链接访问的,则为null。
  • doc.activeElement 返回当前获取焦点元素
  • doc.designMode 值为'on'/'off',IE6-10为大写。 参考资料
    控制当前文档是否可编辑,通常用在制作所见即所得编辑器。
    打开iframe元素包含的文档的designMode属性,就能将其变为一个所见即所得的编辑器。
    iframe.contentDocument.designMode = 'on'
  • doc.lastModified 返回文档最后被修改的日期和时间
    10/19/2017 15:24:30
  • doc.cookie 设置或返回与当前文档有关的所有cookie
    key=value;...
  • doc.domain 返回当前文档的域名
    如果无法获取域名,该属性返回null。
  • doc.URL/documentURI 返回文档的URL,必须为大写。
    document.documentURI属性和document.URL属性都返回一个字符串,表示当前文档的网址。不同之处是documentURI属性可用于所有文档(包括 XML 文档),URL属性只能用于 HTML 文档。
  • doc.inputEncoding 返回文档的字符编码
    IE8及以下,Oprea不支持
  • doc.characterSet 返回渲染当前文档的字符集,比如UTF-8、ISO-8859-1。
  • doc.baseURI 返回文档绝对基础URI
    如果无法取到这个值,则返回null。
    该属性为只读。
    IE不支持
  • doc.doctype 返回文档类型声明。
    IE8及以下返回null。支持XML。
  • doc.defaultView 在浏览器中返回document对象所在的window对象,否则返回null。

[-] Element

  • new Image()
    属性 描述
    src 图像src属性值,可读写
    alt 图像alt描述内容
    width 宽度
    height 高度
    naturalWidth 图像的原始宽度,只读
    naturalHeight 图像的原始高度,只读
    complete 返回一个布尔值,表示图表是否已经加载完成
    onload 指定一个图像加载完成后的回调函数
    crossOrigin 图像跨域的CORS设置
    isMap 图像是否为服务器端的image-map,可读写
    useMap 设置图像的usemap属性
  • ele.attributes 返回一个元素的属性类数组对象。
    document.body.attributes[0]
    document.body.attributes.bgcolor
    document.body.attributes['ONLOAD']
  • ele.dataset HTML元素节点的标准属性(即在标准中定义的属性),会自动成为元素节点对象的属性。
    href/src/action/method/htmlfor(label for)/...
    data-* 自定义属性,使用dataset.xxx设置
  • ele.id 设置或返回元素的id
  • ele.tagName 返回指定元素的大写标签名,与nodeName属性的值相等
  • dom.title 设置或返回当前文档/元素的标题
  • ele.accessKey 设置或返回accessKey一个元素。
    document.getElementById('w3c').accessKey="w"
    可使用Alt + accessKey 设置的键位快捷访问该元素。
  • ele.tabIndex 设置或返回元素的标签顺序
    即通过tab键切换时的顺序
    参考资料
  • ele.dir 设置或返回一个元素中的文本方向。
    dir = ltr / rtl
  • ele.ownerDocument 返回当前节点所在的顶层文档对象,即document对象。

[-] Text

  • txt.data data属性等同于nodeValue属性,用来设置或读取Text节点的内容
  • txt.length 返回当前Text节点的文本长度。

[-] Attribute

  • attr.name 返回属性名称
  • attr.value 设置或返回属性值
  • attr.specified 检查属性节点是否存在值,返回布尔值
    注意先需获取到的是属性节点

DOM遍历-

[-] 集合归类

  • HTMLCollection (1)HTMLCollection实例对象的成员只能是Element节点,NodeList实例对象的成员可以包含其他节点。
    (2)HTMLCollection实例对象都是动态集合,节点的变化会实时反映在集合中。NodeList实例对象可以是静态集合(如query方法)。
    (3)HTMLCollection实例对象可以用id属性或name属性引用节点元素,NodeList只能使用数字索引引用。
    var elem = document.forms.namedItem('myForm');
    var elem = document.forms['myForm'];
  • window.document 对于正常的网页,直接使用document或window.document。
    对于iframe载入的网页,使用iframe节点的contentDocument属性。
    对Ajax操作返回的文档,使用XMLHttpRequest对象的responseXML属性。
    对于包含某个节点的文档,使用该节点的ownerDocument属性。
  • doc.documentElement 返回文档的根节点(html元素)
  • doc.body/head 返回文档的body/head元素
  • doc.images 返回文档中所有image对象引用
  • doc.embeds 返回网页中所有嵌入对象,即embed标签
  • doc.links 返回文档中所有的a.href + area标签。
    document.links.$id > document.links.$name 可按id和name访问,同名时id高于name,同id时,取顺序在前的
    document.links[i] 可按索引访问
  • doc.anchors 返回文档中所有的锚点的集合。即带有name属性的a标签。
    document.anchors.length
  • doc.forms 返回文档中所有表单的集合。
    document.forms[0]
    document.forms.name1
  • doc.scripts 返回页面中所有脚本的集合

[-] 层级查找

  • ele.parentNode 返回元素的父节点
  • ele.parentElement 返回元素的父element节点
    如果当前节点没有父节点,或者父节点类型不是Element节点,则返回null。
  • dom.childNodes 返回元素的子节点数组
  • dom.firstChild 返回元素的第一个子节点。
    如果不存在则返回null
  • dom.lastChild 返回元素的最后一个子元素。
  • dom.hasChildNodes() 检查元素是否具有任何子元素,返回布尔值
  • dom.contains(node) 返回一个布尔值,表示参数节点是否为当前节点的后代节点。
    注意,如果将当前节点传入contains方法,会返回true。虽然从意义上说,一个节点不应该包含自身。

[-] 序列查找

  • ele.nextSibling 返回该元素之后紧跟的一个节点(处在同一树层级中)
    如没有则返回null
  • ele.previousSibling 返回该元素之前紧跟的一个节点(处在同一树层级中)
    如没有则返回null

[-] 条件筛选

  • dom.getElementById('id') 返回拥有指定ID的第一个对象的引用。
    如果没有指定ID的元素返回null。
  • dom.getElementsByTagName('tag') 返回带有指定标签名的对象的集合。
    *返回文档的所有元素。
    *返回的元素集合中的0为html
  • dom.getElementsByClassName('cls') 返回文档中所有指定类名的元素集合。
    IE8及以下不支持。
  • dom.getElementsByName('name') 返回带有指定名称的对象的集合。
  • dom.querySelector('cssExp') 返回dom范围中匹配指定css选择器的第一个元素。
    传入的是css选择器,且仅返回第一个元素。
    IE8支持,IE6-7不支持。
  • dom.querySelectorAll('cssExp') 返回dom范围中匹配指定css选择器的全部元素。
    HTML5新引入,IE8不支持。
    此方式生成的集合,无法用.访问到id和name。是nodelist,非HTMLcollection。
    静态集合,非动态。
  • doc.elementFromPoint(x,y) 返回位于页面指定视窗位置最上层的Element子节点。
    如果位于该位置的HTML元素不可返回(比如文本框的滚动条),则返回它的父元素(比如文本框)。如果坐标值无意义(比如负值或超过视口大小),则返回null。

DOM更新-

[-] 文本

  • doc.creatTextNode('str') 创建文本节点
    这个方法可以确保返回的节点,被浏览器当作文本渲染,而不是当作HTML代码渲染。因此,可以用来展示用户的输入,避免XSS攻击。
  • dom.normalize() 合并相邻的文本节点并删除空的文本节点
  • txt.splitText(n) splitText方法将Text节点一分为二,变成两个毗邻的Text节点。它的参数就是分割位置(从零开始),分割到该位置的字符前结束。如果分割位置不存在,将报错。
    分割后,该方法返回分割位置后方的字符串,而原Text节点变成只包含分割位置前方的字符串。
  • ele.textContent 设置或返回节点的文本内容(返回所有子节点的文本)
    textContent属性自动忽略当前节点内部的HTML标签,返回所有文本内容。
    同理对textContent的字符串设置中如有标签,当做字符串处理,不会解析为Html标签
    IE8及以下不支持
  • ele.innerHTML 设置或返回元素的内容
    如果插入的文本包含 HTML 标签,会被解析成为节点对象插入 DOM。注意,如果文本之中含有script标签,虽然可以生成script节点,但是插入的代码不会执行。
  • ele.outerHTML 返回一个字符串,内容为指定元素节点的所有HTML代码,包括它自身和包含的所有子元素。
    被替换后,原变量将保存原信息在内存中
  • window.getSelection() 返回一个Selection对象,表示用户现在选中的文本。
    使用Selction对象的toString方法可以得到选中的文本。

[-] 添加

  • doc.creatElement('tag') 创建元素节点
  • ele.cloneNode([true/false]) 克隆该节点,包括属性和值。
    传入true表示递归复制该节点的所有子孙节点。
  • doc.importNode(node,deep) 把一个节点从另一个文档复制到该文档以便应用。
    第2个参数为必须,true代表还要复制该节点的所有子孙节点。
    IE8及以下不支持。
    参考资料
  • doc.creatDocumentFragment() 创建一个虚拟的节点对象,节点对象包含所有属性和方法。
    var temp=document.createDocumentFragment();
  • doc.creatComment('str') 创建注释节点

[-] 修改

  • dom.appendChild(node) 向目标节点末尾添加新的子节点。 (如为原存在于原文档中的节点则原位置会被移除)
    你可以使用 appendChild() 方法移除元素到另外一个元素。
    如果文档树中已经存在了 newchild,它将从文档树中删除,然后重新插入它的新位置。
    如果 newchild 是 DocumentFragment 节点,则不会直接插入它,而是把它的子节点按序插入当前节点的 childNodes[] 数组的末尾。
  • dom.insertBefore(node,exist) 向目标节点前添加新的节点。
    如果被添加的节点是原文档中的节点,则原节点会被移除。
  • ele.replaceChild(new,old) 将某个子节点替换为另一个。
    它返回被替换走的那个节点

[-] 删除

  • dom.removeChild(node) 删除指定的子节点。
    删除成功则返回被删除的节点,删除失败返回null。
  • dom.remove() 将当前元素节点从DOM树删除

[-] 其它

  • doc.write('exp') 向文档写入内容
  • doc.writeln('exp') 向文档写入内容,并在末尾添加一个换行符
  • doc.open([MIME],[replace]) 打开一个输出流来收集docment.write()方法输出的内容。
    MIMEtype,默认值是 "text/html"。
    replace,当此参数设置后,可引起新文档从父文档继承历史条目。
    它实际上等于清除当前文档,重新写入内容。
  • doc.close() 关闭用 document.open() 方法打开的输出流,并显示选定的数据。

[-] MutationObserver

  • new MutationObserver(fn(arr,obs)) 使用时,首先使用MutationObserver构造函数,新建一个观察器实例,同时指定这个实例的回调函数。
    回调函数,会在每次 DOM 变动后调用。该回调函数接受两个参数,第一个是变动数组,第二个是观察器实例
  • obs.observe(dom,option) observe方法用来开始监听,它接受两个参数
    第一个参数是所要观察的 DOM 节点
    第二个参数是一个配置对象,用来指定所要观察的特定变动
    
        var article = document.querySelector('article');
    
        var  options = {
          'childList': true,
          'attributes':true
        } ;
    
        observer.observe(article, options);
    
    观察器所能观察的 DOM 变动类型(即上面代码的options对象),有以下几种
    childList:子节点的变动。
    attributes:属性的变动。
    characterData:节点内容或节点文本的变动。
    subtree:所有后代节点的变动。
    attributeOldValue:类型为布尔值,表示观察attributes变动时,是否需要记录变动前的属性值。
    characterDataOldValue:类型为布尔值,表示观察characterData变动时,是否需要记录变动前的值。
    attributeFilter:类型为数组,表示需要观察的特定属性(比如['class','src'])
  • obs.disconnect() 停止观察。调用该方法后,DOM 再发生变动,也不会触发观察器
  • obs.takeRecords() 清除变动记录,即不再处理未处理的变动。该方法返回变动记录的数组。
  • MutationRecord DOM 每次发生变化,就会生成一条变动记录。这个变动记录对应一个MutationRecord对象,该对象包含了与变动相关的所有信息。Mutation Observer 处理的是一个个MutationRecord对象所组成的数组。
    type:观察的变动类型(attribute、characterData或者childList)。
    target:发生变动的DOM节点。
    addedNodes:新增的DOM节点。
    removedNodes:删除的DOM节点。
    previousSibling:前一个同级节点,如果没有则返回null。
    nextSibling:下一个同级节点,如果没有则返回null。
    attributeName:发生变动的属性。如果设置了attributeFilter,则只返回预先指定的属性。
    oldValue:变动前的值。这个属性只对attribute和characterData变动有效,如果发生childList变动,则返回null。

DOM操作-

[-] 属性

  • ele.getAttribute('attr') 返回指定元素的属性值
    等同 getAttributeNode('attr').value
  • ele.removeAttribute('attr') 从元素中删除指定的属性
  • ele.setAttribute('attr','val') 设置元素指定的属性值
    IE8及以下不支持
  • ele.hasAttribute('attr') 检测元素是否具有某个属性,返回true/false
    IE8及以下不支持
  • ele.hasAttributes() 检测元素是否具有任何某个属性,返回true/false
    IE8及以下不支持
  • dom.creatAttribute('attr') 创建一个属性节点,并返回该attr对象。
  • ele.removeAttributeNode('attr') 删除指定元素节点并返回移除后的节点
  • ele.setAttributeNode('attr') 设置或改变指定属性节点
    需通过nodeValue来最终改变对应值

[-] 交互

  • ele.focus() 设置元素获取焦点
  • ele.blur() 设置元素移除焦点
  • dom.hasFocus() 检查元素是否获取焦点,返回布尔值
  • ele.contentEditable 设置或返回元素的内容是否可编辑
    返回inherit/true/false
    如果父级元素是可编辑,则子元素内容也是可编辑的
  • ele.isContentEditable 返回元素的内容是否可编辑
    返回true/false

CSS操作-

[-] 类名

  • ele.className 设置或返回元素的class属性,每个class之间用空格分割。
  • ele.classList 返回该元素的类的一个对象。 IE10以下不支持。
    方法 描述
    .value 完整类名
    .add(class1,class2,...) 添加新的类名,如果已经存在则不会添加
    .remove(class1,class2,...) 移除指定类名,如果移除不存在的类名,不会报错
    .toggle(class,true/false) 切换指定类名。
    第一个参数为切换的类名。
    如果存在时,移除并返回false;如果不存在,添加并返回true。
    第二个参数,为强制设置布尔值。
    .contains(class) 返回布尔值,判断指定类名是否存在
    .length 类名个数
    .item(i) / [i] 返回索引上的类名

[-] 样式

  • ele.style[.prop] 设置或返回元素的样式属性
    返回的是一个对象,通过style.classname来设置具体,只取行内。
    其中cssText属性,可以读写或删除整个样式
  • window.getComputedStyle(dom,[':before'])[.prop] 返回一个包含该节点最终样式信息的对象。
    所谓“最终样式信息”,指的是各种CSS规则叠加后的结果。
    getComputedStyle方法还可以接受第二个参数,表示指定节点的伪元素(比如:before、:after、:first-line、:first-letter等)。
  • style.getPropertyValue(prop) 读取某个CSS属性
  • style.setProperty(prop,val) 设置某个CSS属性
  • style.removeProperty(prop) 删除某个CSS属性

[-] 样式表

  • doc.styleSheets 返回网页的所有样式表的类数组对象
    它包括link节点加载的样式表和style节点内嵌的样式表。
    属性 描述 示例
    media media属性表示这个样式表是用于屏幕(screen),还是用于打印(print),或两者都适用(all)。该属性只读,默认值是screen。 document.styleSheets[0].media.mediaText //all
    disabled 一旦样式表设置了disabled属性,这张样式表就将失效。注意,disabled属性只能在JavaScript脚本中设置,不能在HTML语句中设置。 document.querySelector('#linkElement').disabled = 'disabled';
    href href属性是只读属性,返回StyleSheet对象连接的样式表地址。对于内嵌的style节点,该属性等于null。 document.styleSheets[0].href
    type type属性返回StyleSheet对象的type值,通常是text/css document.styleSheets[0].type // "text/css"
    title title属性返回StyleSheet对象的title值。 -
    parentStyleSheet CSS的@import命令允许在样式表中加载其他样式表。parentStyleSheet属性返回包含了当前样式表的那张样式表。如果当前样式表是顶层样式表,则该属性返回null。 -
    ownerNode ownerNode属性返回StyleSheet对象所在的DOM节点,通常是link或style。对于那些由其他样式表引用的样式表,该属性为null。 document.styleSheets[0].ownerNode // [object HTMLLinkElement]
    cssRules cssRules属性指向一个类似数组的对象,里面每一个成员就是当前样式表的一条CSS规则。 sheet.cssRules[0].cssText
    styleSheet.cssRules[0].style.color = 'red';
  • sheet.insertRule('str',n) 在当前样式表的cssRules对象插入CSS规则
  • sheet.deleteRule(n) 删除cssRules对象的CSS规则
  • cssRule.*
    属性 描述
    cssText 返回当前规则的文本
    parentStyleSheet 返回定义当前规则的样式表对象
    parentRule 返回包含当前规则的那条CSS规则。
    type 返回有一个整数值,表示当前规则的类型
    1:样式规则,部署了CSSStyleRule接口
    3:输入规则,部署了CSSImportRule接口
    4:Media规则,部署了CSSMediaRule接口
    5:字体规则,部署了CSSFontFaceRule接口
    selectorText 返回当前规则的选择器 //.class
    style.prop style属性返回一个对象
    CSSStyleDeclaration对象

盒模型-

[-] 尺寸

  • ele.clientWidth 返回内容的可视宽度(不包括边框,边距或滚动条)
    即元素宽度 - 边框 - 边距 - 17px(滚动条)
  • ele.clientHeight 返回元素的可视高度,包括填充,不包括边框+滚动条+边距
    即元素高度 - 边框 - 边距 - 17px(滚动条)
  • ele.scrollWidth 返回元素的宽度,包括填充,不包括边框+滚动条+边距,但包括带滚动条的隐蔽地方
    即当有子元素的溢出宽度时,等于子元素的宽度,否则等于可视宽度
  • ele.scrollHeight 返回元素的高度,包括填充,不包括边框+滚动条+边距,但包括带滚动条的隐蔽地方
    即当有子元素的溢出高度时,等于子元素的高度,否则等于可视高度
  • ele.offsetWidth 返回元素的宽度,包括填充,也包括边框+滚动条,不包括边距
    即元素盒模型宽度
  • ele.offsetHeight 返回元素的高度,包括填充,也包括边框+滚动条,不包括边距
    即元素盒模型高度

[-] 偏移

[-] 滚动

  • ele.scrollLeft 当元素有overflow时生效,设置或返回距左边缘起始点的滚动位置点
  • ele.scrollTop 当元素有overflow时生效,设置或返回距顶部边缘起始点的滚动位置点
  • window.scrollTo(x,y) 把内容滚动到指定的坐标
  • window.scrollBy(x,y) 按照指定的像素值来滚动内容
  • window.pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置
    IE8及以下不支持,用document.documentElement.scrollLeft来替代
  • window.pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置
    IE8及以下不支持,用document.documentElement.scrollTop来替代

[-] window

  • window.innerWidth 返回窗口的文档显示区的宽度(包括滚动条)
    var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  • window.innerHeight 返回窗口的文档显示区的高度(包括滚动条)
    var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

[-] screen

  • screen.width 返回屏幕的总宽度
  • screen.height 返回屏幕的总高度
  • screen.availWidth 返回屏幕的宽度(不包括Windows任务栏)
  • screen.availHeight 返回屏幕的高度(不包括Windows任务栏)

[-] 移动

  • window.moveTo(x,y) 用于移动浏览器窗口到指定位置。它接受两个参数,分别是窗口左上角距离屏幕左上角的水平距离和垂直距离,单位为像素。
  • window.moveBy(x,y) 将窗口移动到一个相对位置。它接受两个参数,分别是窗口左上角向右移动的水平距离和向下移动的垂直距离,单位为像素。

Canvas+

WebGL+

SVG+

MathML+

Object/Embed-

[+] Object

  • object 对象,比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。
    属性 描述
    data 规定对象使用的资源的 URL
    type 规定 data 属性中规定的数据的 MIME 类型
    name 为对象规定名称
    width 对象的宽度
    height 对象的高度
    usemap 规定与对象一同使用的客户端图像映射的名称
    form 规定对象所属的一个或多个表单(h5)
    如果未显示 object 元素,就会执行位于object之间的代码。通过这种方式,我们能够嵌套多个 object 元素(每个对应一个浏览器)。
  • param 为object/applet标签提供参数
    属性 描述
    name 定义参数的名称
    value 描述参数值
  • obj.playState 播放状态,0未开始,1暂停中,2正在播放
  • obj.play() 播放
  • obj.pause() 暂停
  • obj.stop() 停止

[+] Embed

  • embed[h5] 嵌入外部应用或者互动程序(插件)
    属性 描述
    width 规定嵌入内容的宽度
    height 规定嵌入内容的高度
    src 规定被嵌入内容的 URL
    type 规定嵌入内容的 MIME 类型

Video/Audio-

[+] 标签

  • audio
    属性 描述
    autoplay autoplay 自动播放
    controls controls 显示音频控件
    loop loop 自动循环
    muted muted 静音
    src url 音频文件源url
    preload auto - 当页面加载后载入整个音频
    meta - 当页面加载后只载入元数据
    none - 当页面加载后不载入音频
    是否预加载音频
  • video
    属性 描述
    autoplay autoplay 自动播放
    controls controls 显示音频控件
    loop loop 自动循环
    muted muted 静音
    src url 音频文件源url
    preload auto - 当页面加载后载入整个音频
    meta - 当页面加载后只载入元数据
    none - 当页面加载后不载入音频
    是否预加载音频
    poster url 规定视频正在下载时显示的图像,直到用户点击播放按钮
    width/height pixels 设置视频播放器的尺寸
  • source 为媒体元素(比如video和audio)定义媒体资源。
    属性 描述
    src url 规定媒体文件的 URL
    type MIME_type 规定媒体资源的 MIME 类型
    media media_query 规定媒体资源的类型,供浏览器决定是否下载
  • track 为媒体元素(比如video和audio)规定外部文本轨道。
    属性 描述
    default default 规定该轨道是默认的。如果用户没有选择任何轨道,则使用默认轨道。
    src url 规定轨道文件的 URL
    label text 规定文本轨道的标签和标题
    kind captions/chapters/descriptions/metadata/subtitles 规定文本轨道的文本类型 参考资料
    srclang language_code 规定轨道文本数据的语言。

[-] 属性-进度

  • media.networkState 返回音频/视频的当前网络状态
    0 = NETWORK_EMPTY - 音频/视频尚未初始化
    1 = NETWORK_IDLE - 音频/视频是活动的且已选取资源,但并未使用网络
    2 = NETWORK_LOADING - 浏览器正在下载数据
    3 = NETWORK_NO_SOURCE - 未找到音频/视频来源
  • media.readyState 回音频/视频的当前就绪状态
    0 = HAVE_NOTHING - 没有关于音频/视频是否就绪的信息
    1 = HAVE_METADATA - 关于音频/视频就绪的元数据
    2 = HAVE_CURRENT_DATA - 关于当前播放位置的数据是可用的,但没有足够的数据来播放下一帧/毫秒
    3 = HAVE_FUTURE_DATA - 当前及至少下一帧的数据是可用的
    4 = HAVE_ENOUGH_DATA - 可用数据足以开始播放
  • media.currentTime 设置或返回音频/视频播放的当前位置(以秒计)。
    当设置该属性时,播放会跳跃到指定的位置。
  • media.duration 返回当前音频/视频的长度,以秒计
    如果未设置音频/视频,则返回 NaN
  • media.playbackspeed 设置或返回音频/视频的当前播放速度
    1.0 正常速度
    0.5 半速(更慢)
    2.0 倍速(更快)
    -1.0 向后,正常速度
    -0.5 向后,半速
  • media.buffered 表示音频/视频的已缓冲部分
    buffered 属性返回 TimeRanges 对象。TimeRanges 对象表示用户的音频/视频缓冲范围。
    缓冲范围指的是已缓冲音频/视频的时间范围。如果用户在音频/视频中跳跃播放,会得到多个缓冲范围。
    TimeRanges.length - 获得音频/视频中已缓冲范围的数量
    TimeRanges.start(index) - 获得某个已缓冲范围的开始位置
    TimeRanges.end(index) - 获得某个已缓冲范围的结束位置
  • media.played 返回表示用户已经播放或看到的音频/视频范围的TimeRanges 对象。
    length - 获得音频/视频中已播范围的数量
    start(index) - 获得某个已播范围的开始位置
    end(index) - 获得某个已播范围的结束位置
  • media.seekable seekable 属性返回 TimeRanges 对象。
    TimeRanges 对象表示音频/视频中用户可寻址的范围。
    可寻址范围指的是用户在音频/视频中可寻址(移动播放位置)的时间范围。
    对于非流视频,通常可以寻址到视频中的任何位置,即使其尚未完成缓冲。
    length - 获得音频/视频中可寻址范围的数量
    start(index) - 获得可寻址范围的开始位置
    end(index) - 获得可寻址范围的结束位置

[-] 属性-状态

  • media.src 设置或返回音频/视频的当前来源
  • media.currentSrc 返回当前音频/视频的 URL
  • media.volume 设置或返回音频/视频的当前音量,0~1
  • media.textTracks 返回 TextTrackList 对象。
    TextTrackList 对象表示音频/视频的可用文本轨道。
    参考资料
  • media.preload 设置或返回是否在页面加载后立即加载音频/视频。
    auto:指示一旦页面加载,则开始加载音频/视频。
    metadata:指示当页面加载后仅加载音频/视频的元数据。
    none:指示页面加载后不应加载音频/视频。
  • media.mediaGroup 设置或返回音频/视频所属的媒体组合的名称
  • media.controls 值:true/false
    设置或返回音频/视频是否显示控件
  • media.autoplay 值:true/false
    设置或返回是否在加载完成后随即播放音频/视频
  • media.loop 值:true/false
    设置或返回音频/视频是否应该在结束时重新播放
  • media.muted 值:true/false
    设置或返回音频/视频是否应该被静音
  • media.defaultMuted 值:true/false
    设置或返回音频/视频是否默认静音
    设置该属性仅会改变默认的静音状态,而不是当前的。要改变当前的静音状态,请使用 muted 属性。
  • media.paused 值:true/false
    返回音频/视频是否已暂停
  • media.ended 值:true/false
    返回音频/视频的播放是否已结束
  • media.seeking 值:true/false
    seeking 属性返回用户目前是否正在音频/视频中寻址
    寻址中(Seeking)指的是用户在音频/视频中移动/跳跃到新的位置。

[-] 方法

  • media.canPlayType() 检测浏览器是否能播放指定的音频/视频类型
    返回值:
    "probably" - 浏览器最可能支持该音频/视频类型
    "maybe" - 浏览器也许支持该音频/视频类型
    "" - (空字符串)浏览器不支持该音频/视频类型
    参考资料
  • media.load() 重新加载
  • media.play() 开始播放
  • media.pause() 暂停播放

[+] 事件-加载

  • loadstart 当加载过程开始时,浏览器开始寻找指定的音频/视频时
  • durationchange 当指定音频/视频的时长数据发生变化时,会发生 durationchange 事件
    当音频/视频加载后,时长将由 "NaN" 变为音频/视频的实际时长
  • loadedmetadata 当指定的音频/视频的元数据已加载时,会发生 loadedmetadata 事件。
    音频/视频的元数据包括:时长、尺寸(仅视频)以及文本轨道。
  • loadeddata 当当前帧的数据已加载,但没有足够的数据来播放指定音频/视频的下一帧时,会发生 loadeddata 事件。
  • waiting 当视频由于需要缓冲下一帧而停止时触发
  • progress 当浏览器正在下载指定的音频/视频时,会发生 progress 事件
  • canplay 当浏览器能够开始播放指定的音频/视频时,会发生 canplay 事件
  • canplaythrough 当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时,会发生 canplaythrough 事件。

[+] 事件-状态

  • play play 事件在音频/视频(audio/video)开始播放时触发
  • playing playing 事件在音频/视频(audio/video)因缓冲而暂停或停止后已就绪时触发
  • pause pause 事件在音频/视频(audio/video)暂停时触发
  • ended ended 事件在音频/视频(audio/video)播放完成后触发

[+] 事件-交互

  • ratechange ratechange 事件在音频/视频(audio/video)播放速度发生改变时触发(如用户切换到慢速或快速播放模式)
  • seeking 当用户开始移动/跳跃到音频/视频中的新位置时触发
  • seeked 当用户已移动/跳跃到音频/视频中的新位置时触发
  • timeupdate 当目前的播放位置已更改时触发
  • volumechange 当音量已更改时触发

[+] 事件-异常

  • emptied 当目前的播放列表为空时触发
  • abort 多媒体数据终止下载时触发
  • stalled 当浏览器尝试获取媒体数据,但数据不可用时触发
  • error 当在音频/视频加载期间发生错误时触发
  • suspend 媒体数据被阻止加载时触发。 可以是完成加载后触发,或者因为被暂停的原因。

[+] 特殊

  • ios,safari 1.在ios,Safari下,不能自动播放audio,要求与用户交互后才加载。可关联touchend事件
    2.ios,Safari同一时间只能播放一个音频/视频,使用audio sprite 参考资料

[+] 其它更多

WebRTC-

[-] WebRTC

  • navigator.getUserMedia(option,sfn,efn) getUserMedia的第一个参数是一个对象,表示要获取哪些多媒体设备;
    第2个参数是一个回调函数,在获取多媒体设备成功时调用;
    第3个参数也是一个回调函数,在取多媒体设备失败时调用。
    参考资料
  • MediaStreamTrack.getSources 如果本机有多个摄像头/麦克风,这时就需要使用MediaStreamTrack.getSources方法指定,到底使用哪一个摄像头/麦克风。
  • SimpleWebRTC

Event-

[-] 监听触发

  • dom.addEventListener(type,fn(e)[,false]) 添加事件监听
    内部的this对象总是指向触发事件的那个节点。
    IE8=-:attachEvent()
    
                                if (document.addEventListener) {
                                    document.addEventListener("click", myFunction);
                                } else if (document.attachEvent) {
                                    document.attachEvent("onclick", myFunction);
                                }
                                function myFunction() {
                                    alert("Hello World!");
                                }
                            

    type:事件名称,大小写敏感。
    listener:监听函数。事件发生时,会调用该监听函数。
    useCapture:布尔值,表示监听函数是否在捕获阶段(capture)触发(参见后文《事件的传播》部分),默认为false(监听函数只在冒泡阶段被触发)。老式浏览器规定该参数必写,较新版本的浏览器允许该参数可选。为了保持兼容,建议总是写上该参数。
  • dom.removeEventListener(type,fn(e)[,false]) 移除事件监听
    IE8=-:detachEvent()
    两个参数均为必须,指定要移除的事件及要移除的函数。
  • dom.dispatchEvent(event) 触发事件,参数是一个Event对象的实例
    dispatchEvent方法在当前节点上触发指定事件,从而触发监听函数的执行。该方法返回一个布尔值,只要有一个监听函数调用了Event.preventDefault(),则返回值为false,否则为true。
    
        para.addEventListener('click', hello, false);
        var event = new Event('click');
        para.dispatchEvent(event);
    
  • bind HTML中:
    JavaScript 中:
    object.onclick=function(){..};
    JS中监听:
    object.addEventListener('click',fn)

    当监听函数部署在Element节点的on-属性上面,this不会指向触发事件的元素节点,除非函数内容也写在标签中写明。 参考资料

[-] 自定义事件

  • new CustomEvent(type,option) 参考资料
    CustomEvent构造函数的第一个参数是事件名称,第二个参数是一个对象,可传递数据
    IE模拟支持
    
    (function () {
      function CustomEvent ( event, params ) {
        params = params || { bubbles: false, cancelable: false, detail: undefined };
        var evt = document.createEvent( 'CustomEvent' );
        evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
        return evt;
       }
    
      CustomEvent.prototype = window.Event.prototype;
    
      window.CustomEvent = CustomEvent;
    })();
    
  • document.createEvent($etype) var event = document.createEvent('Event')
    createEvent方法接受一个字符串作为参数,可能的值参见下表“数据类型”一栏。使用了某一种“事件类型”,就必须使用对应的事件初始化方法。
    事件类型 事件初始化方法
    UIEvents event.initUIEvent
    MouseEvents event.initMouseEvent
    MutationEvents event.initMutationEvent
    HTMLEvents event.initEvent
    Event event.initEvent
    CustomEvent event.initCustomEvent
    KeyboardEvent event.initKeyEvent
  • event.initEvent(type,true,true,data) 事件对象的initEvent方法,用来初始化事件对象,还能向事件对象添加属性。该方法的参数必须是一个使用Document.createEvent()生成的Event实例,而且必须在dispatchEvent方法之前调用。
    
        var event = document.createEvent('Event');
        event.initEvent('my-custom-event', true, true, {foo:'bar'});
        someElement.dispatchEvent(event);
    
    4个参数:
    type:事件名称,格式为字符串。
    bubbles:事件是否应该冒泡,格式为布尔值。可以使用event.bubbles属性读取它的值。
    cancelable:事件是否能被取消,格式为布尔值。可以使用event.cancelable属性读取它的值。
    option:为事件对象指定额外的属性。
  • UIEvent 参考资料

[-] 事件对象

  • new Event(type[,option]) 参考资料
    事件发生以后,会生成一个事件对象,作为参数传给监听函数。浏览器原生提供一个Event对象,所有的事件都是这个对象的实例,或者说继承了Event.prototype对象。Event对象本身就是一个构造函数,可以用来生成新的实例。
    bubbles:布尔值,可选,默认为false,表示事件对象是否冒泡。
    cancelable:布尔值,可选,默认为false,表示事件是否可以被取消。
    
    var ev = new Event(
      'look',
      {
        'bubbles': true,
        'cancelable': false
      }
    );
    document.dispatchEvent(ev);
    
    IE8及以下版本,事件对象不作为参数传递,而是通过window对象的event属性读取,并且事件对象的target属性叫做srcElement属性。所以,以前获取事件信息,往往要写成下面这样。
    
    function myEventHandler(event) {
      var actualEvent = event || window.event;
      var actualTarget = actualEvent.target || actualEvent.srcElement;
      // ...
    }
    
  • e.type 返回当前 Event 对象表示的事件的名称
  • e.target 返回触发此事件的元素(事件的目标节点)
  • e.currentTarget 返回其事件监听器触发该事件的元素,不一定是点击的元素,是最终监听的元素
  • e.bubbles 返回布尔值,指示事件是否是起泡事件类型
  • e.cancelable 返回布尔值,指示事件是否可拥可取消的默认动作
  • e.defaultPrevented 返回一个布尔值,表示该事件是否调用过preventDefault方法
  • e.timeStamp 返回事件生成的日期和时间
    该属性返回的是一个高精度时间戳,也就是说,毫秒之后还带三位小数,精确到微秒。并且,这个值不再从Unix纪元开始计算,而是从PerformanceTiming.navigationStart开始计算,即表示距离用户导航至该网页的时间。如果想将这个值转为Unix纪元时间戳,就要计算event.timeStamp + performance.timing.navigationStart。
  • e.isTrusted 返回一个布尔值,表示该事件是否为真实用户触发。
  • e.eventPhase 返回事件传播的当前阶段
    0:事件没有发生
    1:从window对象传导到目标节点,称为“捕获阶段”(capture phase)。
    2:在目标节点上触发,称为“目标阶段”(target phase)。
    3:从目标节点传导回window对象,称为“冒泡阶段”(bubbling phase)。
  • e.preventDefault() 通知浏览器不要执行与事件关联的默认动作
  • e.stopPropagation() 阻止冒泡.
    iPhone默认阻止冒泡,故慎用事件委托,给指定元素添加手型样式可开启冒泡,让其认可该为一个可点击区域。
  • e.stopImmediatePropagation() stopPropagation方法只会阻止当前监听函数的传播,不会阻止节点上的其他click事件的监听函数。如果想要不再触发那些监听函数,可以使用stopImmediatePropagation方法。

加载事件-

[-] 进度事件

  • new ProgressEvent 进度事件用来描述一个事件进展的过程,比如XMLHttpRequest对象发出的HTTP请求的过程、img、audio、video、style、link加载外部资源的过程。下载和上传都会发生进度事件。
    lengthComputable
    返回一个布尔值,表示当前进度是否具有可计算的长度。如果为false,就表示当前进度无法测量。
    total
    返回一个数值,表示当前进度的总长度。如果是通过HTTP下载某个资源,表示内容本身的长度,不含HTTP头部的长度。如果lengthComputable属性为false,则total属性就无法取得正确的值。
    loaded
    返回一个数值,表示当前进度已经完成的数量。该属性除以total属性,就可以得到目前进度的百分比。
  • abort 当进度事件被中止时触发。如果发生错误,导致进程中止,不会触发该事件。
  • error 由于错误导致资源无法加载时触发
    包括img/input-type-img/object/script/style/body/frameset等
    不支持冒泡,不可取消
  • load 进度成功结束时触发
    有时候,图片加载会在脚本运行之前就完成,尤其是当脚本放置在网页底部的时候,因此有可能使得load和error事件的监听函数根本不会被执行。所以,比较可靠的方式,是用complete属性先判断一下是否加载完成。
    
        function loaded() {
          // code after image loaded
        }
    
        if (image.complete) {
          loaded();
        } else {
          image.addEventListener('load', loaded);
        }
    
    由于DOM没有提供像complete属性那样的,判断是否发生加载错误的属性,所以error事件的监听函数最好放在img元素的HTML属性中,这样才能保证发生加载错误时百分之百会执行。
    
        
    
  • loadstart 进度开始时触发
  • loadend 进度停止时触发,发生顺序排在error事件\abort事件\load事件后面
  • progress 当操作处于进度之中,由传输的数据块不断触发
  • timeout 进度超过限时触发

[-] 文档事件

  • DOMContentLoaded 页面解析完成(IE9+) 参考资料
    当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架de完成加载。
    DOM文档加载的步骤为:
    1. 解析HTML结构。
    2. 加载外部脚本和样式表文件。
    3. 解析并执行脚本代码。
    4. DOM树构建完成。//DOMContentLoaded
    5. 加载图片等外部文件。
    6. 页面加载完毕。//load

    注意,网页的JavaScript脚本是同步执行的,所以定义DOMContentLoaded事件的监听函数,应该放在所有脚本的最前面。否则脚本一旦发生堵塞,将推迟触发DOMContentLoaded事件。
    IE8及以下不支持
  • readystatechange readystatechange事件发生在Document对象和XMLHttpRequest对象,当它们的readyState属性发生变化时触发。
    IE8不支持DOMContentLoaded事件,但是支持这个事件。因此,可以使用readystatechange事件,在低版本的IE中代替DOMContentLoaded事件。
  • beforeunload 该事件在即将离开页面(刷新或关闭)时触发
    只要在该事件的回调函数中,调用了event.preventDefault(),或者event.returnValue属性的值是一个非空的值,就会自动跳出一个确认框,让用户确认是否关闭网页。如果用户点击“取消”按钮,网页就不会关闭。
    
        window.addEventListener('beforeunload', function (e) {
          var confirmationMessage = '确认关闭窗口?';
    
          e.returnValue = confirmationMessage;
          return confirmationMessage;
        });;
    
  • load/error load事件在页面加载成功时触发,error事件在页面加载失败时触发。
    注意,页面从浏览器缓存加载,并不会触发load事件。
  • pageshow/pagehide 该事件在用户访问页面时触发、离开当前网页跳转到另外一个页面时触发
    类似于 onload 事件,onload 事件在页面第一次加载时触发, onpageshow 事件在每次加载页面时触发,即 onload 事件在页面从浏览器缓存中读取时不触发。第一次加载时,它的触发顺序排在load事件后面。
    e.persisted ? true/false
    为了查看页面是直接从服务器上载入还是从缓存中读取,你可以使用 PageTransitionEvent 对象的 属性来判断。 如果页面从浏览器的缓存中读取该属性返回 ture,否则返回 false。
    IE10及以下不支持
  • scroll 当文档被滚动时发生的事件
    由于该事件会连续地大量触发,所以它的监听函数之中不应该有非常耗费计算的操作。推荐的做法是使用requestAnimationFrame或setTimeout控制该事件的触发频率,然后可以结合customEvent抛出一个新事件。
    
        (function() {
          var throttle = function(type, name, obj) {
            var obj = obj || window;
            var running = false;
            var func = function() {
              if (running) { return; }
              running = true;
              requestAnimationFrame(function() {
                obj.dispatchEvent(new CustomEvent(name));
                running = false;
              });
            };
            obj.addEventListener(type, func);
          };
    
          // 将scroll事件重定义为optimizedScroll事件
          throttle('scroll', 'optimizedScroll');
        })();
    
        window.addEventListener('optimizedScroll', function() {
          console.log("Resource conscious scroll callback!");
        });
    
  • resize 窗口或框架被重新调整大小(window、body、frameset)
    该事件也会连续地大量触发,所以最好像上面的scroll事件一样,通过throttle函数控制事件触发频率。
  • hashchange 该事件在当前 URL 的锚部分发生修改时触发
    e.oldURL 变化前URL
    e.newURL 变化后URL
    同源政策中iframe通讯的应用

交互事件-

[-] 焦点事件

  • focus 对象获得焦点时发生,不支持冒泡
    通常用于 input, select, 和a.
    由于focus和blur事件不会冒泡,只能在捕获阶段触发,所以addEventListener方法的第三个参数需要设为true。
  • blur 对象失去焦点时发生,不支持冒泡
    经常用于Javascript验证代码,一般用于表单输入框
  • focusin 元素即将获取焦点时触发,支持冒泡,Firefox不支持
  • focusout 元素即将失去焦点时触发,支持冒泡,Firefox不支持
  • e.target 返回事件的目标节点
  • e.relatedTarget 返回一个element节点
    事件类型 相关节点
    focusin 失去焦点的节点
    focusout 将要接受焦点的节点

[-] 表单事件

  • change 表单元素的内容改变时触发
    域的内容改变时发生,也可用于单选框与复选框改变后触发的事件。
    常用于input, keygen, select, textarea。
    change事件与input事件的最大不同,就是不会连续触发,只有当全部修改完成时才会触发
    激活单选框(radio)或复选框(checkbox)时触发。
    用户提交时触发。比如,从下列列表(select)完成选择,在日期或文件输入框完成选择。
    当文本框或textarea元素的值发生改变,并且丧失焦点时触发。
  • input 元素获取用户输入时触发
    该事件仅在input或textarea元素的值发生改变时触发,打开contenteditable属性的元素,只要值发生变化,也会触发input事件。。
    input事件的一个特点,就是会连续触发,比如用户每次按下一次按键,就会触发一次input事件。
    oninput事件在元素值发生变化是立即触发,onchange在元素失去焦点时触发
    IE8及以下不支持
  • select 仅在“文本框”(input/textarea)中的文本被选中时发生
  • reset 表单重置时触发
  • submit 在表单提交时触发
    注意,submit事件的发生对象是form元素,而不是button元素(即使它的类型是submit),因为提交的是表单,而不是按钮。

[-] 剪贴板事件

  • copy 用户拷贝元素上的内容时触发(包括img)
  • cut 用户剪切元素内容时触发
    对于不可编辑的元素,除非设置contenteditable 为 "true"
  • paste 用户粘贴元素内容时触发
    对于不可编辑的元素,除非设置contenteditable 为 "true"
  • e.clipboardData 该属性存放剪贴的数据,只读属性

其它事件-

[-] 动画事件

  • animationstart css动画开始时触发
    webkitAnimationStart / mozAnimationStart
  • animationiteration css动画重复播放时触发
    webkitAnimationInteration / mozAnimationInteration
  • animationend css动画结束时触发
    webkitAnimationEnd / mozAnimationEnd
  • transitionend css完成过渡后触发
    如果过渡在完成前移除,例如 CSS transition-property 属性被移除,过渡事件将不被触发
    webkitTransitionEnd / mozTransitionEnd / oTransitionEnd

[-] 其它事件

  • message 该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发
  • toggle 该事件在用户打开或关闭
    元素时触发
  • more..

鼠标键盘事件-

[-] 鼠标事件类型

  • click 点击事件
    鼠标左键/中间:onmousedown -> onmouseup -> onclick
    鼠标右键:onmousedonw -> onmouseup -> oncontextmenu
  • dbclick 双击事件
  • mousedown 鼠标按下
  • mouseup 鼠标按键被松开
  • contextmenu 在用户点击鼠标右键打开上下文菜单时触发
  • mouseover 鼠标移到某元素之上,支持冒泡
  • mouseout 鼠标从某元素移开,支持冒泡
  • mouseenter 鼠标移到某元素之上,不支持冒泡,不可取消
  • mouseleave 鼠标从某元素移开,不支持冒泡,不可取消
  • mousemove 鼠标被移动

[-] 鼠标事件对象

  • new MouseEvent(typeArg, mouseEventInit) 鼠标事件,第一个参数是事件名称,第二个参数是一个事件初始化对象。 参考资料
  • e.button 返回当事件被触发时,哪个鼠标按钮被点击
    -1没有按下
    0左键,1中键,2右键
    IE8及-:1左键,4中键,2右键
  • e.buttons buttons属性返回一个3个比特位的值,表示同时按下了哪些键。它用来处理同时按下多个鼠标键的情况。
    1:二进制为001,表示按下左键。
    2:二进制为010,表示按下右键。
    4:二进制为100,表示按下中键或滚轮键。
  • e.clientX/clientY 返回当事件被触发时,鼠标指针在浏览器中的水平/垂直坐标
  • e.screenX/screenY 返回当事件被触发时,鼠标指针在屏幕中的水平/垂直坐标
  • e.movementX/movementY 返回一个水平位移,单位为像素,表示当前位置与上一个mousemove事件之间的水平/垂直距离
  • e.relatedTarget 返回事件的次要相关节点。对于那些没有次要相关节点的事件,该属性返回null。
    事件名称 target属性 relatedTarget属性
    focusin 接受焦点的节点 丧失焦点的节点
    focusout 丧失焦点的节点 接受焦点的节点
    mouseenter 将要进入的节点 将要离开的节点
    mouseleave 将要离开的节点 将要进入的节点
    mouseout 将要离开的节点 将要进入的节点
    mouseover 将要进入的节点 将要离开的节点
    dragenter 将要进入的节点 将要离开的节点
    dragexit 将要离开的节点 将要进入的节点
  • e.detail 属性返回一个数值,表示事件的某种信息。具体含义与事件类型有关,对于鼠标事件,表示鼠标按键在某个位置按下的次数,比如对于dblclick事件,detail属性的值总是2。

[-] 滚轮事件

  • wheel 该事件在鼠标滚轮在元素上下滚动时触发。
  • new WheelEvent("syntheticWheel",option) 浏览器提供一个WheelEvent构造函数,可以用来生成滚轮事件的实例。它接受两个参数,第一个是事件名称,第二个是配置对象。
    该事件除了继承了MouseEvent、UIEvent、Event的属性,还有几个自己的属性。
  • e.deltaX 返回一个数值,表示滚轮的水平滚动量。
  • e.deltaY 返回一个数值,表示滚轮的垂直滚动量。
  • e.deltaZ 返回一个数值,表示滚轮的Z轴滚动量。
  • e.deltaMode 返回一个数值,表示滚动的单位,适用于上面三个属性。0表示像素,1表示行,2表示页。

[-] 键盘事件类型

  • keydown 某个键盘按键被按下
  • keypress 某个键盘按键被按下并松开
    onkeydown -> onkeypress -> onkeyup
    在所有浏览器中 onkeypress 事件不是适用于所有按键,如: ALT, CTRL, SHIFT, ESC
    如果用户一直按键不松开,就会连续触发键盘事件,触发的顺序如下
    (keydown -> keypress)*n ->keyup
  • keyup 某个键盘按键被松开

[-] 键盘事件对象

  • new KeyboardEvent(typeArg, KeyboardEventInit) 参考资料
  • e.key 在按下按键时返回按键的标识符
    如果同时按下一个控制键和一个符号键,则返回符号键的键名。比如,按下Ctrl+a,则返回a。如果无法识别键名,则返回字符串Unidentified。
    Backspace,Tab,Enter,Shift,Control,Alt,CapsLock,Esc,Spacebar,PageUp,PageDown,End,Home,Left,Right,Up,Down,PrintScreen,Insert,Del,Win,F1~F12,NumLock,Scroll
  • e.keyCode 返回按键事件触发的键的值的字符代码 参考资料
  • e.altKey/ctrlKey/shiftKey/metaKey
    属性 返回值 描述
    altKey true/false/1/0 返回当事件被触发时,"ALT" 是否被按下
    ctrlKey true/false/1/0 返回当事件被触发时,"CTRL" 键是否被按下
    shiftKey true/false/1/0 返回当事件被触发时,"SHIFT" 键是否被按下
    metaKey true/false/1/0 Meta 键(Mac键盘是一个四瓣的小花,Windows键盘是Windows键)

Touch-

[-] Touch事件类型

  • touchstart 用户接触触摸屏时触发
  • touchend 用户不再接触触摸屏时(或者移出屏幕边缘时)触发
  • touchmove 用户移动触摸点时触发
    如果触摸的半径、角度、力度发生变化,也会触发该事件
  • touchcancel 当触点由于某些原因被中断时触发

[-] Touch对象

  • new Touch() Touch对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。
  • touch.identifier identifier属性表示Touch实例的独一无二的识别符。它在整个触摸过程中保持不变。
  • touch.target target属性返回一个Element节点,代表触摸发生的那个节点。
  • touch.screenX/screenY 触摸点相对于屏幕左上角的横坐标和纵坐标,与页面是否滚动无关。
  • touch.client/clientY 表示触摸点相对于浏览器视口左上角的横坐标和纵坐标,与页面是否滚动无关。
  • touch.pageX/pageY 表示触摸点相对于当前页面左上角的横坐标和纵坐标,包含了页面滚动带来的位移。
  • touch.radiusX/radiusY/rotationAngle radiusX属性和radiusY属性,分别返回触摸点周围受到影响的椭圆范围的X轴和Y轴,单位为像素
    rotationAngle属性表示触摸区域的椭圆的旋转角度,单位为度数,在0到90度之间。
    上面这三个属性共同定义了用户与屏幕接触的区域,对于描述手指这一类非精确的触摸,很有帮助。指尖接触屏幕,触摸范围会形成一个椭圆,这三个属性就用来描述这个椭圆区域。
  • touch.force force属性返回一个0到1之间的数值,表示触摸压力。0代表没有压力,1代表硬件所能识别的最大压力。

[-] TouchList对象

  • TouchList TouchList对象是一个类似数组的对象,成员是与某个触摸事件相关的所有触摸点。比如,用户用三根手指触摸,产生的TouchList对象就有三个成员,每根手指对应一个Touch对象。
  • touchList.length 返回touchList对象的成员数量
  • touchList.indentified(id) 列表中标示符与指定值匹配的第一个Touch 对象会被返回
  • touchList.item(index) 返回列表中以指定值作为索引的 Touch 对象

[-] TouchEvent对象

  • new TouchEvent() TouchEvent对象继承Event对象和UIEvent对象,表示触摸引发的事件。
  • touchEvent.type 触摸事件的类型
  • touchEvent.touches 返回一个TouchList对象,当前屏幕上所有触摸点的集合列表
    参考资料
  • touchEvent.targetTouches 返回一个TouchList对象,绑定事件的那个节点上的触摸点的集合列表
  • touchEvent.changedTouches 返回一个TouchList对象,触发事件时改变的触摸点的集合
    对于touchstart事件,它代表被激活的触摸点;对于touchmove事件,代表发生变化的触摸点;对于touchend事件,代表消失的触摸点(即不再被触碰的点)
  • touchEvent.altKey/ctrlKey/metaKey/shiftKey 返回一个布尔值,表示触摸的同时,是否按下某个键。

[-] 开源库

Drag-

[-] Drag事件类型

  • drag 拖拉过程中,在被拖拉的节点上持续触发
    拖拉过程只触发以下这些拖拉事件,尽管鼠标在移动,但是鼠标事件不会触发。
    将文件从操作系统拖拉进浏览器,不会触发dragStart和dragend事件。
    dragenter和dragover事件的监听函数,用来指定可以放下(drop)拖拉的数据。由于网页的大部分区域不适合作为drop的目标节点,所以这两个事件的默认设置为当前节点不允许drop。如果想要在目标节点上drop拖拉的数据,首先必须阻止这两个事件的默认行为,或者取消这两个事件。
  • dragstart 拖拉开始时在被拖拉的节点上触发
    该事件的target属性是被拖拉的节点。
    通常应该在这个事件的监听函数中,指定拖拉的数据。
  • dragend 拖拉结束时(释放鼠标键或按下escape键)在被拖拉的节点上触发
    该事件的target属性是被拖拉的节点。
    它与dragstart事件,在同一个节点上触发。不管拖拉是否跨窗口,或者中途被取消,dragend事件总是会触发的。
  • dragenter 拖拉进入当前节点时,在当前节点上触发
    该事件的target属性是当前节点。
    通常应该在这个事件的监听函数中,指定是否允许在当前节点放下(drop)拖拉的数据。如果当前节点没有该事件的监听函数,或者监听函数不执行任何操作,就意味着不允许在当前节点放下数据。在视觉上显示拖拉进入当前节点,也是在这个事件的监听函数中设置。
  • dragover 拖拉到当前节点上方时,在当前节点上持续触发
    该事件的target属性是当前节点。
    该事件与dragenter事件基本类似,默认会重置当前的拖拉事件的效果(DataTransfer对象的dropEffect属性)为none,即不允许放下被拖拉的节点,所以如果允许在当前节点drop数据,通常会使用preventDefault方法,取消重置拖拉效果为none。
  • dragleave 拖拉离开当前节点范围时,在当前节点上触发
    该事件的target属性是当前节点。
    在视觉上显示拖拉离开当前节点,就在这个事件的监听函数中设置。
  • dragexit 当元素不再是拖动操作的选择目标时触发此事件
  • drop 被拖拉的节点或选中的文本,释放到目标节点时,在目标节点上触发。
    注意,如果当前节点不允许drop,即使在该节点上方松开鼠标键,也不会触发该事件。如果用户按下Escape键,取消这个操作,也不会触发该事件。该事件的监听函数负责取出拖拉数据,并进行相关处理。

[-] Drag事件对象

  • new DragEvent() 继承MouseEvent对象,因此也就继承了UIEvent和Event对象。 参考资料
    element节点默认不可拖拉,如果不取消拖拉事件或者阻止默认行为,就不可能在div节点上drop被拖拉的节点。
  • dragEvent.DataTransfer 参考资料
    所有的拖拉事件都有一个dataTransfer属性,用来保存需要传递的数据。这个属性的值是一个DataTransfer对象。
    拖拉的数据保存两方面的数据:数据的种类(又称格式)和数据的值。数据的种类是一个MIME字符串,比如 text/plain或者image/jpeg,数据的值是一个字符串。

[-] DataTransfer对象

  • dataTransfer.dropEffect dropEffect属性一般在dragenter和dragover事件的监听函数中设置
    描述
    copy 复制被拖拉的节点
    move 移动被拖拉的节点
    link 创建指向被拖拉的节点的链接
    none 无法放下被拖拉的节点
  • dataTransfer.effectAllowed 设置本次拖拉中允许的效果
    描述
    copy 复制被拖拉的节点
    move 移动被拖拉的节点
    link 创建指向被拖拉的节点的链接
    copyLink 允许copy或link
    copyMove 允许copy或move
    linkMove 允许link或move
    all 允许所有效果
    uninitialized 默认值,等同于all
    none 无法放下被拖拉的节点
  • dataTransfer.files files属性是一个FileList对象,包含一组本地文件,可以用来在拖拉操作中传送。如果本次拖拉不涉及文件,则属性为空的FileList对象。
  • dataTransfer.types types属性是一个数组,保存每一次拖拉的数据格式,比如拖拉文件,则格式信息就为File。
  • dataTransfer.setData(type,val) 设置事件所带有的指定类型的数据。它接受两个参数,第一个是数据类型,第二个是具体数据。
  • dataTransfer.getData(type) 返回事件所带的指定类型的数据,通常是用setData方法添加的数据.
    如果指定类型的数据不存在,则返回空字符串。通常只有drop事件触发后,才能取出数据。如果取出另一个域名存放的数据,将会报错。
  • dataTransfer.clearData(type) 删除事件所带的指定类型的数据。
    如果没有指定类型,则删除所有数据。如果指定类型不存在,则原数据不受影响。
  • dataTransfer.setDragImage(img,x,y) 拖动过程中(dragstart事件触发后),浏览器会显示一张图片跟随鼠标一起移动,表示被拖动的节点。这张图片是自动创造的,通常显示为被拖动节点的外观,不需要自己动手设置。setDragImage方法可以用来自定义这张图片,它接受三个参数,第一个是img图片元素或者canvas元素,如果省略或为null则使用被拖动的节点的外观,第二个和第三个参数为鼠标相对于该图片左上角的横坐标和右坐标。

Window-

[-] 渲染

  • window.requestAnimationFrame(fn) 一般浏览器是每秒60帧,即显示频率是16.7ms,这也是为何setTimeout的定时器值推荐最小使用16.7ms的原因(16.7 = 1000 / 60, 即每秒60帧)。
    参考资料 | 浏览器渲染原理
    
        (function() {
            var lastTime = 0;
            var vendors = ['webkit', 'moz'];
            for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
                window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
                window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||    // name has changed in Webkit
                                              window[vendors[x] + 'CancelRequestAnimationFrame'];
            }
    
            if (!window.requestAnimationFrame) {
                window.requestAnimationFrame = function(callback, element) {
                    var currTime = new Date().getTime();
                    var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
                    var id = window.setTimeout(function() {
                        callback(currTime + timeToCall);
                    }, timeToCall);
                    lastTime = currTime + timeToCall;
                    return id;
                };
            }
            if (!window.cancelAnimationFrame) {
                window.cancelAnimationFrame = function(id) {
                    clearTimeout(id);
                };
            }
        }());
    

[-] 定时器

  • setTimeout(fn,time,[arg]) 在指定的毫秒数后调用函数或计算表达式
    setTimeout还允许添加更多的参数,它们将被传入推迟执行的函数(回调函数),IE 9.0及以下版本,只允许setTimeout有两个参数,不支持更多的参数。
    当time=0时的应用,同样需等待队列完成
  • setInterval(fn,time) 按照指定的周期(以毫秒计)来调用函数或计算表达式
  • clearTimeout(timeout) 取消由 setTimeout() 方法设置的 timeout
  • clearInterval(timeout) 取消由 setInterval() 设置的 timeout
  • val.toString()
    目标 返回值
    array 参数直接用,隔开的字符串
  • vauleOf

[-] 窗口

  • window.print() 打印当前窗口内容
  • window.open([url],[pos],[specs]) 打开一个新浏览器窗口或查找一个已命名的窗口。
    url:打开指定的页面的URL,如果没有指定URL,打开与新的空白窗口。
    name:指定target属性或窗口的名称,_blank/_parent/_self/_top/$name
    specs:指定尺寸是显示模式等。
    返回值:新创建的窗口
    参考资料
  • window.close() 关于浏览器窗口
  • window.opener 返回对创建此窗口的窗口的引用
  • window.focus() 激活指定当前窗口,使其获得焦点

[-] 框架

  • window.name 用于设置当前浏览器窗口的名字,当浏览器窗口关闭后,所保存的值就会消失
  • window.frames 返回一个类似数组的对象,成员为页面内所有框架窗口,包括frame元素和iframe元素。window.frames[0]表示页面中第一个框架窗口。
  • window.length 返回在当前窗口中frames的数量(包括iframes)
  • window.parent 返回父窗口对象。
  • window.self 返回对当前窗口的引用。
  • window.top 返回当前窗口的最顶层浏览器窗口
    可通过window.top!=window.self判断在iframe中

[-] 弹窗

  • alert('msg') 显示带有一段消息和一个确认按钮的警告框
  • confirm('msg') 显示一个带有指定消息和确认及取消按钮的对话框
    点击确定返回true,否则返回false。
  • prompt('msg',[txt]) 显示可提示用户进行输入的对话框
    txt为默认填写的内容,可选。
    返回用户输入的字符串。

[-] Navigator

  • navigator.appVersion 返回浏览器的平台和版本信息
  • navigator.userAgent 返回由客户机发送服务器的user-agent 头部的值
  • navigator.platform 返回运行浏览器的操作系统平台
    Win32
  • navigator.plugins 返回一个类似数组的对象,成员是浏览器安装的插件,比如Flash、ActiveX等。
  • navigator.geolocation 返回一个Geolocation对象,包含用户地理位置的信息。

[-] Location

  • location.href 返回完整的url
  • location.hash 返回一个url的锚部分:#hash
  • location.search 返回一个url的查询部分:?x=search
  • location.pathname 返回url路径(除去域名协议部分)
  • location.hostname 返回url的主机名
    www.xxx.com
  • location.port 返回url服务器使用的端口
  • location.protocol 返回一个url协议
    http:
  • location.reload([true]) 重新载入当前文档。当设置true时,那么无论文档的最后修改日期是什么,它都会绕过缓存,从服务器上重新下载该文档
  • location.replace(url) 用新的文档替换当前文档
  • location.assign(url) 载入一个新的文档

[+]控制台

  • console.log() console.log()
    console.debug()
    console.info() - 蓝色图标
    console.warn() - 黄色三角
    console.error() - 红色叉叉
    console.table() - 表格显示
    console.clear() - 清空
  • console.count(var) 用于计数,输出它被调用了多少次
  • console.dir(dom) 该方法对于输出 DOM 对象非常有用,因为会显示 DOM 对象的所有属性。
    console.dirxml(dom) : 以目录树的形式,显示 DOM 节点
  • console.assert(false,'msg') 参考资料
  • console.time/timeEnd(name) time方法表示计时开始,timeEnd方法表示计时结束。它们的参数是计时器的名称。
    放在一个需要计时的代码起始与末尾。
  • console.profile/profileEnd(name) 新建一个性能测试器。类同time,在profile面板中,可以看到这个性能调试器的运行结果
  • console.group/groupend(name) 分组展示,可用鼠标折叠展开。
    console.groupCollapsed() 默认第一次是折叠的。
  • console.trace() 显示当前执行的代码在堆栈中的调用路径
  • debugger debugger语句主要用于除错,作用是设置断点

[-] postMessage (窗口间)

  • window.postMessage 跨文档通信 API(Cross-document messaging)。
  • otherWindow.postMessage(msg,target) 给其他窗口发送消息。参考资料
  • [event]message window.postMessage() 方法被调用时,会在所有页面脚本执行完毕之后(e.g., 在该方法之后设置的事件、之前设置的timeout 事件,etc.)向目标窗口派发一个 MessageEvent 消息。 该MessageEvent消息有四个属性需要注意: message 属性表示该message 的类型; data 属性为 window.postMessage 的第一个参数;origin 属性表示调用window.postMessage() 方法时调用页面的当前状态; source 属性记录调用 window.postMessage() 方法的窗口信息。
  • e.source 发消息的窗口
  • e.origin 消息发向的网址
  • e.data 消息内容

Cookie-

  • navigator.cookieEnabled 返回一个布尔值,表示浏览器是否打开 Cookie 功能。
  • document.cookie Cookie 的值必须写成key=value的形式。
    注意,等号两边不能有空格。
    另外,写入 Cookie 的时候,必须对分号、逗号和空格进行转义(它们都不允许作为 Cookie 的值),这可以用encodeURIComponent方法达到。
    document.cookie一次只能写入一个 Cookie,而且写入并不是覆盖,而是添加,读取的时候一次性读取全部。
    删除一个 Cookie 的唯一方法是设置其expires为一个过去的日期。
    expires : 指定cookie过期时间,格式采用Date.toUTCString()的格式
    domain : 指定cookie所在的域名
    path : 用来指定路径,必须是绝对路径(比如/、/mydir),如果未指定,默认为请求该 Cookie 的网页路径。
    secure : 指定Cookie只能在加密协议HTTPS下发送到服务器
    max-age : 指定Cookie有效期,比如60 * 60 * 24 * 365(即一年31536e3秒)
    HttpOnly : 设置该Cookie不能被JavaScript读取
  • document.domain Cookie 是服务器写入浏览器的一小段信息,只有同源的网页才能共享。但是,两个网页一级域名相同,只是二级域名不同,浏览器允许通过设置document.domain共享 Cookie。同样适应于iframe通信获取DOM。
  • js-cookie

Storage-

[-] 数据对象

  • localStorage 保存的数据长期存在,下一次访问该网站的时候,网页可以直接读取以前保存的数据。
  • sessionStorage 保存的数据用于浏览器的一次会话,当会话结束(通常是该窗口关闭),数据被清空

[-] 数据操作

  • storage.setItem('key','val') 存储数据
  • storage.getItem('key') 读取数据
  • storage.removeItem('key') 删除数据
  • storage.clear() 清空数据
  • storage.key(n) 获取索引的键名
  • storage.length 数据长度

[-] 事件对象

  • [event]storage 该事件在 Web Storage(HTML 5 Web 存储)更新时触发
    值得特别注意的是,该事件不在导致数据变化的当前页面触发。如果浏览器同时打开一个域名下面的多个页面,当其中的一个页面改变sessionStorage或localStorage的数据时,其他所有页面的storage事件会被触发,而原始页面并不触发storage事件。可以通过这种机制,实现多个窗口之间的通信。所有浏览器之中,只有IE浏览器除外,它会在所有页面触发storage事件。
  • e.key 发生变化的键名
  • e.oldValue 更新前的值。如果该键为新增加,则这个属性为null。
  • e.newValue 更新后的值。如果该键被删除,则这个属性为null。
  • e.url 原始触发storage事件的那个网页的网址。

IndexedDB-

[-] 数据库事件

  • indexedDB 1.键值对存储。
    2.异步
    3.支持事务
    4.同域限制
    5.存储空间大
    6.支持二进制存储
    参考资料
  • indexedDB.open('name',[ver]) 打开数据库(ver>=1)。返回一个对象IDBOpenDBRequest
    var openRequest = indexedDB.open("test",1);
  • open.onupgradeneeded 第一次打开该数据库,或者数据库版本发生变化
  • open.onsuccess 打开成功
  • open.error 打开失败
  • open.blocked 上一次的数据库连接还未关闭
  • e.target.result 打开的IndexedDB数据库
    当成功时,等价于 open.result

[-] 数据库实例

  • db.objectStoreNames.contains('store') 检查数据库是否包含某个“对象仓库”
  • db.createObjectStore('store',[option]) 创建存放数据的“对象仓库”(object store)
    如果该对象仓库已经存在,就会抛出一个错误。
    keyPath : 指定属性作为键名
    autoIncrement : 使用自动递增的整数作为键名 1++
  • db.transaction(['store'],'readwrite') 创建一个数据库事务。向数据库添加数据之前,必须先创建数据库事务。
    第一个参数是一个数组,里面是所涉及的对象仓库,通常是只有一个;
    第二个参数是一个表示操作类型的字符串。目前,操作类型只有两种:readonly(只读)和readwrite(读写)。添加数据使用readwrite,读取数据使用readonly。
    transaction方法返回一个事务对象,该对象的objectStore方法用于获取指定的对象仓库。
    
        var t = db.transaction(["firstOS"],"readwrite");
        var store = t.objectStore("firstOS");
    

[-] 事务对象

[-] 对象仓库

  • store.add(value,key) add方法的第一个参数是所要添加的数据,第二个参数是这条数据对应的键名(key),上面代码将对象o的键名设为1。如果在创建数据仓库时,对键名做了设置,这里也可以不指定键名。
    add方法是异步的,有自己的success和error事件,可以对这两个事件指定回调函数。
    
        var request = store.add(o,1);
    
        request.onerror = function(e) {
             console.log("Error",e.target.error.name);
            // error handler
        }
    
        request.onsuccess = function(e) {
            console.log("数据添加成功!");
        }
    
  • store.get(key) 读取数据使用get方法,它的参数是数据的键名。
    get方法也是异步的,会触发自己的success和error事件,可以对它们指定回调函数。
  • store.put(value,key) 更新记录
  • store.delete(key) 删除记录
    delete也是一个异步操作,可以为它指定回调函数
  • store.openCursor() 遍历数据
    openCursor方法也是异步的,有自己的success和error事件,可以对它们指定回调函数。
  • store.createIndex(index,key,option) 创建索引
    createIndex方法接受三个参数,第一个是索引名称,第二个是建立索引的属性名,第三个是参数对象,用来设置索引特性。
  • store.index(index) 从对象仓库返回指定的索引

Web SQL-

[-] Web SQL

  • openDatabase 使用现有的数据库或者新建的数据库创建一个数据库对象
    参数:数据库名称、版本号、描述文本、数据库大小、创建回调
    var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
    创建回调会在创建数据库后被调用
  • db.transaction(fn) 控制一个事务,以及基于这种情况执行提交或者回滚
    参考资料
  • executeSql(sql) 执行实际的 SQL 查询

File API-

[-] 文件

  • new File() 通常情况下, File 对象是来自用户在一个input元素上选择文件后返回的 FileList 对象,也可以是来自由拖放操作生成的 DataTransfer 对象,或者来自 HTMLCanvasElement 上的 mozGetAsFile() API。
  • file.lastModified 返回当前 File 对象所引用文件最后修改时间, 自 1970年1月1日0:00 以来的毫秒数。
  • file.name 返回当前 File 对象所引用文件的名字
  • file.size 返回文件的大小
  • file.type 返回文件的MIME类型
  • fileReader
  • MIME类型

Ajax-

[-]创建

  • new XMLHttpRequest() IE5-6不支持,用ActiveX对象替代,new ActiveXObject("Microsoft.XMLHTTP")
  • xhr.open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。
    method:(请求的类型)GET 或 POST
    以下情况使用POST请求:
    1.无法使用缓存文件(更新服务器上的文件或数据库)
    2.向服务器发送大量数据(POST 没有数据量限制)
    3.发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
    url:文件在服务器上的位置
    async:true(异步)或 false(同步)
    跨域请求时使用jsonp,此时只能为异步请求,无法同步
    注意:当您使用 async=false 时,请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可
  • xhr.repsonseType “”:字符串(默认值)
    “arraybuffer”:ArrayBuffer对象
    “blob”:Blob对象,blob类型适合读取二进制数据,比如图片文件
    “document”:Document对象,document类型适合返回XML文档的情况
    “json”:JSON对象
    “text”:字符串
  • xhr.setRequestHeader(header,val) 向请求添加HTTP头
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
    该方法必须在open()之后、send()之前调用。
  • xhr.send(str) 将请求发送到服务器。
    string:仅用于post请求

[+]属性

  • xhr.timeout 等于一个整数,表示多少毫秒后,如果请求仍然没有得到结果,就会自动终止
  • xhr.withCredentials withCredentials属性是一个布尔值,表示跨域请求时,用户信息(比如Cookie和认证的HTTP头信息)是否会包含在请求之中,默认为false。
    如果你需要通过跨域AJAX发送Cookie,需要打开withCredentials。
    为了让这个属性生效,服务器必须显式返回Access-Control-Allow-Credentials这个头信息

[+]状态

  • xhr.readyState 0: 请求未初始化
    1: 服务器连接已建立
    2: 请求已接收
    3: 请求处理中
    4: 请求已完成,且响应已就绪
    当 readyState 等于 4 且状态为 200 时,表示响应已就绪
  • xhr.status 200, OK,访问正常
    301, Moved Permanently,永久移动
    302, Move temporarily,暂时移动
    304, Not Modified,未修改
    307, Temporary Redirect,暂时重定向
    401, Unauthorized,未授权
    403, Forbidden,禁止访问
    404, Not Found,未发现指定网址
    500, Internal Server Error,服务器发生错误

[+]事件

  • xhr.onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
    当 readyState 等于 4 且状态为 200 时,表示响应已就绪
    XMLHttpRequest第一版,只能对onreadystatechange这一个事件指定回调函数。
  • xhr.onloadstart 请求发出
  • xhr.onprogress 正在发送和加载数据
  • xhr.onabort 请求被中止,比如用户调用了abort()方法
  • xhr.onerror 请求失败
  • xhr.onload 请求成功完成
  • xhr.ontimeout 用户指定的时限到期,请求还未完成
  • xhr.onloadend 请求完成,不管成果或失败

[+]方法

  • xhr.abort() 终止已经发出的HTTP请求
    ajax.abort();
    ajax = null;
  • xhr.getAllResponseHeaders() getAllResponseHeaders方法返回服务器发来的所有HTTP头信息。格式为字符串,每个头信息之间使用CRLF分隔,如果没有受到服务器回应,该属性返回null。
  • xhr.getResponseHeader(key) 返回HTTP头信息指定字段的值,如果还没有收到服务器回应或者指定字段不存在,则该属性为null。
  • xhr.overrideMimeType() 该方法用来指定服务器返回数据的MIME类型。该方法必须在send()之前调用。

[-]响应

Web Socket-

[-] 实例属性

  • new WebSocket(url) url格式为ws://path:80
  • ws.readyState 返回实例对象的当前状态
    CONNECTING:值为0,表示正在连接。
    OPEN:值为1,表示连接成功,可以通信了。
    CLOSING:值为2,表示连接正在关闭。
    CLOSED:值为3,表示连接已经关闭,或者打开连接失败。
  • ws.bufferedAmount 表示还有多少字节的二进制数据没有发送出去。它可以用来判断发送是否结束。
  • ws.send(data) 实例对象的send()方法用于向服务器发送数据
  • socket.io

[-] 相关事件

  • ws.onopen(fn) 指定连接成功后的回调函数
    如果要指定多个回调函数,可以使用addEventListener方法。
  • ws.onclose(fn) 指定连接关闭后的回调函数
  • ws.onmessage(fn) 指定收到服务器数据后的回调函数
  • ws.onerror(fn) 用于指定报错时的回调函数

网络-

[-] Web Workers

  • new Worker(file.js) 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。
    web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。
  • wk.terminate() 终止 web worker,并释放浏览器/计算机资源

[-] CORS

Web API-

[-] SSE (服务器->页面)

[-] Notifications (页面->桌面)

  • Notification.permission 用于读取用户给予的权限,它是一个只读属性,它有三种状态
    default:用户还没有做出任何许可,因此不会弹出通知。
    granted:用户明确同意接收通知。
    denied:用户明确拒绝接收通知。
  • Notification.requestPermission() Notification.requestPermission方法用于让用户做出选择,到底是否接收通知。它的参数是一个回调函数,该函数可以接收用户授权状态作为参数。
  • new Notification(title,[option]) Notification构造函数的title属性是必须的,用来指定通知的标题,格式为字符串。options属性是可选的,格式为一个对象,用来设定各种设置。
    body:通知内容,格式为字符串,用来进一步说明通知的目的。
    dir:文字方向,可能的值为 auto、ltr(从左到右)和rtl(从右到左),一般是继承浏览器的设置。
    lang:使用的语种,比如 en-US、zh-CN。
    tag:通知的 ID,格式为字符串。一组相同tag的通知,不会同时显示,只会在用户关闭前一个通知后,在原位置显示。
    icon:图标的 URL,用来显示在通知上。
  • nt.onshow 通知显示给用户时触发该事件
  • nt.onclick 用户点击通知时触发
  • nt.onclose 用户关闭通知时触发
  • nt.error 通知出错时触发(大多数发生在通知无法正确显示时)

IntersectionObserver-

[-] 构造函数

  • new IntersectionObserver(callback(entries),[opt]) IntersectionObserver | IntersectionObserverEntry
    参考资料
  • opt.root 值:null | selectorID
    一个可以滚动的元素,我们叫它根元素,它有很多后代元素,想要做的就是判断它的某个后代元素是否滚动进了自己的可视区域范围。这个 root 参数就是用来指定根元素的,默认值是 null,代表viewport。
  • opt.threshold 值:[0~1]
    当目标元素和根元素相交时,用相交的面积除以目标元素的面积会得到一个 0 到 1(0% 到 100%)的数值。当目标元素和根元素相交的面积占目标元素面积的百分比到达或跨过某些指定的临界值时就会触发回调函数。不但包含进入,也包括离开。
  • opt.rootMargin 值:"0px 0px 0px 0px"
    根边界盒的矩形偏移量,也可理解为提前量。单位可用px与百分比。
    设置为0时,也必须带上px单位。可设为负值。
  • polyfill

[+] 实例属性(仅读)

  • observer.root 值:null | 被设置的dom元素
  • observer.thresholds 值:[0,0.5,1]
  • observer.rootMargin 值:"100px 0px"

[-] 实例方法

  • observer.observe(ele) 观察某个目标元素,一个观察者实例可以观察任意多个目标元素。
  • observer.unobserve(ele) 停止监听特定目标元素。
  • observer.disconnect() 终止对所有目标的观察。
  • observer.takeRecords() 返回包含若干个 IntersectionObserverEntry 对象的数组

[-] IntersectionObserverEntry

  • entry.target 相交发生时的目标元素,因为一个根元素可以观察多个目标元素,所以这个 target 不一定是哪个元素。
  • entry.isIntersecting true/false
  • entry.intersectionRatio 0 到 1 的数值,表示相交区域占目标元素区域的百分比,也就是 intersectionRect 的面积除以 boundingClientRect 的面积得到的值
  • entry.time 相交发生时距离页面打开时的毫秒数(有小数)
    也就是相交发生时 performance.now() 的返回值,比如 60000.560000000005,表示是在页面打开后大概 1 分钟发生的相交。在回调函数里用 performance.now() 减去这个值,就能算出回调函数被 requestIdleCallback 延迟了多少毫秒
  • entry.rootBounds 一个对象值,表示发生相交时根元素可见区域的矩形信息
  • entry.boundingClientRect 发生相交时目标元素的矩形信息,等价于 target.getBoundingClientRect()。
  • entry.intersectionRect 根元素和目标元素相交区域的矩形信息。

Performance API-

[-] performance.timing对象

  • performance.timing 参考资料
    
                                var t = performance.timing;
                                var pageloadtime = t.loadEventStart - t.navigationStart; //页面加载的耗时
                                var dns = t.domainLookupEnd - t.domainLookupStart; //域名解析的耗时
                                var tcp = t.connectEnd - t.connectStart; //TCP连接的耗时
                                var ttfb = t.responseStart - t.navigationStart; //读取页面第一个字节之前的耗时
                            
  • t.navigationStart 前浏览器窗口的前一个网页关闭,发生unload事件时的Unix毫秒时间戳。如果没有前一个网页,则等于fetchStart属性。
  • t.unloadEventStart 如果前一个网页与当前网页属于同一个域名,则返回前一个网页的unload事件发生时的Unix毫秒时间戳。如果没有前一个网页,或者之前的网页跳转不是在同一个域名内,则返回值为0。
  • t.unloadEventEnd 如果前一个网页与当前网页属于同一个域名,则返回前一个网页unload事件的回调函数结束时的Unix毫秒时间戳。如果没有前一个网页,或者之前的网页跳转不是在同一个域名内,则返回值为0。
  • t.redirectStart 返回第一个HTTP跳转开始时的Unix毫秒时间戳。如果没有跳转,或者不是同一个域名内部的跳转,则返回值为0。
  • t.redirectEnd 回最后一个HTTP跳转结束时(即跳转回应的最后一个字节接受完成时)的Unix毫秒时间戳。如果没有跳转,或者不是同一个域名内部的跳转,则返回值为0。
  • t.fetchStart 返回浏览器准备使用HTTP请求读取文档时的Unix毫秒时间戳。该事件在网页查询本地缓存之前发生。
  • t.domainLookupStart 回域名查询开始时的Unix毫秒时间戳。如果使用持久连接,或者信息是从本地缓存获取的,则返回值等同于fetchStart属性的值。
  • t.domainLookupEnd 返回域名查询结束时的Unix毫秒时间戳。如果使用持久连接,或者信息是从本地缓存获取的,则返回值等同于fetchStart属性的值。
  • t.connectStart 返回HTTP请求开始向服务器发送时的Unix毫秒时间戳。如果使用持久连接(persistent connection),则返回值等同于fetchStart属性的值。
  • t.connectEnd 回浏览器与服务器之间的连接建立时的Unix毫秒时间戳。如果建立的是持久连接,则返回值等同于fetchStart属性的值。连接建立指的是所有握手和认证过程全部结束。
  • t.secureConnectionStart 返回浏览器与服务器开始安全链接的握手时的Unix毫秒时间戳。如果当前网页不要求安全连接,则返回0。
  • t.requestStart 返回浏览器向服务器发出HTTP请求时(或开始读取本地缓存时)的Unix毫秒时间戳。
  • t.responseStart 返回浏览器从服务器收到(或从本地缓存读取)第一个字节时的Unix毫秒时间戳。
  • t.responseEnd 回浏览器从服务器收到(或从本地缓存读取)最后一个字节时(如果在此之前HTTP连接已经关闭,则返回关闭时)的Unix毫秒时间戳
  • t.domLoading 返回当前网页DOM结构开始解析时(即Document.readyState属性变为“loading”、相应的readystatechange事件触发时)的Unix毫秒时间戳。
  • t.domInteractive 返回当前网页DOM结构结束解析、开始加载内嵌资源时(即Document.readyState属性变为“interactive”、相应的readystatechange事件触发时)的Unix毫秒时间戳。
  • t.domContentLoadedEventStart 返回当前网页DOMContentLoaded事件发生时(即DOM结构解析完毕、所有脚本开始运行时)的Unix毫秒时间戳。
  • t.domContentLoadedEventEnd 返回当前网页所有需要执行的脚本执行完成时的Unix毫秒时间戳。
  • t.domComplete 返回当前网页DOM结构生成时(即Document.readyState属性变为“complete”,以及相应的readystatechange事件发生时)的Unix毫秒时间戳。
  • t.loadEventStart 返回当前网页load事件的回调函数开始时的Unix毫秒时间戳。如果该事件还没有发生,返回0。
  • t.loadEventEnd 返回当前网页load事件的回调函数运行结束时的Unix毫秒时间戳。如果该事件还没有发生,返回0。

[-] 相关方法

  • performance.now() 返回当前网页自从performance.timing.navigationStart到当前时间之间的微秒数(毫秒的千分之一)。也就是说,它的精度可以达到100万分之一秒。
    可以通过两次调用performance.now方法,可以得到间隔的准确时间,用来衡量某种操作的耗时
  • performance.mark(name) 为相应的视点做标记
  • performance.clearMarks([name]) 用于清除标记,如果不加参数,就表示清除所有标记
  • performance.getEntries()[n] 浏览器获取网页时,会对网页中每一个对象(脚本文件、样式表、图片文件等等)发出一个HTTP请求。performance.getEntries方法以数组形式,返回这些请求的时间统计信息,有多少个请求,返回数组就会有多少个成员。

[-] 用户行为

  • performance.navigation 除了时间信息,performance还可以提供一些用户行为信息,主要都存放在performance.navigation对象上面。
  • pn.type 该属性返回一个整数值,表示网页的加载来源,可能有以下4种情况: 0:网页通过点击链接、地址栏输入、表单提交、脚本操作等方式加载,相当于常数performance.navigation.TYPE_NAVIGATENEXT。
    1:网页通过“重新加载”按钮或者location.reload()方法加载,相当于常数performance.navigation.TYPE_RELOAD。
    2:网页通过“前进”或“后退”按钮加载,相当于常数performance.navigation.TYPE_BACK_FORWARD。
    255:任何其他来源的加载,相当于常数performance.navigation.TYPE_UNDEFINED。
  • pn.redirectCount 该属性表示当前网页经过了多少次重定向跳转。

性能与缓存-

[-] Application Cache

移动设备 API-

[-] Permissions API

  • navigator.permissions.query(option) 查询某个接口的许可情况

[-] Geolocation API

  • navigator.getCurrentPosition(sfn,efn) 用来获取用户的地理位置
    参数为接受或拒绝的回调函数,回调函数的参数是一个event对象
  • e.timestamp 返回获得位置信息的具体时间
  • e.coords coords属性指向一个对象,包含了用户的位置信息
    coords.latitude:纬度
    coords.longitude:经度
    coords.accuracy:精度
    coords.altitude:海拔
    coords.altitudeAccuracy:海拔精度(单位:米)
    coords.heading:以360度表示的方向
    coords.speed:每秒的速度(单位:米)
    大多数桌面浏览器不提供上面列表的后四个值。
  • e.code geoError的参数也是一个event对象。event.code属性表示错误类型,有四个值
    0:未知错误,浏览器没有提示出错的原因,相当于常量event.UNKNOWN_ERROR。
    1:用户拒绝授权,相当于常量event.PERMISSION_DENIED。
    2:没有得到位置,GPS或其他定位机制无法定位,相当于常量event.POSITION_UNAVAILABLE。
    3:超时,GPS没有在指定时间内返回结果,相当于常量event.TIMEOUT。
  • navigator.geolocation.watchPosition(sfn,efn,option) 可以用来监听用户位置的持续改变
  • navigator.geolocation.clearWatch(watchID) 取消监听

[-] Vibration API

  • navigator.vibrate(time) 用于在浏览器中发出命令,使得设备振动
    vibrate方法可以使得设备振动,它的参数就是振动持续的毫秒数。
    vibrate方法还可以接受一个数组作为参数,表示振动的模式。偶数位置的数组成员表示振动的毫秒数,奇数位置的数组成员表示等待的毫秒数。
    vibrate是一个非阻塞式的操作,即手机振动的同时,JavaScript代码继续向下运行。要停止振动,只有将0毫秒或者一个空数组传入vibrate方法。

[-] Orientation API

  • [event]deviceorientation 一旦设备的方向发生变化,会触发deviceorientation事件,可以对该事件指定回调函数。
  • e.alpha 表示围绕z轴的旋转,从0到360度。当设备水平摆放时,顶部指向地球的北极,alpha此时为0。
  • e.beta 表示围绕x轴的旋转,从-180度到180度。当设备水平摆放时,beta此时为0。
  • e.gramma 表示围绕y轴的选择,从-90到90度。当设备水平摆放时,gramma此时为0。
+ to be continued..

配置-

[-] 账户

  • config /etc/gitconfig
    系统中对所有用户都普遍适用的配置。若使用 git config 时用 --system 选项,读写的就是这个文件。
    ~/.gitconfig
    用户目录下的配置文件只适用于该用户。若使用 git config 时用 --global 选项,读写的就是这个文件。
    .git/config
    当前项目的 Git 目录中的配置文件(也就是工作目录中的)
    这里的配置仅仅针对当前项目有效。每一个级别的配置都会覆盖上层的相同配置,所以 .git/config 里的配置会覆盖 /etc/gitconfig 中的同名变量。
  • git config --global [key] [val] git config --global <配置名称> <配置的值>
  • git config --list 查看各项设置值。
  • git config user.[option] $ git config --global user.name "username"
    $ git config --global user.email user@example.com
    使用了 --global 选项,那么该命令只需要运行一次,因为之后无论你在该系统上做任何事情, Git 都会使用那些信息。 当你想针对特定项目使用不同的用户名称与邮件地址时,可以在那个项目目录下运行没有 --global 选项的命令来配置。
  • ssh key 1.查看是否已存在ssh密钥:cd ~/.ssh
    2.生成密钥: ssh-keygen -t rsa -C "username@mail.com" 按3个回车,密码为空
    3.得到文件:id_rsa私钥和id_rsa.pub公钥
    4.添加密钥到ssh:ssh-add $file.name

[-] 文件

  • GUI乱码 gitconfig文件设置
    [gui]
    encoding = utf-8
  • .gitignore 需要被忽略的文件
    查看多语言范本
    .gitignore 的格式规范如下:
    所有空行或者以 # 开头的行都会被 Git 忽略。
    可以使用标准的 glob 模式匹配。
    匹配模式可以以(/)开头防止递归。
    匹配模式可以以(/)结尾指定目录。
    要忽略指定模式以外的文件或目录,可以在模式前加上惊叹号(!)取反。

    所谓的 glob 模式是指 shell 所使用的简化了的正则表达式。
    星号(*)匹配零个或多个任意字符;
    [abc] 匹配任何一个列在方括号中的字符(这个例子要么匹配一个 a,要么匹配一个 b,要么匹配一个 c);
    问号(?)只匹配一个任意字符;
    如果在方括号中使用短划线分隔两个字符,表示所有在这两个字符范围内的都可以匹配(比如 [0-9] 表示匹配所有 0 到 9 的数字)。
    使用两个星号(*) 表示匹配任意中间目录,比如`a/**/z` 可以匹配 a/z, a/b/z 或 `a/b/c/z`等。

[-] 别名

  • git config --global alias.$cmd "$cmd_old" 设置别名
    git config --global alias.$cmd "$cmd_old"
    如需删除在.git/config中修改
    git config --global alias.lg "log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit"
    git config --global alias.last 'log -1'
    参考资料

其它-

[-] 其它

  • git help $cmd
  • git gc 压缩仓库
  • git fsck 仓库一致性检测

资料-

创建-

[-] 初始化

  • git init git init 使用当前目录初始化一个项目
  • git init [path] git init dirname 使用指定目录初始化一个项目
  • fork 从别人的项目分支一个版本至你的git服务器仓库

[-] 克隆

  • git clone [url] dir缺省时,会创建一个和项目同名的目录
    url支持多种数据传输协议,url可以为https:// 、git:// 、git@ 、user@server:path/to/repo.git等。
  • git clone [url] [path] 指定dir时生成对应的文件夹名
    path为“./”时则在当前目录下克隆内容,不再生成项目名目录

修改-

[-] 添加/提交

  • git add [regexp] 跟踪新文件,加入缓存区INDEX
    git add file1 file2 file3
    git add */.
    git add *.js
  • git commit -m "desc" 提交修改,将缓存区内容添加到仓库中
    git commit -m "message"
  • git commit -a -m "desc" git commit -a -m "message" 跳过使用暂存区域直接提交(但不包含新建文件,仅修改与删除)
  • git commit git commit 这种方式会启动文本编辑器以便输入本次提交的说明。
    默认会启用 shell 的环境变量 $EDITOR 所指定的软件,一般都是 vim 或 emacs。
    当然也可以按照 起步 介绍的方式,使用 git config --global core.editor 命令设定你喜欢的编辑软件。

[-] 删除/移动

  • git rm file [--cached][-f] git rm 将文件从缓存区和你的硬盘中(工作目录)删除
    git rm --cached 只从缓存区中移除,工作目录中保存
    git rm -f 强制删除,删除之前修改过并且已经放到暂存区域的
  • git rm -r dir git rm -r dirname 删除目录及目录内容
    当该目录没有stage时,无法进行该操作,直接执行shell命令rm操作即可。
  • git mv (from) (to) 同linux mv命令,自动判定执行“移动”或“重命名”操作。
    git mv 文件名 文件名 : 将源文件名改为目标文件名
    git mv 文件名 目录名 : 将文件移动到目标目录
    git mv 目录名 目录名 : 目标目录已存在,将源目录移动到目标目录;目标目录不存在则改名(当源文件为空时不可移动)
    git mv 目录名 文件名 : 出错

[-] 查看/对比

  • git status [-s] 检查状态
    git status -s 简易查看
    新添加的未跟踪文件前面有 ?? 标记
    新添加到暂存区中的文件前面有 A 标记
    修改过的文件前面有 M 标记。
    出现在右边的 M 表示该文件被修改了但是还没放入暂存区
    出现在靠左边的 M 表示该文件被修改了并放入了暂存区。
    AM状态的意思是,这个文件在我们将它添加到缓存之后又有改动
  • git diff [--cached] 查看修改
    git diff : 尚未缓存的改动
    git diff --cached : 查看已缓存的改动 (同git diff --staged [1.6+])
    git diff HEAD : 查看已缓存的与未缓存的所有改动
    git diff --stat : 显示摘要而非整个 diff

[-] 历史

  • git log [--pretty=oneline] git log 显示全部提交记录
    git log --pretty=oneline 美化显示
  • git reflog 查看每一次命令

分支-

[-] 创建/切换

  • git branch 查看所有分支
  • git branch $dev 创建分支
  • git checkout $dev 切换分支
  • git checkout -b $dev 创建并切换到该分支
  • git checkout -b $name origin 基于远程分支"origin",创建一个分支
  • git symbolic-ref 创建新的空分支:
    git symbolic-ref HEAD refs/heads/$branchname
    rm .git/index
    git clean -fdx

[-] 删除

  • git branch -d $dev 删除分支
  • git branch -D $dev 强行删除分支

[-] 对比

  • git diff $master $dev 对比两个分支

合并-

[-] 合并

  • git merge $dev 合并指定分支到当前分支
  • git merge $origin $dev 合并指定远端分支到当前分支

[-] 存储

  • git stash 存储当前工作内容但不提交
  • git stash save "$temp" 临时存储
  • git stash list查看
  • git stash pop 恢复存储区内容并删除stash
  • git stash apply恢复
  • git stash drop删除

恢复-

[-] 撤销修改

  • git checkout -- $file 丢弃工作区的修改
  • git reset HEAD $file 丢弃已经进入暂存区的修改

[-] 版本回退

  • git reset --hard HEAD^ 恢复到上一个版本
    HEAD表示当前版本,上个版本HEAD^,上上个版本HEAD^^,上100个版本HEAD~100。
    git reset HEAD 取消目前所有暂存的文件(仍在工作区)
    git reset HEAD filename 取消某个文件的暂存状态
  • git reset --hard HEAD^^ 回退到上上个版本
  • git reset --hard $commit_id 恢复到指定commit版本

[-] 找回

  • git fsck --lost-found 找出删除的提交对象
  • git show $commit_id 查看某个提交对象的内容
  • git rebase $commit_id 恢复指定commit

远端-

[-] 连接

  • git remote -v 查看全部远端
  • git remote add $origin $url 添加一个远端地址。默认的为origin
  • git remote $url 修改本地指向的远程仓库地址

[-] 获取

  • git fetch [$oigin $master] 获取远端最新内容
  • git pull $origin $master 获取并合并远端最新内容

[-] 提交

  • git push [-u] $origin $master 发布本地$master分支到远端$origin
    第一次添加-u参数
  • git push -f 强制推送,适用于版本回退场景需覆盖远程
  • git push origin --delete $branch git push origin --delete $branch
    删除远端分支

[-] 追踪

  • git branch --track $name $origin/$name git branch --track $name $origin/$name
    创建一个本地与远端分支的追踪映射。当执行git pull $name时自动同步拉取

标签-

[-] 查看

  • git tag查看所有标签
  • git show $tag 显示指定标签

[-] 创建

  • git tag $name给当前commit打tag
  • git tag $name $commit_id给指定commit打tag
  • git tag -a $name $commit_id -m "desc"指定标签同时添加描述
    git tag -a $name $commit_id -m "desc"

[-] 移除

  • git tag -d $tag删除本地tag

[-] 推送

  • git push $origin $ver推送tag
  • git push $origin --tags推送全部tag
  • git push $origin :$tag 删除远端tag
    $ git push origin :refs/tags/$tag
    $ git push origin :$tags $ git push origin --delete $tag

子库-

[-] 添加

[-] 更新

  • git submodule sync 1.更新 .gitsubmodule中对应submodule的条目URL
    2.更新 .git/config 中对应submodule的条目的URL
    3.执行 git submodule sync

[-] 删除

  • git rm --cached $subpath 1.删除 .gitsubmodule中对应submodule的条目
    2.删除 .git/config 中对应submodule的条目
    3.执行 git rm --cached {submodule_path}

自动部署-

[-] Hooks

服务器-

[-] Gitlab

文件管理-

[-] 显示/切换

  • cd [path] 切换目录
    cd : 切换到家目录
    cd - : 切换到先前的工作目录
    cd ~user_name : 切换到某个用户的家目录
  • pwd 显示当前路径

[-] 创建

  • mkdir dir 创建文件夹 mkdir testdir
  • touch file 创建文件 touch file1 file2..

[-] 查看

  • ls [dir] 列出(当前)目录下文件
    ls -al 列出当前目录下文件(包含隐藏文件)
    -a :全部的文件,连同隐藏档( 开头为 . 的文件) 一起列出来
    -l :长数据串列出,包含文件的属性与权限等等数据;
    -t :按文件修改时间的先后来排序
    -F :如果是目录则添加“/”字符以区别文件与文件夹
    -h :显示文件大小以可读格式
    -dl : 当前目录的详细信息,而不是目录中的内容
    -r :反向显示结果
    -i :展示文件索引节点的信息
  • tree [dir] 以树状图列出目录的内容
  • less/more file 查看文件内容
  • cat/tac [-n] file 打印文件内容到标准输出;cat正序;tac倒序
    -n显示行号
  • nl file 添加行号并打印

[-] 编辑

  • vim file 编辑文件内容 vim file.txt
  • echo "txt" >> file 对文件输出内容 echo "text" >> file.txt

[-] 移动/重命名

  • mv from to mv 文件名 文件名 : 将源文件名改为目标文件名
    mv 文件名 目录名 : 将文件移动到目标目录
    mv 目录名 目录名 : 目标目录已存在,将源目录移动到目标目录;目标目录不存在则改名
    mv 目录名 文件名 : 出错

    表5-6: mv 选项
    选项 意义
    -i --interactive 在重写一个已经存在的文件之前,提示用户确认信息。 如果不指定这个选项,mv 命令会默认重写文件内容。
    -u --update 当把文件从一个目录移动另一个目录时,只是移动不存在的文件, 或者文件内容新于目标目录相对应文件的内容。
    -v --verbose 当操作 mv 命令时,显示翔实的操作信息。

[-] 复制/粘贴

  • cp from to 复制文件或目录
    cp 选项
    选项 意义
    -a, --archive 复制文件和目录,以及它们的属性,包括所有权和权限。 通常,复本具有用户所操作文件的默认属性。
    -i, --interactive 在重写已存在文件之前,提示用户确认。如果这个选项不指定, cp 命令会默认重写文件。
    -r, --recursive 递归地复制目录及目录中的内容。当复制目录时, 需要这个选项(或者-a 选项)。
    -u, --update 当把文件从一个目录复制到另一个目录时,仅复制 目标目录中不存在的文件,或者是文件内容新于目标目录中已经存在的文件。
    -v, --verbose 显示翔实的命令操作信息

[-] 删除

  • rm item.. 删除一个或多个文件/文件夹
    当你使用带有通配符的rm命令时(除了仔细检查输入的内容外), 先用 ls 命令来测试通配符。这会让你看到将要被删除的文件是什么。然后按下上箭头按键,重新调用 刚刚执行的命令,用 rm 替换 ls。
    rm 选项
    选项 意义
    -i, --interactive 在删除已存在的文件前,提示用户确认信息。 如果不指定这个选项,rm 会默默地删除文件
    -r, --recursive 递归地删除文件,这意味着,如果要删除一个目录,而此目录 又包含子目录,那么子目录也会被删除。要删除一个目录,必须指定这个选项。
    -f, --force 忽视不存在的文件,不显示提示信息。这选项覆盖了“--interactive”选项。
    -v, --verbose 在执行 rm 命令时,显示翔实的操作信息。
  • rmdir dir 删除空文件夹

[-] 链接

[-] 权限

  • chmod 777 item 更改文件权限
    注:只有文件的所有者或者超级用户才 能更改文件或目录的模式。
  • chmod u+x item 更改文件权限
    u所有者,g用户组,o其它人,a全部
    +添加,-删除,=仅
    如多个设定直接用“,”分隔
  • chown [owner:group] item 更改文件的所有者和用户组。
    使用这个命令需要超级用户权限

[-] 其它

  • 通配符
    通配符
    通配符 意义
    * 匹配任意多个字符(包括零个或一个)
    ? 匹配任意一个字符(不包括零个)
    [characters] 匹配任意一个属于字符集中的字符
    [!characters] 匹配任意一个不是字符集中的字符
    [[:class:]] 匹配任意一个属于指定字符类中的字符

    普遍使用的字符类
    字符类 意义
    [:alnum:] 匹配任意一个字母或数字
    [:alpha:] 匹配任意一个字母
    [:digit:] 匹配任意一个数字
    [:lower:] 匹配任意一个小写字母
    [:upper:] 匹配任意一个大写字母
  • 文件类型
    文件类型
    属性 文件类型
    - 一个普通文件
    d 一个目录
    l 一个符号链接。注意对于符号链接文件,剩余的文件属性总是"rwxrwxrwx",而且都是 虚拟值。真正的文件属性是指符号链接所指向的文件的属性。
    c 一个字符设备文件。这种文件类型是指按照字节流来处理数据的设备。 比如说终端机或者调制解调器
    b 一个块设备文件。这种文件类型是指按照数据块来处理数据的设备,例如一个硬盘或者 CD-ROM 盘。
  • 文件模式 文件所有者、文件组所有者和其他人的读、写和执行权限。
    权限属性
    属性 文件 目录
    r - 2**2*1/0 允许打开并读取文件内容。 允许列出目录中的内容,前提是目录必须设置了可执行属性(x)。
    w - 2**1*1/0 允许写入文件内容或截断文件。但是不允许对文件进行重命名或删除,重命名或删除是由目录的属性决定的。 允许在目录下新建、删除或重命名文件,前提是目录必须设置了可执行属性(x)。
    x - 2**0*1/0 允许将文件作为程序来执行,使用脚本语言编写的程序必须设置为可读才能被执行。 允许进入目录,例如:cd directory 。

I/O-

[+] 标准输出/错误

  • > 重定向标准输出
  • >> 追加,而不是重写
  • 2> 标准错误输出
    0标准输入;1标准输出;2标准错误
  • &> 重定向标准输出和错误
    ls -l /bin/usr &> ls-output.txt
    旧版合并 ls -l /bin/usr > ls-output.txt 2>&1

[+] 标准输入

  • cat file 读取一个或多个文件,然后复制它们到标准输出
  • cat > file 将标准输入重定向到文件
    最后输入 Ctrl-d
  • cat < file 将文件内容打印到标准输入

[-] 过滤

  • | 使用管道操作符”|”(竖杠),一个命令的标准输出可以通过管道送至另一个命令的标准输入
  • sort 有序排列
  • uniq 报道或忽略重复行
  • wc [file] 打印行数、字数和字节数
  • grep pattern [file..] 打印匹配行
    -i:忽略大小写
    -v:只打印不匹配的行
  • head -n x [file] 打印文件的前十行
  • tail -n x [file] 打印文件的尾十行
    tail -f /var/log/messages
    使用”-f”选项,tail 命令继续监测这个文件,当新的内容添加到文件后,它们会立即 出现在屏幕上。
  • tee file 从 Stdin 读取数据,并同时输出到 Stdout 和文件
    ls /usr/bin | tee ls.txt | grep zip

网络通讯-

[-] 下载

  • wget $file_url 下载 /usr/local/src/

压缩备份-

[-] 解压

  • tar zxvf $file 解压tar.gz文件
  • tar xvJf $file 解压tar.xz二进制压缩包

用户/用户组-

[-] 账号

  • useradd $user 添加用户
  • passwd $user 给$user设置密码
  • userdel $user 删除用户
  • usermod [-x to] $user 修改用户信息 参考资料
    usermod [-LU][-c <备注>][-d <登入目录>][-e <有效期限>][-f <缓冲天数>][-g <群组>][-G <群组>][-l <帐号名称>][-s shell][-u uid][用户帐号]

[-] 用户组

[-] 管理员

  • sudo cmd 以特权级别运行命令
  • su user 切换到某用户
    su - user,同时环境变量也会跟着改变成目标用户的环境变量
    su - ,如果没有指定则默认为root

[-] 查看

  • id 查看身份信息
  • who 查看在线用户

系统管理 -

[-] 基本信息

  • date 显示当前时间
  • cal 显示当前月份的日历

[-] 别名

  • alias custom='..' 自定义别名命令
    alias customname='cmd'
    alias name='string'
  • unalias custom 删除别名

[-] 交互

[-] 检测

  • type cmd 1.是一个可执行程序,就像我们所看到的位于目录/usr/bin 中的文件一样。 这一类程序可以是用诸如 C 和 C++语言写成的程序编译的二进制文件, 也可以是由诸如shell,perl,python,ruby等等脚本语言写成的程序 。
    2.是一个内建于 shell 自身的命令。bash 支持若干命令,内部叫做 shell 内部命令 (builtins)。例如,cd 命令,就是一个 shell 内部命令。
    3.是一个 shell 函数。这些是小规模的 shell脚本,它们混合到环境变量中。 在后续的章节里,我们将讨论配置环境变量以及书写 shell函数。但是现在, 仅仅意识到它们的存在就可以了。
    4.是一个命令别名。我们可以定义自己的命令,建立在其它命令之上。
  • file file 辨识文件类型

[-] 帮助

  • whatis cmd 显示非常简洁的命令说明
  • which cmd 确定所给定的执行程序的准确位置,只对可执行程序有效
    当不只安装了可执行程序的一个版本时有用
  • help cmd 得到 shell 内建命令的帮助文档
    --help 显示可执行程序用法信息(不一定存在)
  • man program 显示程序手册页
  • apropos use 显示适当的命令

进程管理-

磁盘管理-

[-] 硬件信息

  • df 磁盘剩余空间的数量
  • free 显示空闲内存的数量

Shell-

[-] 展开

  • $((exp)) shell 在展开中执行算数表达式
  • $(cmd) 命令展开
  • $VAR 参数展开
  • {a,b..c} 你可以从一个包含花括号的模式中 创建多个文本字符串
  • ""/'' 在双引号中,参数展开、算术表达式展开和命令替换仍然有效
    在单引号中,禁止所有的展开
  • \ \n换行;\r回车;\t制表符;\b退格符;\a响铃

[-] 基本语法

  • #!/bin/bash 指定解释器。需设置为777有执行权限
  • $0 $1 .. 传递参数。$0为执行的文件名。
  • `expr 2 + 2` 条件表达式要放在方括号之间,并且要有空格,例如: [$a==$b] 是错误的,必须写成 [ $a == $b ]。
    val=`expr $a \* $b`,乘号(*)前边必须加反斜杠(\)才能实现乘法运算;

[-] 变量

  • ${var} 定义变量 var=xxx ; 变量定义时不能留空格
    使用变量 echo ${var}
  • readonly var 设置变量为只读
  • unset var 删除变量,不能删除只读变量

[-] 字符串

[-] 数组

[-]

Vim-

[-] 模式切换

  • i 普通模式下,按i进入插入模式
  • : 普通模式下,按:进入命令行模式
    命令 说明
    :w [$name/$path] 保存
    :q 退出
    :wq / :x 保存并退出
    :q! 强制退出不保存
    :wq! 强制保存并退出
    普通模式下 shift+zz = 保存退出

[-] 文本编辑

  • Delete 删除文本(普通模式)
    x: 删除游标所在的字符
    dd: 删除整行
    d$: 删除至行尾
    d^: 删除至行首
    dG: 删除至文档结尾处
  • . / Ncmd 重复操作(普通模式)
    .(小数点)表示重复上一次的命令操作
    Ncommand,N表示重复后面的次数
  • nG / gg / G 行间跳转(普通模式)
    第N行 / gg第一行 / G最后一行
  • ^ / $ 行内跳转(普通模式)
    行首 / 行尾
    Ctrl+o快速回到上一次(跳转前)光标所在位置
  • y 复制(普通模式)
    普通模式中,yy复制游标所在的整行(3yy表示复制3行)
    普通模式中,y^ 复制至行首,或y0。不含光标所在处字符。
    普通模式中,y$ 复制至行尾。含光标所在处字符。
    普通模式中,yw 复制一个单词。
    普通模式中,y2w 复制两个单词。
    普通模式中,yG 复制至文本末。
    普通模式中,y1G 复制至文本开头。
  • p 粘贴(普通模式)
    普通模式中,p(小写)代表粘贴至光标后(下)
    普通模式中,P(大写)代表粘贴至光标前(上)

[-] 其它更多

参考资料-

[-] 字典检索

常用正则表达式

数字 ^[0-9]*$
n位的数字 ^\d{n}$
汉字 ^[\u4e00-\u9fa5]{0,}$
英文和数字 ^[A-Za-z0-9]+$
email ^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$
身份证 ^\d{15}|\d{18}$
IP地址 \d+.\d+.\d+.\d+

修饰符 修饰符用于执行区分大小写和全局匹配

修饰符 描述
g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)
i 执行对大小写不敏感的匹配
m 执行多行匹配

字符类:单个字符和数字

元字符/元符号 匹配情况
. 匹配除换行符外的任意字符
\d 匹配数字,等价[0-9]
\D 匹配非数字,同[^0-9]相同
\w 匹配字母和数字及_或汉字,等价[0-9a-zA-Z_]
\W 匹配非字母和数字及_
\s 匹配空白字符、空格、制表符和换行符
\S 匹配非空白字符
\n 匹配换行符
\r 匹配回车字符
\t 匹配制表符
\v 查找垂直制表符
\f 匹配换页字符
\0 匹配 null 字符
\xxx 查找以八进制数 xxx 规定的字符。
\xdd 查找以十六进制数 dd 规定的字符。
\uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。

字符类:锚字符

元字符/元符号 匹配情况
^ 行首匹配(不在方括号内)
$ 行尾匹配
\A 只有匹配字符串开始处
\b 匹配空格字符,单词边界,词在[]内时无效
\B 匹配非单词边界
\G 匹配当前搜索的开始位置
\Z 匹配字符串结束处或行尾
\z  只匹配字符串结束处

字符类:量词

元字符/元符号 匹配情况
x? 匹配 0 个或 1 个 x   (0或1)
x+ 匹配至少一个 x (>=1)
x* 匹配 0 个或任意多个 x (>=0)
x{N} 匹配包含 n 个 x 的序列的字符串。(N个)
x{N,M} 匹配包含 n~ m个x 的序列的字符串。(N~M个)
x{N,}  x{,M} 匹配包含至少n 个x 的序列的字符串。(N个以上)(M个以下)

表达式:[] 方括号用于查找某个范围内的字符

[abc] 查找方括号之间的任何字符。
[^abc] 查找任何不在方括号之间的字符
[0-9][a-z][A-Z][A-z] 数字/小写字母/大写字母/全部字母

分组:() |

 /(google){4,8}/  
\1 或$1 匹配第一个分组中的内容
\2 或$2 匹配第二个分组中的内容
\3 或$3  匹配第三个分组中的内容
RegExp.$1 得到第一个分组里的字符串内容 (在此之前必须要运行一次)
(red|blue|green) 查找任何指定的选项。|需要放在分组中

replacement 中的 $

字符具有特定的含义。如下表所示,它说明从模式匹配得到的字符串将用于替换。

$1、$2、...、$99 与 regexp 中的第 1 到第 99 个子表达式相匹配的文本。
$& 与 regexp 相匹配的子串。
$` 位于匹配子串左侧的文本。
$' 位于匹配子串右侧的文本。
$$ 直接量符号。

贪婪与惰性

贪 婪 惰 性
+ +?
? ??
* *?
{n} {n}?
{n,} {n,}?
{n,m} {n,m}?

分组捕获

?:  非捕获分组前 (a)(?:b)
?= 前瞻捕获 (a)(?=b) 返回的是a不是ab,紧跟b的a
?! (a)(?!b)匹配任何其后没有紧接指定字符串 b 的字符串,不紧跟b的a

选择器-

[-] 基本

[-] 层级

[-] 序列

  • :first第一个
  • :last最后一个
  • :eq(index)索引第N个
  • :gt(index)索引大于
  • :lt(index)索引小于
  • :even索引偶数,实际奇数
  • :odd索引奇数,实际偶数

[-] 条件

  • :not(selector)不含,无需引号,not(div,a)或not(div a)
  • :has(selector)
  • :focus获得焦点,有focus方法的,不只是表单
  • :animated正在执行动画
  • :hidden隐藏的
  • :visible可见的
  • :lang(zh-cn)语言指定

[-] 内容

[-] 属性

[+] 子元素

[+] 表单

[-] 表单对象属性

核心-

[-] 基本

[-] 索引

  • length jQuery 对象中元素的个数
  • index([sel]) 无参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。
    如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置。
    如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素,则返回-1。

[-] 取DOM

  • get(index)/[index] 取得其中一个匹配的元素,返回的是DOM
  • toArray() 返回一个包含jQuery对象集合中的所有DOM元素的数组

[-] 数据

  • data(name,[val]) 向被选元素附加数据,或者从被选元素获取数据
    参考资料
  • removeData([name]) 移除之前存放的数据

工具-

[-] 常用

  • $.type(o) 确定JavaScript内置对象的类型
  • $.trim(str) 移除字符串开始和末尾处的所有换行符,空格(包括连续的空格)和制表符
  • $.now() 返回当前时间的Unix时间戳

[-] 数组/对象

  • $(ele).each(fn(index,ele)) 为每个匹配元素执行函数
    ele代表当前的元素
    返回 false 可用于及早停止循环
  • $.each(o,fn(index,item)) 遍历指定的对象和数组
    参考资料
  • $.map(o,fn(item,index)) 需要指定return值
    指定函数处理数组中的每个元素(或对象的每个属性),并将处理结果封装为新的数组返回
    该函数返回值将作为结果数组中的一个元素,如果返回值为null或undefined,则不会被添加到结果数组中.
  • $.grep(arr,fn(item,index)) 过滤并返回满足指定函数的数组元素
    参考资料
  • $.merge(arr1,arr2) 合并两个数组内容到第一个数组
  • $.inArray(item,arr) 数组中查找指定值并返回它的索引值(如果没有找到,则返回-1)
  • $.makeArray(o) 将一个类似数组的对象转换为真正的数组对象

[-] 扩展/插件

  • $.extend([deep],o,oN..) 将一个或多个对象的内容合并到目标对象
    参考资料
    当我们提供两个或多个对象给$.extend(),对象的所有属性都添加到目标对象(target参数)。
    如果只有一个参数提供给$.extend(),这意味着目标参数被省略。在这种情况下,jQuery对象本身被默认为目标对象。
  • $.fn.extend({o,oN..}) 为jQuery扩展一个或多个实例属性和方法
    参考资料

[-] 其它

  • $.sub() 创建一个新的jQuery副本,其属性和方法可以修改,而不会影响原来的jQuery对象
    参考资料
  • $.globalEval(jsstr) 全局性地执行一段JavaScript代码

[-] 检测

  • $.isArray(o) 判断指定参数是否是一个数组
  • $.isFunction(o) 判断指定参数是否是一个函数
  • $.isNumeric(o) 判断指定参数是否是一个数字值
  • $.isEmptyObject(o) 检查对象是否为空(不包含任何属性)
  • $.isPlainObject(o) 判断指定参数是否是一个纯粹的对象
  • $.isWindow(o) 判断指定参数是否是一个窗口
  • $.isXMLDoc(o) 判断一个DOM节点是否位于XML文档中,或者其本身就是XML文档

属性-

[-] 属性

  • attr({key,[val|fn]})attr('key') 获取第一个元素指定属性的值,如遍历获取则需each
    attr('key','value') 设置key的值为value
    attr('key',fn[index,old-value]) 回调参数:索引,原值
    attr({key1:'value1',key2:'value2'}) 设置多个属性的值,用逗号分隔
  • removeAttr(key)removeAttr('key') 从每一个匹配的元素中删除某个属性
  • prop({key,[true/false|fn]})prop('key') 获取匹配元素中第一个元素的属性
    prop('key',true/false) 设置每一个匹配元素的一个属性
    prop('key',fn[index,old-value]) 回调参数:索引,原值
    prop({key1:'value1',key2:'value2'})"
  • removeProp(key)removeProp('key') 从每一个匹配的元素中删除某个属性

[-] CSS类

  • addClass(class|fn)addClass('name') 添加一个样式
    addClass('name1 name2') 添加多个样式,空格分开
    addClass(fn[index,old-value]) 回调参数:索引,原样式名;返回一个或空格隔开的class名
  • removeClass(class|fn)removeClass('name') 移除一个样式
    removeClass('name1 name2') 移除多个样式,空格分开
    removeClass(fn[index,old-value]) 回调参数:索引,原样式名;返回一个或空格隔开的class名
  • toggleClass(class|fn[,sw])toggleClass('name') 元素如果存在(不存在)就删除(添加)一个类
    toggleClass('name',switch) 要切换的CSS类名,用于决定元素是否包含class的switch case值
    toggleClass(fn[index,old-value],switch) 回调参数:索引,原样式名;返回一个或空格隔开的class名

[-] HTML代码/文本/值

  • html([text|fn])html() 无参数,返回元素集合中第一个元素的内容
    html('text') 设置所有选择器元素的内容
    html(fn[index,old-value]) 返回一个HTML字符串,回调参数:索引,原先的HTML值
    *限HTML/XHTML
  • text([text|fn])text() 无参数,返回元素集合中第一个元素的内容
    text('text') 设置所有选择器元素的内容
    text(fn[index,old-value]) 返回字符串,回调参数:索引,原先的值
    *可用于XML
  • val([val|fn|arr])val() 无参数,返回元素集合中第一个元素的值
    val('text') 设置所有选择器元素属性值
    val(fn[index,old-value]) 返回要设置的值,回调参数:索引,原先的值
    val('value') 设定一个select/checkbox的值
    val(['value1','value2']) 设定多选时的多个select/checkbox的值

CSS-

[-] 属性与值

  • css({key,[val|fn]}) css('key') 获取第一个元素的样式值
    css('key','value') 设置每一个匹配元素一个指定的样式
    prop('key',fn[index,old-value]) 回调参数:索引,原值
    css({key1:'value1',key2:'value2'}) 设置每一个匹配元素多个指定的样式
    *坐标和尺寸注意加px单位,属性值加引号!

[-] 元素位置[!px]

  • offset().l/t offset() 计算元素在视窗中的坐标,返回值对对象
    offset().left 获得元素视窗水平坐标
    offset().top 获得元素视窗垂直坐标
    *offset()值已包含scroll后实际视窗位置
  • offset({top:y,left:x}) offset({top:y,left:x}) 设置元素视窗坐标
    *计算的坐标以元素外围为起始点,包含padding和border,不包含margin
    *设置值对时不需要引号,且不带单位
  • position().l/t [!arg] position() 获取相对父元素的偏移值对对象
    position().left 水平位移
    position().top 垂直位移
    *不能用于设置,只能获取,可通过获取后设置新的变量值赋值给css
    *计算的坐标以元素外围为起始点,包含padding和border,不包含margin
    *注意Body清空padding margin否则继承出问题
  • scrollTop([y]) 获取/设置匹配元素相对滚动条垂直的偏移
    通过offset可获取元素位置,设置$(document).scrollTop(num)跳转至对应锚点
  • scrollLeft([x]) 获取/设置匹配元素相对滚动条水平的偏移

[+] 元素尺寸

  • height([val|fn]) height() 无参数,获取第一个元素的高度
    height(y) 设置所有元素的高度,无单位
    height(fn[index,old-value]) 回调参数:索引,原值.返回一个数值
  • width([val|fn]) width() 无参数,获取第一个元素的宽度
    width(x) 设置所有元素的宽度,无单位
    width(fn[index,old-value]) 回调参数:索引,原值.返回一个数值
  • innerHeight([y]) 获取/设置内高,含padding,不含边框
    这个方法不适用于window and document对象,可以使用.height() 代替。
  • innerWidth([x]) 获取/设置内宽,含padding,不含边框
  • outerHeight([y]) 获取/设置外高,含padding,border
    这个方法不适用于window 和 document对象,可以使用.height()代替。
    如果includeMargin参数是true,那么margin (top 和 bottom)也会被包含。
  • outerWidth([x]) 获取/设置外宽,含padding,border

效果-

[-] 基本

  • show([speed,fn])显示
  • hide([speed,fn])隐藏
  • toggle([speed,fn])开关

[-] 滑动

[-] 隐现

[-] 自定义/操控

  • animate({opt},speed,[fn]) 参考资料
    1. 单属性不能像css那样简写
    2. 百分比不是一个整数,是字符串应添加引号
    3. 可以通过在属性值前面指定+=或-=来让元素做相对运动(注意是+=,而不是+,需要赋值)

    队列动画:
    1.回调函数嵌套
    2.连缀(同一目标)
    3.顺序(同一目标
  • stop([stopAll,goToEnd)]) 停止被选元素上当前正在运行的动画
  • delay([speed]) 对被选元素的所有排队函数(仍未运行)设置延迟
  • finish() 对被选元素停止、移除并完成所有排队动画

[+] 队列

  • .queue([name],fn[next])无名称则为fx动画队列,返回第一个元素关联的函数队列或修改
  • .dequeue([name])出队(移除)并执行元素函数队列的下一个函数(非动画函数需要手动调用dequeue)
  • .clearQueue()移除队列

[+] 设置

文档处理-

[-] 内部插入

[-] 外部插入

[-] 替换

[-] 复制删除

  • clone([true/false])复制节点,true复制事件处理程序,false不复制
  • remove([expr])删除A或满足某条件的A,移除事件,返回被删除的节点
  • detach([expr])删除A或满足某条件的A,保留事件,返回被删除的节点
  • empty()删除A所有子节点,不接收参数

[-] 包裹

  • wrap(html|ele|fn)对每个元素外层逐层包裹
  • wrapInner(html|ele|fn)对每个元素内部逐层包裹
  • wrapAll(html|ele)对所有匹配元素外层整体包裹
  • unwrap()移除一层包裹,从最内包裹层脱起,多个移除则需移除多次,无参数

遍历筛选-

[-] 层级筛选

  • find()等价后代选择器E F
  • children()等价子代选择器
  • contents()查找匹配元素内部所有的子节点(包括文本节点)
  • closest() 返回被选元素的第一个祖先元素
  • parent() offsetParent() 返回第一个匹配元素用于定位的父节点
    parent() / parents() / parentsUntil() 取得一个包含着所有匹配元素的唯一父元素的元素集合/所有(不包含根元素)/直到但不包含
  • next() next() / nextall() / nextUntil()
    类似E+F 但只返回后面那个紧邻的同辈元素/所有/直到但不包含
  • prev() prev() / prevall() / prevUntil()
    取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合/所有/直到某个但不包含
  • siblings([expr]) 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

[-] 序列筛选

  • first()第一个
  • last()最后一个
  • eq(index|-index)第N个/倒数第N个
  • slice(start,[end])第N~M个

[-] 条件过滤

[-] 串联

  • add(e|e|h|o[,c]) 把元素添加到匹配元素的集合中
  • end() 结束当前链中最近的一次筛选操作,并把匹配元素集合返回到前一次的状态

[-] 检测判断

  • is(selector)根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。
    $("#checbox").is(:checked)
  • hasClass(class)检查当前的元素是否含有某个特定的类,如果有,则返回true。里面只写class名称不要加点
  • $.contains(parent,child) 判断另一个DOM元素是否是指定DOM元素的后代
    传入的是element,非jq,返回一个布尔值

事件-

[-] 事件处理

  • on(type,[sel],[data],fn)事件绑定
    on('type',[data],fn) 绑定一个事件处理函数
    on('type1 type2',[data],fn) 为多个事件绑定一个处理函数
    on({type1:fn1,type2:fn2}) 为多个事件绑定不同的处理函数
    on('type',[data],false) 取消默认行为和冒泡,注意在表单中取消的目标是form而非submit行为!
    on('type.namespace',[...,fn]) 绑定指定命名空间事件
    on('itype',...,fn).trigger() 绑定一个自定义事件加载时默认触发一次
    事件委托
    $(parent).on('type','selector',[data],fn)
    *事件委托时的selector为parent的子元素选择器
    *依旧绑定在指定父元素上,触发目标写在第2个参数,data数据在第3个参数
    *selector必须为选择器字符串,不可传递冗余复杂的CSS表达式变量!内部this是指选择器触发元素!
  • off(type,[sel],[fn])事件移除
    off() 无参数删除所有事件绑定
    off('type') 删除某个事件
    off('type',fn) 删除指定事件和处理函数
    取消事件委托
    off() 无参数,删除所有委托事件
    off('type') 删除所有type事件
    off('type','selector') *注意委托元素写在第2个参数,删除指定目标的一个或多个事件委托,事件类型由空格分隔
    off('type','selector',fn) 删除指定的事件触发的执行函数
    off('type.namespace',[...,fn]) 删除指定命名空间事件
  • one(type,[sel],[data],fn)类似on,但仅触发一次的事件!

[+] 旧事件处理

  • bind({type,[data],fn})bind('type',fn) 绑定一个事件处理函数
    bind('type1 type2',fn) 为多个事件绑定一个处理函数
    bind({type1:fn1,type2:fn2}) 为多个事件绑定不同的处理函数
    bind(type,false) 取消默认行为和冒泡,注意取消的目标是form而非submit行为!
  • unbind([type,fn])unbind() 删除所有事件绑定
    unbind('type') 删除某个事件
    unbind('type',fn) 删除指定事件和处理函数
  • delegate(ele,type,[d],fn)在统一级父元素上绑定事件,分配给触发事件的目标。
    1.在 DOM 中很多元素绑定相同事件时;
    2.在 DOM 中尚不存在即将生成的元素绑定事件时;
    我们推荐使用事件委托的绑定方式,否则推荐使用.bind()的普通绑定
    $(parent).delegate(target,type,fn)
  • undelegate()undelegate() 无参数,删除所有委托事件
    undelegate(ele,type) 删除指定的一个或多个事件,事件类型由空格分隔
    undelegate(ele,type,fn) 删除指定的事件触发执行函数
    undelegate(type) 删除所有type事件
    undelegate(type.namespace) 删除指定命名空间事件

[-] 事件模拟

  • trigger(type,[datas]) 模拟事件:让该事件在页面加载时便模拟执行一次,可连缀写法
    $(ele).type(fn[data]).trigger(type)
    简写方案:【限JQ封装的常用事件】想让某个事件执行模拟用户行为,直接再调用一个空的同名事件即可
    $(ele).type(fn).type() 单fn数据:可以传入数据,此处数据为事件函数传入的数据,而非e.data
    $(ele).type(fn[e,data]).trigger(type,data)
    多fn数据:可传入多个data数据,用[]将其包围
    $(ele).type(fn[e,data1,data2]).trigger(type,[data1,data2])
  • triggerHandler(type, [data])与trigger的区别:
    1.不会触发事件的默认行为,如表单提交
    2.只会影响第一个匹配到的元素,而.trigger()会影响所有。
    3.返回当前事件执行的返回值,如果没有返回值,则返回undefined;而.trigger()则返回当前包含事件触发元素的 jQuery 对象(方便链式连缀调用)
    4.对于自定义事件,.triggerHandler()不会冒泡,trigger()则默认会冒泡

[-] 浏览器/文档事件

  • ready(fn) 文档就绪,DOM结构完成时即执行,如果某些行为必须等待图片或css加载完成再执行则应绑定到load事件
  • load([[data],fn]) 必须完全加载完成,而ready只判定DOM结构
    当所有子元素已经被完全加载完成时,load事件被发送到这个元素。
    此事件适用于任何可使用 URL关联的任何元素:images, scripts, frames, iframes, window 对象。
  • scroll([[data],fn]) scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)
    调式IE的过程中,需要去掉console.log命令,否则会因为前面不识别而不运行,改为alert命令
    1.动态监听浏览器拖曳滚动条scroll事件应使用document绑定事件(而非html或body)
    $(document).scroll(function(){
    nowscroll = $(document).scrollTop();
    })
    2.绑定点击触发页面滚动事件,要设置'html'和'body'元素滚动,设置document无效
    设置body在IE中无效,设置html在webkit某些时候无效,尽量不要用window,未知报错
    $(selector).click(function(){
    $('body,html').animate({'scrollTop':val},speed)
    })
    当为a元素带#时,默认会跳到顶部,需要阻止默认行为!
  • resize([[data],fn])浏览器window的尺寸发生改变时

[+] 鼠标事件

  • click([[data],fn])click(fn) 绑定一个函数到点击
    click(data,fn) 绑定一个函数并传入eventData
    click() 触发此事件,可能由其他事件触发此事件发生
    *click要素:鼠标指针在元素里面时点击,鼠标指针在元素里面时释放,如果这些不被满足,mousedown 或 mouseup事件可能更加合适。
  • dblclick([[data],fn])双击
  • mousedown([[data],fn])鼠标按下
  • mouseup([[data],fn])鼠标弹起
  • mouseover([[data],fn])鼠标经过
  • mouseout([[data],fn])鼠标移出
  • mousemove([[data],fn])鼠标移动
  • mouseenter([[data],fn])鼠标穿入,穿过子元素而非本体内容时不触发
  • mouseleave([[data],fn])鼠标穿出,穿过子元素而非本体内容时不触发
  • hover(enter,leave)组合mouseenter与mouseleave
  • contextmenu([[data],fn]) 添加事件处理程序到 contextmenu 事件

[+] 键盘事件

  • keydown([[data],fn])键盘按下,返回键码e.keyCode
  • keypress([[data],fn])键盘按下,返回字符编码e.charCode
  • keyup(([[data],fn])键盘按下并弹起

[+] 表单事件

  • focus([[data],fn])获取焦点,必须为当前元素
  • blur([[data],fn])丢失焦点,必须为当前元素
  • focusin([[data],fn])获取焦点,可以为当前元素的子元素
  • focusout([[data],fn])获取焦点,可以为当前元素的子元素
  • change([[data],fn])下拉选择,单选多选,文本框/域值发生变化时
    仅限用于input、textarea、select元素。
    对于下拉选择框,复选框和单选按钮,当用户用鼠标作出选择,该事件立即触发
    但对于其他类型的input元素,该事件触发将推迟,直到元素失去焦点才会触点
  • select([[data],fn])文本被选择事件!而非下拉列表选择
  • submit([[data],fn])注意绑定的对象是form!而非submit

事件对象-

[-] 通用事件对象

  • e.data传入指定值绑定到事件函数里,可以为变量,如为函数会打印函数字符串,需要()执行函数返回函数返回的内容
  • e.result返回同一个元素上一个事件绑定函数的返回值
  • e.timeStamp返回事件触发时的时间戳
  • e.type事件类型
  • e.target触发事件的DOM元素
  • e.currentTarget事件监听的元素,即被绑定事件的元素
  • e.relatedTarget对于 mouseout 事件,它指向被进入的元素;
    对于 mousein 事件,它指向被离开的元素。
  • e.delegateTarget事件委托目标
  • e.namespace 返回当事件被触发时指定的命名空间

[-] 冒泡与默认行为

[-] 鼠标键盘事件对象

  • e.which event.which 将 event.keyCode 和 event.charCode 标准化了。推荐用 event.which 来监视键盘输入。

Ajax-

[-] 请求

  • $.ajax({option}) 执行异步 AJAX 请求
    参考资料
    名称 值/描述
    async 布尔值,表示请求是否异步处理。默认是 true。
    beforeSend(xhr) 发送请求前运行的函数。
    cache 布尔值,表示浏览器是否缓存被请求页面。默认是 true。
    complete(xhr,status) 请求完成时运行的函数(在请求成功或失败之后均调用,即在 success 和 error 函数之后)。
    contentType 发送数据到服务器时所使用的内容类型。默认是:"application/x-www-form-urlencoded"。
    context 为所有 AJAX 相关的回调函数规定 "this" 值。
    data 规定要发送到服务器的数据。
    dataFilter(data,type) 用于处理 XMLHttpRequest 原始响应数据的函数。
    dataType 预期的服务器响应的数据类型。
    error(xhr,status,error) 如果请求失败要运行的函数。
    global 布尔值,规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。
    ifModified 布尔值,规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。
    jsonp 在一个 jsonp 中重写回调函数的字符串。
    jsonpCallback 在一个 jsonp 中规定回调函数的名称。
    password 规定在 HTTP 访问认证请求中使用的密码。
    processData 布尔值,规定通过请求发送的数据是否转换为查询字符串。默认是 true。
    scriptCharset 规定请求的字符集。
    success(result,status,xhr) 当请求成功时运行的函数。
    timeout 设置本地的请求超时时间(以毫秒计)。
    traditional 布尔值,规定是否使用参数序列化的传统样式。
    type 规定请求的类型(GET 或 POST)。
    url 规定发送请求的 URL。默认是当前页面。
    username 规定在 HTTP 访问认证请求中使用的用户名。
    xhr 用于创建 XMLHttpRequest 对象的函数。
  • $(ele).load(url,[data,fn(response,status,xhr)]) 从服务器加载数据,并把返回的数据放置到指定的元素中
    参考资料
  • $.getJSON(url,[data,success(data,status,xhr)]) 使用 HTTP GET 请求从服务器加载 JSON 编码的数据
    参考资料
  • $.getScript(url,[success(response,status)]) 使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript
    参考资料
  • $.get(url,[data,function(data,status,xhr),dataType]) 使用 AJAX 的 HTTP GET 请求从服务器加载数据
    参考资料
  • $.post(url,[data,function(data,status,xhr),dataType]) 使用 AJAX 的 HTTP POST 请求从服务器加载数据
    参考资料

[-] 事件

  • $(ele).ajaxStart(fn) 规定第一个 AJAX 请求开始时运行的函数
  • $(ele).ajaxSend(fn) 规定 AJAX 请求发送之前运行的函数
  • $(ele).ajaxSuccess(fn) 规定 AJAX 请求成功完成时运行的函数
  • $(ele).ajaxStop(fn) 规定所有的 AJAX 请求完成时运行的函数
  • $(ele).ajaxComplete(fn) 规定 AJAX 请求完成时运行的函数,即使请求并未成功
  • $(ele).ajaxError(fn) 规定 AJAX 请求失败时运行的函数

[-] 序列化

解析-

回调对象-

  • $.Callbacks(flags) 返回一个多功能对象,此对象提供了一种强大的方法来管理回调列表。它能够增加、删除、触发、禁用回调函数。 参考资料
  • callbacks.add(callbacks) 在回调列表中添加一个回调或回调的集合
  • callbacks.disable() 禁用回调列表中的回调函数
  • callbacks.disabled() 确定回调列表是否已被禁用
  • callbacks.empty() 从列表中清空所有的回调
  • callbacks.fire(arguments) 传入指定的参数调用所有的回调
  • callbacks.fired() 确定回调是否至少已经调用一次
  • callbacks.fireWith([c] [,a]) 给定的上下文和参数访问列表中的所有回调
  • callbacks.has(callback) 判断回调列表中是否添加过某回调函数
  • callbacks.lock() 锁定当前状态的回调列表
  • callbacks.locked() 判断回调列表是否被锁定
  • callbacks.remove(callbacks) 从回调列表中的删除一个回调或回调集合

延迟对象-

  • $.Deferred 返回一个链式实用对象方法来注册多个回调
  • dfd.always(al,[al])当Deferred(延迟)对象被受理或被拒绝时,调用添加的处理程序
  • dfd.done(d,[d])当Deferred(延迟)对象被受理时,调用添加的处理程序
  • dfd.fail(failCallbacks) 当Deferred(延迟)对象被拒绝时,调用添加的处理程序
  • dfd.progress(proCal) 当Deferred(延迟)对象生成进度通知时,调用添加处理程序
  • dfd.promise([ty],[ta])返回 Deferred(延迟)的 Promise 对象
  • dfd.reject(args)拒绝 Deferred(延迟)对象,并根据给定的参数调用任何 failCallbacks 回调函数
  • dfd.rejectWith(c,[a])拒绝 Deferred(延迟)对象,并根据给定的 context 和 args 参数调用任何 failCallbacks 回调函数
  • dfd.resolve(args)解决Deferred(延迟)对象,并根据给定的参数调用任何 doneCallbacks 回调函数
  • dfd.resolveWith(c,[a])解决Deferred(延迟)对象,并根据给定的context 和 args 参数调用任何 doneCallbacks 回调函数
  • dfd.state()确定一个Deferred(延迟)对象的当前状态
  • dfd.notify(args)给定一个参数,调用正在延迟对象上进行的回调函数
  • dfd.notifyWith(c,[a])给定上下文和参数,调用正在延迟对象上进行的回调函数

参考资料-

iRuxu's Snippet Box
×