我的前端之路
参考网站：[http://jquery.cuishifeng.cn/]
1.原型 $().xxx()
2.对象 $.xxx()
getElementById
上下文只能是document（只有document这个实例的原型链上才能找到这个方法，其它实例都找不到）
ID重复了获取第一个
IE6~7中会把表单元素的name当做id使用
getElementsByTagName
获取当前上下文中，所有子子孙孙中标签名叫做XXX的元素
getElementsByClassName
IE6~8中不兼容
getElementsByName
在IE浏览器中只对表单元素的name起作用
上下文也只能是document
querySelector\querySelectorAll
不兼容IE6~8
没有DOM映射
- document.documentElement
- document.body
- document.head
- …
offsetParent
当前盒子的父级参照物
offsetTop / offsetLeft
获取当前盒子距离其父级参照物的偏移量(上偏移/左偏移) 当前盒子的外边框开始~父级参照物的内边框
“参照物”：同一个平面中，元素的父级参照物和结构没有必然联系，默认他们的父级参照物都是BODY（当前平面最外层的盒子） BODY的父级参照物是NULL
- center.offsetParent //=>BODY
- inner.offsetParent //=>BODY
- outer.offsetParent //=>BODY
“参照物可以改变”：构建出不同的平面即可（使用zIndex，但是这个属性只对定位有作用），所以改变元素的定位(position:relative/absolute/fixed)可以改变其父级参照物
scrollTop / scrollLeft
滚动条卷去的宽度或者高度
- 最小卷去值：0
- 最大卷去值：真实页面的高度 - 一屏幕的高度 document.documentElement.scrollHeight-document.documentElement.clientHeight
- 在JS盒子模型13个属性中，只有scrollTop/scrollLeft是“可读写”属性，其余都是“只读”属性
(?!) 负向预查
让其左边的元字符出现多少次]
[xyz] [^xyz] [a-z] [^a-z]
- 1.中括号中出现的元字符一般都是代表本身含义的
- 2.中括号中出现的两位数，不是两位数，而是两个数字中的任意一个
2
3
4
5
6
7
8
9
10
11
12
console.log(reg.test('n'));//=>true
console.log(reg.test('1'));//=>true
console.log(reg.test('nn'));//=>true
console.log(reg.test('\n'));//=>false
let reg = /^[.]+$/;
console.log(reg.test('n'));//=>false
console.log(reg.test('1'));//=>false
console.log(reg.test('nn'));//=>false
console.log(reg.test('\n'));//=>false
console.log(reg.test('...'));//=>true
1.在严格模式下不支持使用 “arguments.callee / arguments.callee.caller” （Uncaught TypeError: ‘caller’, ‘callee’, and ‘arguments’ properties may not be accessed on strict mode functions or the arguments objects for calls to them）
2.在严格模式下ARGUMENTS和形参没有映射机制
3.在严格模式下不允许给一个对象设置重复属性名的：“obj={n:10,n:20}”
4.在严格模式下，函数执行，如果没有明确指定执行的主体（函数前面没有点），不再像非严格模式下一样，统一都交给window，而是让this指向undefined，代表没有执行主体：“严格模式下，有执行主体this就指向谁，没有执行主体，this就是undefined”
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/*function fn(x) {
arguments[0]=100;
console.log(x);//=>100 存在映射机制
}
fn(10);*/
/*var obj={
n:10,
n:20
};
console.log(obj.n);*/
function fn() {
console.log(this);//=>window
}
fn();
}();
~function () {
"use strict";
/*function fn(x) {
arguments[0]=100;
console.log(x);//=>10 不存在映射机制
}
fn(10);*/
/*var obj={
n:10,
n:20
};
console.log(obj.n);*/
function fn() {
console.log(this);//=>undefined
}
fn();
}();
在实际项目基于面向对象开发的时候(构造原型设计模式),我们根据需要,很多时候会重定向类的原型(让类的原型指向自己开辟的堆内存
- 自己开辟的堆内存中没有constructor属性,导致类的原型构造函数缺失（解决：自己手动在堆内存中增加constructor属性）
- 当原型重定向后，浏览器默认开辟的那个原型堆内存会被释放掉，如果之前已经存储了一些方法或者属性，这些东西都会丢失（所以：内置类的原型不允许重定向到自己开辟的堆内存，因为内置类原型上自带很多属性方法，重定向后都没了，这样是不被允许的）
它是CSS预编译语言，和它类似的还有sass/stylus…
css是标记语言，不是编程语言，没有类、实例、函数、变量等东西；而less等预编译语言就是让css具备面向对象编程的思想；但是浏览器不能直接识别和渲染less代码，需要我们把less代码预先编译为正常的css后，再交给浏览器渲染解析；
导入less.js即可
2
3
4
5
<link rel="stylesheet/less" href="css/demo1.less">
//=>导入JS文件即可
<script src="js/less-2.5.3.min.js"></script>
当栈内存(作用域)形成，JS代码自上而下执行之前，浏览器首先会把所有带 “VAR”/“FUNCTION” 关键词的进行提前 “声明” 或者 “定义” ，这种预先处理机制称之为 “变量提升”
声明(declare)：var a （默认值undefined）
定义(defined)：a=12 （定义其实就是赋值操作）
变量提升阶段
- 带“VAR”的只声明未定义
- 带“FUNCTION”的声明和赋值都完成了
- 变量提升只发生在当前作用域（例如：开始加载页面的时候只对全局作用域下的进行提升，因为此时函数中存储的都是字符串而已）
- 在全局作用域下声明的函数或者变量是“全局变量”，同理，在私有作用域下声明的变量是“私有变量” [带VAR/FUNCTION的才是声明]
1 | console.log(a);//=>undefined |
变量带var声明和直接声明
在全局作用域下声明一个变量，也相当于给WINDOW全局对象设置了一个属性，变量的值就是属性值（私有作用域中声明的私有变量和WINDOW没啥关系）
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
console.log(window.a);//=>undefined
console.log('a' in window); //=>TRUE 在变量提升阶段，在全局作用域中声明了一个变量A，此时就已经把A当做属性赋值给WINDOW了，只不过此时还没有给A赋值，默认值UNDEFINED in：检测某个属性是否隶属于这个对象
var a = 12;//=>全局变量值修改，WIN的属性值也跟着修改
console.log(a);//=>全局变量A 12
console.log(window.a);//=>WINDOW的一个属性名A 12
a = 13;
console.log(window.a);//=>13
window.a = 14;
console.log(a);//=>14
//=>全局变量和WIN中的属性存在 “映射机制”
//=>不加VAR的本质是WIN的属性
*/
1 | console.log(a, b);//=>undefined undefined |
在当前作用域下，不管条件是否成立都要进行变量提升
- =>带VAR的还是只声明
- =>带FUNCTION的在老版本浏览器渲染机制下，声明和定义都处理，但是为了迎合ES6中的块级作用域，新版浏览器对于函数（在条件判断中的函数），不管条件是否成立，都只是先声明，没有定义，类似于VAR
重名问题
2.关于重名的处理：如果名字重复了，不会重新的声明，但是会重新的定义（重新赋值）[不管是变量提升还是代码执行阶段皆是如此]
1 | fn();//=>4 |