知识点1：js基础,DOM,BOM

js基础

函数

1. 语法

function fun(){}
var fun = function(){}//匿名函数

• 经典题目
  

3. 函数算法题

• 寻找喇叭花数
  喇叭花数是这样三位数，每一位数字的阶乘之和恰好等于它本身，即abc = a! + b! + c!,其中abc标识三位数
  思路：将计算的某个数字的阶乘封装成函数

function factorial(n){
	var res = 1;
	for (var i = 1; i <= n; i++){
		res *= i
	}
	return res
}
for (var i = 100; i <= 999; i++){
	var i_str = i.toString()
	var a = Number(i_str[0])
	var b = Number(i_str[1])
	var c = Number(i_str[2])
	if(factorial(a) + factorial(b) + factorial(c) == i){
		console.log(i)
	}
}

• js内置sort()函数

var arr = [232, 678, 242, 88]
arr.sort(function(a, b) {
	if(a>b){//如果a>b，返回正数，交换位置
		return 1
	} else {
	return -1
	}
})
//简写（从小到大排序）
arr.sort(function(a, b) {
	return a - b
})

4. 递归
   函数内部自己调用自己

• 递归算法（斐波那契数列）
  1，1，2，3，5，8，13，21…

//返回斐波那契数列下标为n的那项的值
function fib(n){
	if(n==0 || n==1) return 1;
	return fib(n-1) + fib(n-2)
}

5. 闭包
   闭包是函数本身和该函数声明时所处的环境状态的组合
   函数能“记住”其定义时所处的环境，即时函数不在其定义的环境中被调用，也能访问定义时所处环境的变量

• 用途1：记忆性
• 函数所处的环境的状态会始终保持在内存中，不会在外层函数调用后被清除
• 用途2：模拟私有变量
• 使用闭包注意点：不能滥用闭包，否则会造成网页性能问题，严重时可能导致内存泄露，所谓内存泄露是指程序中已动态分配的内存由于某种原因为释放或无法释放

//在js中，每次创建函数时都会创建闭包，但是需要换一个地方执行才能被观察出来
function fun(){
	var name = "慕课网";
	function innerFun(){
		alert(name)
	}
	return innerFun;
}
var inn = fun();
inn();//慕课网

• 闭包面试题

function addCount(){
	var count = 0;
	return function (){
		count += 1;
		console.log(count)
	};
}
var fun1 = addCount();
var fun2 = addCount();
fun1();//1
fun2();//1
fun2();//2
fun1();//2

6. 立即调用函数（IIFE）

//函数转为函数表达式后才能被调用
(function () {
	statements//任意语句
})()
+function () {
	statements//任意语句
}()
-function () {
	statements//任意语句
}()

• IIFE作用1：为变量赋值

var age = 12;
var sex = '男';
var title = (function () {
	if(age < 18){
		return '小朋友'
	} else {
		if(sex == '男'){
			return '先生'
		} else {
			return '女士'
		}
	}
})()

• IIFE作用2：将全局变量变为局部变量

var arr = [];
for (var i = 0; i < 5; i++) {
	//如果不放入立即调用函数时，弹出的都是5看
	(function (i) {
		arr.push(function () {
			alert(i)
		})
	})(i)
}
arr[2]()  //2

DOM

DOM是js操作html文档的接口，使文档操作变得非常优雅，简便。
DOM最大的特点就是将文档表示为节点树

nodeType

节点的nodeType属性可以显示这个节点具体的类型

nodeType值	节点类型
1	元素节点
3	文字节点
8	注释节点
9	document节点
10	DTD节点(文档类型声明)

访问节点的方法

1. document.getElementById()   ---IE6
2. document.getElementsByTagName()   ---IE6
3. document.getElementsByClassName()   ---IE9
4. document.querySelector()   ---IE8部分，IE9
5. document.querySelectorAll()   ---IE8部分，IE9

延迟运行

• 通常js代码一定要写在html节点后面，否则js无法获取相应的节点
• 使用window.inload = function(){}事件，页面加载完毕后在执行指定的代码

节点的关系

元素节点的设置

let oBox = document.getElementById('box')
oBox.innerText = '内容'
oBox.innerHtml = '<p>内容</p>'
oBox.style.backgroundColor = 'red'
//不符合W3C标准的属性，要使用setAttribute()设置
oBox.setAttribute('data-n',10)
oBox.getAttribute('data-n')  //10

创建节点

let oBox = document.getElementById('box');
let p = document.creatElement('p');
oBox.appenfChildren(p);  // 往父元素oBox的最后追加p节点
oBox.insterBefore(p,oBox2)   // 往父元素oBox里的oBox2之前加入p节点

