可能这辈子都记不住了

烂笔头
本文共 2,130 字 预计花费 9 分钟

一些琐碎记不住的东西

逗号运算符

表达形式： 表达式1，表达式2 … 表达式n
求解过程： 先计算表达式1，在计算表达式2，以此类推。
最终的值为表达式n的值

运算符优先级

1
2
3
4
5
6
7
8
9
10
var count = 0;

console.log(typeof count === "number"); // true , 这个不用解释了

console.log(!!typeof count === "number"); // false

// 这里涉及到就是优先级和布尔值的问题
// typeof count 就是字符串"number"
// !!是转为布尔值(三目运算符的变种),非空字符串布尔值为 true
// 最后才=== 比较 , true === "number" , return false
1
2
x = 8*2,x*4
// 先计算 8*2 再赋值给 x 最后计算表达式结果为 64  x最终值为 16
1
2
(x=8*2,x*4),x*2
// 先赋值 x=16 再逗号得64 ，最后外层逗号得整个表达式的值为32， x最终为16
1
2
x=(z=5,5*2) /*整个表达式为赋值表达式，它的值为10，z的值为5*/
x=z=5,5*2 /*整个表达式为逗号表达式，它的值为10，x和z的值都为5*/

带命名空间的事件(namespaced events)

on()事件的第一个参数是事件的类型，可以通过click.[name]的方式对事件加标识以方便后期移除特定事件。代码如下：

1
2
3
4
5
6
7
8
$('a').on('click', function() {
  //Handler 1
});
$('a').on('click', function() {
  //Handler 2
});

$('a').off('click') 会将两个移除

1
2
3
4
5
6
7
8
$('a').on('click.namespace1', function() {
  //Handler 1
});
$('a').on('click.namespace2', function() {
  //Handler 2
});

$('a').off('click.namespace2');

只移除名叫namespace2的点击事件

几个测试题

1
2
3
4
5
[] == []   // fasle
5 =='5'    // true
5 === '5'  // fale
5 / 0      // Infinity
+new Date() //
1
2
3
4
5
6
if(!("a" in window)){
    var a = 10;
}
console.log(a); // undefined

// 这里是因为 var a 变量声明提升，导致判断一直为 false 不进分支。所以结果为 undefined

this

1
2
3
4
5
6
7
8
function Person() {
  this.age = 0;       // 指向实例化的对象
  setInterval(function growup() {
    this.age++;       // 指向 window
  }, 1000);
}

var p = new Person();

typeof(null) === 'object' 的原理

不同对象在底层都为二进制，在 JS 中前三位都为 0 的话就会被判定为 object，null 的二进制都是 0。

Javascript 类型

主类型(6): null, undefined, boolean, number, string, object

object 子类型(9)：String, Number, Function, Boolean,Array, Date Object, RegExp, Error

https 请求方式

options, head, put, delete, get, get, post, trace, connect

阻止表单提交

1
2
3
4
5
form.addEventListener("submit", function(e) {
  var event = event || window.event;
  event.preventDefault();
  window.event.returnValue = false;  // IE 6 ~ 8
})

jQuery实现：

1
2
3
4
5
6
7
8
9
10
11
12
// 取消表单提交动作，防止事件冒泡
$(form).on('submit', false);

// 仅取消默认动作
$(form).on('submit', function(event) {
  event.preventDefault();
})

// 防止事件冒泡，但不禁止提交行为
$(form).on('submit', function(event) {
  event.stopPropagation();
})

禁用 input 记忆性输入

1
2
3
IE: <input type="text" autocomplete = "off">
Firefox: <input type="text" disableautocomplete="off">
若Firefox方式对chrome无效，则在 <form> 上统一设置 autocompelet = "off"

jQuery 事件委托

1
2
3
$('body').on('click', 'div', function() {
  console.log($(this).text());
})

快速生成时间戳

1
var current = +new Date();

跨 iframe 获取元素

1
$('子元素', '父元素')

window.parent.document 包含当前窗口的父窗口

Document.readyState 文档加载状态

value:

  • loading/ 加载中 => document 仍在加载中

  • interactive / 互动 => document 已被加载和解析，但 image, CSS, Javascript 仍在加载中。 此阶段会触发 DomContentLoaded 事件

  • compete / 完成 => document 和所有子资源完成加载。 load 事件加载

readyState 属性值变化会触发 document.onreadyStateChange 事件

