js杂记
1: return
如果一个函数不需要返回值，可以不写return
当函数中不写return的时候，返回的是undefined
return 后面可以什么都不跟，如果return后面什么都不跟,会返回undefined; 函数执行的过程中只要遇到return 后面的代码就不会再执行
function test(a, b) {
return; // 函数执行的过程中只要遇到return 后面的代码就不会再执行
console.log(a, b);
}
取消a标签（跳转到href），文本框输入（配合keycode禁止输入东西），右键菜单等的默认行为
return false;
DOM标准方法
e.preventDefault();
2: 预解析
变量提升，把变量的声明提升到当前作用域的最上面，不包括变量的赋值
函数提升，把函数的声明提升到当前作用域的最上面，不包括函数的调用
3: this的几种情况
1 普通函数中的this -> window
2 构造函数中的this -> 是当前构造函数创建的对象
3 方法中的this -> 方法所属的对象
4 事件处理函数中的this -> 事件源，谁调用的该事件this就指向谁
4:
如何访问对象的属性
obj.name
obj['name']
for in 可以遍历对象的成员
for(var key in obj) {
console.log(obj[key] + "-------" + key);
}
删除属性 delete 删除对象的成员
var o = {
name: 'abc',
say: function () {
}
}
delete o.name;
console.log(o.name);
5:
数据类型
简单数据类型，基本数据类型/值类型
Number String Boolean Null Undefined
复杂数据类型，引用类型
Ojbect
数据在内存中存储
简单数据类型 存储在内存中的栈上
复杂数据类型 存储在内存中的堆上
6: 获取毫秒数
var d = new Date();
var d = new Date('1988-8-8 8:8:8');
console.log(d.valueOf()); = console.log(d.getTime()); //1585050146391 ＝ var num = Date.now(); // 浏览器兼容问题 HTML
// 获取日期中的指定部分
var d = new Date();
console.log(d.getFullYear());
// !--------注意：月份是从0开始的-------------
console.log(d.getMonth() + 1);
console.log(d.getDate());
console.log(d.getHours());
console.log(d.getMinutes());
console.log(d.getSeconds());
7:
instanceof 判断某个对象是否是某个构造函数的实例/对象
判断参数arr 是否是数组对象
console.log(arr instanceof Array)
toString()/valueOf() 每一个对象都具有这两个方法
8:表单元素属性
- value 用于大部分表单元素的内容获取(option除外)
- type 可以获取input标签的类型(输入框或复选框等)
- disabled 禁用属性
- checked 复选框选中属性
- selected 下拉菜单选中属性
9 : var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
10:
box.firstChild 获取第一个子节点
box.firstElementChild 获取第一个子元素， 有兼容性问题，从IE9以后支持
box.lastChild 获取最后一个子节点
box.lastElementChild 获取最后一个子元素， 有兼容性问题，从IE9以后支持
nextSibling 下一个兄弟节点
nextElementSibling 下一个兄弟元素
previousSibling 上一个兄弟节点
previousElementSibling 上一个兄弟元素
节点操作，方法
appendChild()
insertBefore()
removeChild()
replaceChild()
节点层次，属性
parentNode
childNodes
children
nextSibling/previousSibling
firstChild/lastChild
克隆cloneNode() 复制节点
参数 true 复制节点中的内容
false 只复制当前节点，不复制里面的内容
var cloneLi = ul.children[0].cloneNode(true);
11: 事件绑定
addEventListener 的第三个参数为false的时候 ： 事件冒泡
addEventListener 的第三个参数为true的时候 ： 事件捕获
box.onclick 只有事件冒泡
box.attachEvent 只有两个参数， 只有事件冒泡
兼容性处理：
if(document.attachEvent){
document.attachEvent("onclick", function(){})
}
else {
document.addEventListener("click", function(){})
}
停止事件传播 取消冒泡
标准的DOM方法
e.stopPropagation();
取消冒泡 非标准的方式 老版本的IE支持
e.cancelBubble = true;
12: box.appendChild(el);
box.insertBefore(el,box.children[0]);
如果box里面没有子元素的时候，不能用inserBefore,需要先判断子元素的长度，如果为０，需要先用appendChild();
13: 处理事件对象的浏览器兼容性 e = e || window.event;
e.target 获取真正触发事件的对象 浏览器兼容问题
在老版本的IE中 srcElement
处理兼容性问题
var target = e.target || e.srcElement;
14: 获取事件名称
box.onmouseover = function (e) {
e = e || window.event;
console.log(e.type);//mouseover click mouseout
}
15: 表格应用：tBodies[0] tHead tFoot rows[i] cells[i]
16: ctrlKey shiftKey altKey 键 +'\n';是加换行
e.keyCode == 13 && e.ctrlKey; 回车＋ctrl 键
17: 属性继承可以通过call来继承，方法继承必须通过for循环来继承，否则会出现堆和栈的问题
function B () {
A.call(this);
}
for(var i in A.prototype){
B.prototype[i] = A.prototype[i];
}
18: instanceof运算符，查看对象是否是某个类的实例
constructor 作用记录了创建该对象的构造函数 记录了创建该对象的构造函数
当我们改变构造函数的prototype的时候，需要重新设置constructor属性
Student.prototype = {
constructor: Student,
sayHi: function () {
console.log('hhaah');
}
}
组合继承：借用构造函数 + 原型继承
function Student(name, age, sex, score) {
Person.call(this, name, age, sex);
this.score = score;
}
Student.prototype = Person.prototype; ／／ Student.prototype = new Person();
Student.prototype.constructor = Student;
// 学生特有的方法
Student.prototype.exam = function () {
console.log('考试');
}
19: mouseenter mouseleave 不会触发事件冒泡 mouseover mouseout 会触发事件冒泡
20: 自调用函数，开启一个新的局部作用域，防止命名冲突：
举个例子
;(function (window, undefined) {
var Tools = {
getRandom: function (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
}
// 暴露Tools给window
window.Tools = Tools;
})(window, undefined)
;防止上一个函数与自调用函数合并在一起执行
最好传入两个参数，分别是window和undefined：用来更好的压缩代码
21: 闭包：在一个作用域中可以访问另一个作用域的变量, 子函数可以使用父函数中的局部变量
闭包特点：延展了函数的作用域范围
var heroes = document.getElementById('heroes');
var list = heroes.children;
for (var i = 0; i < list.length; i++) {
var li = list[i];
(function (i) {
li.onclick = function () {
// 2 点击li的时候输出当前li对应的索引
console.log(i);
}
})(i);
}
22: 递归： 函数自己调用自己
function getSum(n) {
// 递归结束的条件
if (n === 1) {
return 1;
}
return n + getSum(n - 1);
}
console.log(getSum(3));
23: Math.round(). 四舍五入
Mat.ceil(). 向上取整
Math.floor()，parseInt() 向下取整
24:
把面向过程的程序，改写成面向对象的形式
原则： 不能有函数套函数、但可以有全局变量
过程 onload → 构造函数
全局变量 → 属性
函数 → 方法
改错: this、事件、闭包、传参
通过闭包传递this
25: search()找到并且返回字符串出现的位置，如果没找到-1
26: ES6 : http://caibaojian.com/es6/
| onabort | 图像加载被中断 | 1 | 3 | 4 |
| onblur | 元素失去焦点 | 1 | 2 | 3 |
| onchange | 用户改变域的内容当文本改变并且失去焦点 | 1 | 2 | 3 |
| onclickoncontextmenu | 鼠标点击某个对象右键菜单 | 1 | 2 | 3 |
| ondblclick | 鼠标双击某个对象 | 1 | 4 | 4 |
| onerror | 当加载文档或图像时发生某个错误 | 1 | 3 | 4 |
| onfocus | 元素获得焦点 | 1 | 2 | 3 |
| onkeydown | 某个键盘的键被按下 | 1 | 4 | 3 |
| onkeypress | 某个键盘的键被按下或按住 | 1 | 4 | 3 |
| onkeyup | 某个键盘的键被松开当用户输入的时候验证文本框内的内容是否合法 | 1 | 4 | 3 |
| onload | 某个页面或图像被完成加载 | 1 | 2 | 3 |
| onmousedown | 某个鼠标按键被按下 | 1 | 4 | 4 |
| onmousemove | 鼠标被移动 | 1 | 6 | 3 |
| onmouseout | 鼠标从某元素移开 | 1 | 4 | 4 |
| onmouseover | 鼠标被移到某元素之上 | 1 | 2 | 3 |
| onmouseup | 某个鼠标按键被松开 | 1 | 4 | 4 |
| onreset | 重置按钮被点击 | 1 | 3 | 4 |
| window.onresize | 窗口或框架被调整尺寸 | 1 | 4 | 4 |
| onselect | 文本被选定 | 1 | 2 | 3 |
| onsubmitwindow.onscroll | 提交按钮被点击页面滚动时 | 1 | 2 | 3 |
|
onunload mousewheel |
用户退出页面 鼠标滚轮事件 |
