Javascript复习第十二天

这是我参与更文挑战的第16天，活动详情查看：更文挑战

arguments

arguments是函数内部自带的类数组对象。保存的是函数执行时实际参数

function fun(a,b,c) {
	// 函数内部自带的对象
	console.log(arguments);
}
复制代码

数据类型是对象：object

在读取数据时和数组方式相同

读取：[index]

arguments[0]
复制代码

设置： =赋值

arguments[0] = 100;
复制代码

length也可以使用

arguments.length
复制代码

arguments只能通过length属性强制将数组拉长，不能通过索引值将数组拉长

// 不能通过索引值将数组拉长
arguments[10] = 10;
console.log(arguments.length);
复制代码

arguments.length = 10;
console.log(arguments.length);
console.log(arguments);
复制代码

arguments不是数组不能使用数组的某些方法

其他语言都有函数重载的现象。函数名相同，参数个数不同，表示不同函数。

但是js没有重载现象，函数名相同，参数个数不同，表示相同函数，后面的层叠掉前面的。

// 函数名相同
// 参数个数不同
function fun(a) {
	console.log(1);
}

function fun(a,b,c) {
	console.log(2);
}
// 调用
fun();
复制代码

利用arguments模拟函数重载。同一个函数，参数个数不同实现不同的功能。

当参数个数是2，参数相加；当参数个数是3个时，需要将前两个参数较大值和第三个参数相加，其他参数输出错误。

// 使用switch语句
function sum(a,b,c) {
	switch(arguments.length) {
		// 如果是2个实参
		case 2: 
			return a + b;
			break;
		case 3: 
			return (a < b ? b : a) + c;
			break;
		// 以上情况都不满足
	default:
			throw new Error("参数有误");
	}
}

// 调用
console.log(sum(2,3));
console.log(sum(2,3,9));
console.log(sum());
复制代码

IIFE

IIFE是一个缩写，immediately-invoked function expression。即时调用函数表达式。

IIFE表示在函数定义的时候，就立即执行。

// 声明函数
function fun() {
	console.log(1);
}
// 调用
fun();
复制代码

函数名+（）调用

报错：因为小括号只有书写在函数名或者函数表达式后面，才表示调用，不能直接书写在function声明语句后面

41function fun() {
42	console.log(1);
}();
复制代码

// （）可以直接书写在函数表达式后面表示调用
var fun = function() {
	console.log(1);
}();    //1
复制代码

可以将function关键字这种通过数学运算符转为函数表达式。比如+,- ,! （）

+function fun1() {
	console.log(1);
}();

// 小括号
(function fun2() {
	console.log(1);
})();
复制代码

一般我们实际使用将一个匿名函数书写在小括号中，然后立即调用。

// 实际使用IIFE是将匿名函数书写在小括号中转为函数表达式再书写调用小括号
(function() {
	console.log(2);
})();
复制代码

IIFE作用域：只能在IIFE中使用，在外部不能再次访问该函数。（IIFE也可以关住变量，函数的作用域）

(function fun4(){
	var a = 10;
	console.log(a);
})();

// 变量作用域
// console.log(a);
复制代码

(function fun4(){
	var a = 10;
	console.log(a);
})();

// 函数的作用域
fun4();
复制代码

IIFE，实际参数书写在调用小括号中。

(function (a,b){
	console.log(a + b);
})(1,2,43,4);
复制代码

IIFE函数内部书写return可以作为一个具体的数据参与运算。

// IIFE内部也可以使用return，作为具体值参与其他计算
function sum(a,b,c) {
	// a,b较大值和c加和
	// IIFE求a,b较大值
	return c + (function(){
		return a > b ? a : b;
	})(); 
        }

// 调用
console.log(sum(1,5,9));
复制代码

结合数组观察闭包

闭包：函数天生存在性质，能够记住声明时所处的外部环境和内部语句。

数组：[]，数组中可以保存任何数据类型。将数组中每一项存放函数，函数内部可以书写序号

var arr = [];
console.log(typeof arr);

for(var i = 0 ;i < 10 ; i ++) {
	// i表示数组索引值
	// arr[i] = i;
	arr[i] = function() {
		return i;
	};
}
console.log(arr);
// 读取数组中任何一项
console.log(arr[3]);
// 函数调用()
console.log(arr[3]());
console.log(arr[1]());
复制代码

由于闭包影响，任何一个函数i都是记住的10.

函数天生存在闭包记住了i，也记住了内部语句return i，当函数调用时i已经变成了10所有所有函数的返回值都是10

通过IIFE进行解决

// 声明数组
var arr = [];
// 通过遍历书写赋值
for(var i = 0 ; i < 10 ; i ++) {
	// i表示索引值
	(function(a) {
		// 用户输入a
		arr[a] = function() {
			return a;
		};
	})(i);
}
console.log(arr);
console.log(arr[1]);
console.log(arr[1]());
console.log(arr[8]());
console.log(i);
复制代码

DOM

DOM概述

我们前面JS学习都是语言核心部分，也就是ECMAscript。一般都是在
控制台、输出语句里操作，JS还包括DOM和BOM。