IE 下 document.documentElement.doScroll，是 IE 下特有的方法，检测 DOM 是否加载完成。

行内元素转块级元素

position: absolute / fixed; 和 float 都可以使 行内元素转为块级元素

i++ 与 ++i

++i & i++

例：购物车修改数量

1
shuliang = (++shuliang > stock ? stock : shuliang)

取整与转换

1
2
3
4
5
6
7
8
9
10
11
12
var ac = '1.23423';

/**
* 字符串转数字
*/
+ac  // 1.23423

/**
* 取整
*/
~~ac
ac >> 0

判断奇偶

1
2
3
4
5
6
7
8
9
10
11
12
(222 & 1) == 0 ? '偶数' : '奇数'

/**
*取最近的偶数
*/
( 1111 | 1 )  // 1110

/**
*除2取整
*/
~~(5/2)
5 >> 1

强制 Webkit 内核渲染

很多国产浏览器都是双内核，例如“360、QQ”等，它们都提供了强制使用 Webkit 内核渲染的开启模式

1
<meta name="renderer" content="webkit" />

CSS 语法中表示参数符号类型

以 linear-gradient() 举例

1
background-image: linear-gradient(  [ <angle> | <side-or-corner> ,]? <color-stop> [, <color-stop>]+ );
  • [] 在正则中表示一个字符类，这里，你可以理解为一个小单元。
  • | 表示候选。也就是“或者”的意思，要么前面的，要么就后面的。
  • ? 为量词，表示0个或1个，言外之意就是，你可以不指定方向，直接渐变色走起。例如：
    1
    background:linear-gradient(red, yellow);

就是从上往下的红黄条纹效果。

  • + 也是量词，表示1个或者更多个。因此，终止颜色是不可缺少的。例如：linear-gradient(red)是酱油命，白板。
  • <> 中的是关键字，主要是让开发人员知道这里应该放些什么内容。

CSS 选择器排序

1.id选择器（#myid）

2.类选择器（.myclassname）

3.标签选择器（div,h1,p）

4.相邻选择器（h1+p）

5.子选择器（ul < li）

6.后代选择器（li a）

7.通配符选择器（*）

8.属性选择器（a[rel=”external”]）

9.伪类选择（a:hover,li:nth-child）

CSS 可继承 & 不可继承属性

不可继承

  1. display：规定元素应该生成的框的类型

  2. 文本属性：

    vertical-align：垂直文本对齐

    text-decoration：规定添加到文本的装饰

    text-shadow：文本阴影效果

    white-space：空白符的处理

    unicode-bidi：设置文本的方向

  3. 盒子模型的属性

    width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left

  4. 背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment

  5. 定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

  6. 生成内容属性：content、counter-reset、counter-increment

  7. 轮廓样式属性：outline-style、outline-width、outline-color、outline

  8. 页面样式属性：size、page-break-before、page-break-after

  9. 声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

可继承属

  1. 字体系列属性
    font：组合字体

    font-family：规定元素的字体系列

    font-weight：设置字体的粗细

    font-size：设置字体的尺寸

    font-style：定义字体的风格

    font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

    font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。

    font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。

  2. 文本系列属性

    text-indent：文本缩进

    text-align：文本水平对齐

    line-height：行高

    word-spacing：增加或减少单词间的空白（即字间隔）

    letter-spacing：增加或减少字符间的空白（字符间距）

    text-transform：控制文本大小写

    direction：规定文本的书写方向

    color：文本颜色

  3. 元素可见性：visibility

  4. 表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout

  5. 列表布局属性：list-style-type、list-style-image、list-style-position、list-style

  6. 生成内容属性：quotes

  7. 光标属性：cursor

  8. 页面样式属性：page、page-break-inside、windows、orphans

  9. 声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

所有元素可以继承的属性

  1. 元素可见性：visibility

  2. 光标属性：cursor

内联元素可以继承的属性

  1. 字体系列属性

  2. 除text-indent、text-align之外的文本系列属性

块级元素可以继承的属性

  1. text-indent、text-align

参考

头部高度固定，剩下自适应

头部正常排列，下方 width: 100%;absolute: top: 100px; bottom: 0;

普通元素不设置宽度的时候改为绝对定位会丢失宽度

表单只有一个 input text 时

W3C 标准中有如下规定：

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

当 form 元素中只有一个输入框时， 在该输入框中按下回车应该提交表单。

Copyright © 2017 - 2018 空脑壳 All Rights Reserved.

冀ICP备17022284号