删除，克隆节点

let oBox = document.getElementById('box');
oBox.removeChild(p);  //删除oBox里面的p节点
let oBox2 = oBox.cloneNode(); //克隆节点
let oBox2 = oBox.cloneNode(true); //深度克隆节点，内部节点也会被克隆

事件监听

//DOM0级事件监听，只能监听冒泡阶段
oBox.onClick = function(){}
//DOM2级事件监听,能监听捕获阶段true 或 冒泡阶段false
oBox.addEventListener('click',function(){},true)

事件对象

1. 简介
   事件处理函数提供一个形式参数，他是一个对象，封装了本次事件的细节，这个参数通常用event或e来表示

oBox.onmousemove = function(e){}

2. charCode和keyCode属性
e.charCode属性通常用于onkeypress（不监听系统按钮）事件中，表示用户输入的字符的“字符码”
e.keyCode属性通常用于onkeydown和onkeyup事件中，表示用户按下的按键的"键码"
3. e.preventDefault()
阻止默认行为
4. e.stopPropagation()
阻止事件传播
5. e.deltaY
滚轮混动的方向
6. 弹出层案例

<button id="btn">弹出</button>
<div id="modal">弹出层</div>
let oBtn = document.getElementById('btn');
let oModal = document.getElementById('modal');
//点击按钮，显示弹出层
oBtn.onClick = function(e){
	e.stopPropagation(); //阻止时间继续传播到document上
	oModal.style.display = 'block'
}
//点击页面任何地方，弹出层关闭
document.onClick = function(){
	oModal.style.display = 'none'
}
//点击弹出层内部时，不关闭弹出层
oModal.onClick = function(e){
	e.stopPropagation(); //阻止时间继续传播到document上
}

事件委托

什么叫事件委托呢？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。（利用事件冒泡机制，将后代元素事件委托给祖先元素）
利用e.target获取到事件源（标准浏览器用e.target，IE浏览器用
event.srcElement，）
使用场景：

1. 当有大量元素要批量增加事件监听时，使用事件委托减少内存开销（减少dom操作）
2. 当有动态添加元素时，使用事件委托可以让新元素也具有事件监听
   注意点：
3. 不能委托不冒泡的事件给委托元素，如onmouseenter(onmouseover冒泡)
   适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。
4. 最内存元素不要有委外的内存元素，如
5. e.target指这里列表项

定时器和延时器

//定时器
setInterval(function(a,b){
	//形参a是11，b是22
	//setInterval从第三个参数开始标识穿额度函数的参数
},1000,11,22)
//延时器
setTimeout(function(){},1000)

BOM

BOM（浏览器对象模型）让Javascript可以和浏览器进行交流
BOM的核心是一个window对象，一定程度上window对象即代表了这个浏览器窗口

window对象5个核心对象

document：文档对象
history：客户端浏览历史记录
location：网页地址
navigator：客户端浏览器信息
screen：客户端屏幕信息

window对象属性

Window对象是全局对象，所有的表达式都在该环境中计算，所有没有显式的指定归属的方法和变量都将被归到window对象，成为window的属性和方法。
例如我们之前常用的alert()，而不用写window.alert().

窗口尺寸相关属性或卷动高度

window.innerHeight //浏览器窗口的内部高度
window.innerWidth //浏览器窗口的内部宽度

• client 是包含padding 不包含滚动条，border。可视内容宽度。比offset少滚动条和border

document.documentElement.clientWidth);//屏幕可视宽度
document.documentElement.clientHeight);//屏幕可视高度

• offset包含滚动条 border

offsetTop  //如果盒子没有设置定位，到浏览器的顶部距离；设置定位后，以父盒子的位置为基准
offsetLeft  //如果盒子没有设置定位，到浏览器的左部距离；设置定位后，以父盒子的位置为基准
offsetWidth  //内容+padding+border
offsetHeight  //内容+padding+border

• scroll 是整体高度，包括没显示出来部分，含padding 不含滚动条和border

window.scrollY //距离浏览器内容区顶端的距离,只读
document.documentElement.scrollTop //距离浏览器内容区顶端的距离,可设置大小

scroll事件

窗口卷动时触发scroll事件，可以通过window.onscroll或windoe.addEventListener(‘scroll’)来绑定事件处理函数

resize事件

在窗口大小改变时，就会触发resize事件，可以通过window.onresize或windoe.addEventListener(‘resize’)来绑定事件处理函数

Navigator对象

History对象

Location对象

window.location.search可以获取get请求参数

Screen对象

screen.availWidth //可用的屏幕宽度
screen.availHeight //可用的屏幕高度