DOM（Document Object Model，文档对象模型）描绘了一个层次
化的节点树，允许开发人员添加、移除和修改页面的某一部分。
这使得JavaScript操作HTML，不是在操作字符串，而是在操作节点，
极大地降低了编程难度。

DOM对很多东西做了抽象，提供了丰富的API：取得元素、css样式、
事件、运动、元素尺寸位置、节点操作。

html操作

document: 表示整个文档对象。document具有很多的方法或者属性，通过点语法进行调用

document.title网页标题

document.title
复制代码

=表示赋值

document.title = "html操作";
复制代码

可以通过点获取body对象。

document.body
复制代码

一般我们操作元素都是从获取元素对象开始

getElementById():

调用对象：document

参数：id名，注意不要书写#

返回值：元素对象

id是唯一的，通过id获取元素对象不能更改id名。（id属性是只读属性不能更改）

var oBox = document.getElementById("box");
console.log(oBox);
复制代码

可以通过点语法调用属性

// 通过点语法读取元素的属性值。
console.log(oBox.id);
复制代码

// 获取元素对象
var oPic = document.getElementById("pic");
// 可以使用=进行属性值的设置
oPic.src = "images/xiaoming.png";
复制代码

元素对象.innerHTML 可以读取元素的内部文本

// .innerHTML 可以读取内部文本
console.log(oBox.innerHTML);
oBox.innerHTML = "箱子";
复制代码

value:获取表单元素文本

// 获取元素
var oTxt = document.getElementById("txt");
// 获取value
console.log(oTxt.value);
复制代码

想获取class属性值需要改名字className

oBox.className
复制代码

获取元素属性值：

getAttribute():可以读取元素自带的属性值还可以读取元素自定义的属性值

调用对象：元素对象

参数：属性名

返回值：属性值

oBox.getAttribute("data-ming")
复制代码

setAttribute()：设置属性值

调用对象：元素对象

参数：第一个参数：属性名 第二个参数属性值

oBox.setAttribute("data-ming", "hezi");
复制代码

点语法和getAttribute()，setAttribute区别：
1、点语法只能读取，设置元素的自带属性值。

// 点语法只能读取设置自带属性值
console.log(oBox.dataMing);
复制代码

// get,setAttribute可以设置自带或者自定义属性
console.log(oBox.getAttribute("id"));
复制代码

2、 点语法在读取属性值可能需要改名字，get,set不需要改名字

class 改为 className

for 改为htmlFor

colspan 改为colSpan

rowspan改为rowSpan

console.log(oBox.className);
console.log(oBox.getAttribute("class"));
复制代码

3、点语法读取style获取的是对象，返回的是所有样式的集合。

getAttribute()读取style获取的是字符串。

4、点语法的到是style对象可以继续打点调用其他的属性

getAttribute()不能继续打点

css操作

元素对象可以通过style获取所有样式集合对象，可以继续打点调用属性名的到元素的行内样式，而不是计算后的样式。

// 只能读取行内样式不能读取计算后样式
console.log(oBox.style.width);
console.log(typeof oBox.style.width);

// 设置=，添加在行内,右侧属性值，写法和css属性值一样
oBox.style.color = "#000";
// 单一属性需要改为驼峰命名法
oBox.style.backgroundColor = "red";
复制代码

事件

事件监听：我们计算机在解析我们JS代码的时候，会去看某一些元素身上是否添加了事件。随时监听这些事件有没有被触发，如果触发就立即执行相应的行为。

	onclick		单击
	ondblclick	双击
	onmouseenter	鼠标进入
	onmouseleave	鼠标离开
	onmousedown	鼠标按下
	onmouseup	鼠标弹起
	onfocus		获取焦点
	onblur		失去焦点
	onload		加载完毕之后
复制代码

添加事件监听方法：通过给一个对象添加.事件，赋值是一个匿名函数。

这个函数会在事件被触发的时候立即执行。

总结：执行函数又多了一种方法，可以将函数绑定给事件，触发事件就会立即执行函数。

js语句需要书写在所有的标签最后，标签加载完毕之后js语句才执行。

如果js语句书写在标签之前，js先加载，html标签还没有加载完毕，我们没办法获取元素。

如果书写了onload事件，表示js在所有标签加载完毕之后才执行事件内部的语句。

调用对象只有是window。

举例：

window.onload = function() {
// 元素通过点语法绑定事件名 然后使用=赋值一个匿名函数 元素.事件名 = function(){}

	// 获取元素对象
	var oBtn = document.getElementById("btn");
	var oBtn2 = document.getElementById("btn2");
	var oPic = document.getElementById("pic");
	var oTxt = document.getElementById("txt");
	var oBd = document.getElementById("bd");
	var oBox = document.getElementById("box");


	console.log(oBtn);



	// 单击onclick,点击btn弹出内部文本
	// 触发事件，函数会立即执行不需要添加调用小括号
	oBtn.onclick = function() {
		// 除了自定义属性使用get,set其他都使用点语法
		alert(oBtn.value);
	};
}
复制代码