标签：function arr console log 自建 JavaScript 文档数组 var

JavaScript温习文档

JavaScript的使用场景

网页特效
发(node.js)
桌面程序(electron)
app(cordova)
硬件控制(物联网)
游戏开发(cocos2d-js)

浏览器执行js过程

渲染引擎: 解析html和css, chrome用的blink, 老版本用的webkit
js引擎: 也叫js解析器, 用来读取网页中的JavaScript代码, 对其处理后运行,
逐行解释并执行的脚本语言

JS的组成

ECMAScript
DOM
BOM

基础操作

弹出警示框

alert(mag);

控制台打印输出信息

console.log(mag);

弹出输出框

prompt(info);

用户可以输入, 归属浏览器
取到的值为字符型string

将弹出输入框用户输入的内容传递给变量;

var 变量名 = prompt('');

用来判断非数字

如果是数字false,如果不是数字true

isNaN(msg);

eg:
	console.log(typeof num);

获取变量数据类型

typeof msg

变量声明

声明变量

var 变量名;

声明后的变量, 后面调用时可以不加var了
声明后不赋值, console.log(msg) 为undefined

变量赋值

age = 变量值;

不声明, 且不赋值, 报错, tell is not defined
不声明直接赋值, 可以使用但不推荐, 为全局变量

同时进行声明和赋值

var 变量名 = 'hello';

多变量同时初始化,(逗号分隔,分号结尾)

var 变量名 = 10,
	变量名 = 'hello',
	变量名 = 变量值;

字符串

字符串类型js推荐使用单引号, 因为html用双引号, 增强区别性
字符串嵌套单引号套双引号, 外双内单也行, 内部不能加标签
字符串变量命名strname, 感觉不错

定义方法	类型
var vari = undefined;	不是字符串
var 变量名 = none;	数据类型为object

计算数据长度

变量名.length

数据类型转换

转换为字符串

变量.toString();

eg:
	var num = 1;
	alert(num.toString());

强制转为字符串

String(变量);

eg:
	var num = 1;
	alert(String(num));

加号拼接字符串(重点,常用)

和字符串拼接的都是字符类型, 隐式转换

变量 + ''

内置对象将数组转换为字符串

数组名.toString() 

eg:
	var arr = [2, 3, 4, 5];
	console.log(arr.toString());

join(分隔符), 方便转换数组

eg:
	var arr1 = ['green', 'blue', 'blue'];

	console.log(arr1, join()); 
			//默认输出逗号连接的字符串

	console.log(arr1, join('-')); 
			//输出green-blue-blue的字符串,-以连接

	console.log(arr1.join('&')); 
			//实际开发使用这种提交表单字符串

字符类型的不可变性

	var str = '';
	for (var i = 1; i <= 100; i++) {
		str += i;
	}
	console.log(str);
	//字符串拼接每一个都不会销毁原来字符串的内存
	只会产生新的空间并使str指向新的空间
	故不推荐使用大量拼接字符串

字符串对象根据字符返回位置

eg:
	var str = '改革春风春满地,春天';
	coonsole.log(str.indexOf('春')); //默认起始位置为0

	str.indexOf('要查找的字符', [起始位置下标])
	str.indexOf('春', 3)

indexOf第一个索引位置,输出有多少个重复目标字母,返回个数

eg:
	var str = 'sadfjjasdsahdflsladk';
	var index = str.indexOf('o');
	while (index !== -1) {
		console.log(index);
		index = str.indexOf('o', index + 1);
	}

根据索引位置返回字符

str.charAt(index);

返回字母的ASCII码

str.charCodeAt(index)
	//可以判断用户按了哪个键, (可以做游戏开发)

获取指定位置的字符(h5新增)

str[index]

检测对象是否有某种属性

对象['属性'], 返回布尔值, 查找对象是否存在此属性 <br>
对象['属性名'] = 参数; //创建一个此属性并为其赋值

	var o = {
		age: 18
	}
	if (o['age']) {
		console.log('里面有改属性');
	} else {
		console.log('没有该属性');
	}

案例: 统计字符串中出现次数最多的字符, 并统计次数
eg:
function countMaxChar(str) {
	var countMax = new Object();
	//var countMax = {};这是两种方法创建空对象
	for (i = 0; i < str.length; i++) {
		var chars = str.charAt(i); //每个循环取到的字符
		if (countMax[chars]) {
			countMax[chars]++; //对象里面已经有此属性的,值+1
		} else {
			countMax[chars] = 1; //创建一个此属性并为其赋值
		} //对象里没有此属性的,新建此属性并赋值为1
		var max = 0; //内部属性计数还要进行比较最大值,这里设个擂台
		for (var k in countMax) {
			//k得到的是属性名,countMax[k]得到的是属性值
			if (countMax[k] > max) {
				max = countMax[k];
			}
		}
	}
}

字符串操作方法

concat(str1, str2, str3...);

concat()方法用于连接两个或多个字符串.拼接字符串等价于+ ,+更常用

截取起始位置索引号,截取长度,重点

substr(start, length)

从start开始,截取到end位置,end取不到(它俩都是索引号)

slice(start, end)

从start开始,截取到end位置,end取不到,但不接受负值,与slice基本类似

substring(start, end)

替换第一个字符replace('被替换的字符','替换为的字符')

str.replace('a', 'b');
	//案例替换所有的某个字符,indexOf != -1存在字符

split将字符字符转换为数组,join将数组转换为字符串

str.split('分隔符');
	//以字符串里面连接的分隔符将其转换为数组

转换大写

toUpperCase()

转换小写

toLowerCase()

转换为数值型

将string类型转换为数值型

parseInt(string)

将string类型转换为浮点数值型

parseFloat(string)

转为数值型

Number(变量名);

进行(算术运算)的数字字符的,都可以转换为数值型,顺序可交换

字符串变量 - 数值

eg:
	var year = prompt('输入年份');
	var age = 2023 - year; //
	alert('你的年龄是' + age + '岁了');

转为布尔型

转换为布尔型

Boolean(其他类型) //其他类型转换为布尔值 <br>
代表空或者否定的值为false, 其他为true

Boolean.log(Boolean('')); //falsse
Boolean.log(Boolean(0)); //falsse
Boolean.log(Boolean(NaN)); //falsse
Boolean.log(Boolean(null)); //falsse
Boolean.log(Boolean(undefined)); //falsse
Boolean.log(Boolean('小白')); //true
Boolean.log(Boolean(12)); //true

关键字

break,
case,
catch,
continue,
default, delete, do,
else,
finally,
for,
function,
instanceof, new,
return, swithch, this,
throw,
try, typeof,
var, void,
while, with等

保留字

boolean, byte, char, class,
const, debugger, double, enum,
export, extendes, final,
float, goto, impolements, inport, int, interface,
long, mative, package, private,
protected, public, short, static, super, synchronized,
throws, transient, volatile等

关于运算符

变量递增和递减

num = num + 1;
++num; 	//前置递增
num++; 	//后置递增
--num; 	//前置递减
num--; 	//后置递减

单独使用效果一样, 前置先算, 后置后算
其他类似但有区别的运算符简写, 自己 = 自己计算
+= -= 加, 减一个数后赋值 num = num + 1;
*= /= %= 乘,除,取模后再赋值

比较运算符

	<
	>
	>=
	<=
	==	判等号(会转型), 默认转换为数值型的, 18 == '18' true
	!=
	===	全等, 要求值和数据类型都一致 
	!==
	&&	逻辑与 
	||	逻辑或
	!	取反符

逻辑中断

当有多个表达式(值) 左边的表达式可以确定结果时, 就不再判断或执行右面的表达式

var num = 0;
console.log(123 || num++);
console.log(num);
输出为0, 因为前判读成功, 则后面不执行
0 这个数, 默认为假, 不为0的数值单独为判断条件, 则为真
代表否定的还有0, NaN, null, undefined, ''等

运算符优先级

1() 小括号
2++ --!一元运算符
3 先 * /后+-			算术运算符
4 > >= < <= 关系运算符
5 == != === !== 相等运算符
6 先 && 后 || 逻辑运算符
7 = 赋值运算符
8, 逗号运算符

案例
eg:
console.log(4 >= 5 || '好' != '阿凡达' && !(12 * 2 == 122) && true);
var num = 10;
console.log(5 == num / 2 && (2 + 2 * num).toString() === '22');

先看逻辑运算符分段, 再一段段计算, 然后最后判断逻辑,从低到高剥离,从高到低运算

流程控制

if控制语句

if (条件表达式) {
	语句1;
}

if (条件表达式) {
	语句1;
} else {
	语句2;
}

if (条件表达式) {
	语句1;
} else if (条件表达式) {
	语句2;
} else if (条件表达式) {
	语句3;
} else {
	语句4;
}

三元表达式,与if,else语句十分相似(两个结果推荐三元表达式)

条件表达式 ? 表达式1 : 表达式2

switch语句,多分支语句

switch (value变量或定值) {
	case value1:
		语句1;
		break;
	case value2:
		语句2;
		break
	case valueN:
		语句N;
		break;
	default:
		最后的语句; //以上都不成立,一定输出此句子,保底语句
}

针对值固定的判断, 范围性的判断不太适合如num > 8, 可以将大类判断完毕后使用此语句整合
case后的value得和传入的vlaue数据类型一样
如果不加break, 则会按顺序全部执行一遍
分支少用if
else, 分支多用switch

循环语句

for循环

for (初始化变量; 条件表达式; 操作表达式) {
	//循环体;
}

循环打印符号图形可以使用str = str + '符号图形';来实现
换行符也是如此, str = str + '\n';或str += '\n'

while循序

条件表达式变量初始化
while (条件表达式) {
	语句1;
	循环控制;
}

do {
	循环体
} while (条件表达式)
先执行后判断

continue的使用

退出当前循环, 不执行后面的语句和后面同级的语句, 到当前循环上一级继续开始

break的使用

直接退出所有循环

数组

new创建空数组

var arr = new Array();
var arr = new Array(2); 
		//创建了包含两个空元素的数组对象,length为2
var arr = new Array(2, 3); 
		//等价于[2, 3],要写两个元素以上才是创建数组元素

字面量创建数组

var 数组名 = [];
var 数组名 = ['hello', '12', true]; 
		//内部不限制数据类型

数组的索引

console.log(数组名); 	//全部访问

colsole.log(数组名[下标]); //选择访问

从下标0开始, 若访问超出数组长度undefined

数组遍历

数组遍历有多长就写多长 < ; 其他从1开始的有多长就 <= 多长

for (i = 0; i < arr.length; i++) {
	console.log(arr[i]);
}

新增数组元素

扩大数组容量

var arr = [34, 3, 4, 3];
arr.length = 个数;
后面多出来的默认是空, undefined

追加数组元素

arr[arr.length] = 元素值;

不要给数组名赋值, 否则数组元素会被全部覆盖

instanceof

可以检测是否为数组,布尔值true,false

console.log(arr instanceof Array); //输出为true

内置函数快速对数组进行处理

push()在数组后方追加元素

var arr = [1, 2, 3];
arr.push(2, 'hello');
console.log(arr);

console.log(arr.push(2, 3)) //返回值为5

push完毕后返回的结果是新数组的长度, 原数组也会发生变化

unshift()在数组的开头添加一个元素

arr.unshift('hello', 1, 3);
console.log(arr);

console.log(arr.unshift(2, 3)) //返回值为5
unshift() 

完毕后返回的结果是新数组的长度, 原数组也会发生变化

pop()删除最后一个数组元素

arr.pop(); //删除最后一个元素,pop(内部没有元素)
console.log(arr);

console.log(arr.pop()); //返回值是最后一个删除元素的值

shift()删除第一个数组元素

arr.shift();
console.log(arr);

console.log(arr.shift()) //返回值是第一个删除元素的值

数组排序(翻转数组)

var arr = [1, 2, 3, 4];
arr.reverse(); //内置对象快速翻转数组`

console.log(arr);

数组排序(有大问题)

var arr = [1, 5, 4, 3, 8]
arr.sort(); //内置对象快速对数组排序,

排序为1, 12, 2, 4, 5, 53 为首数字大小排序

数组排序(正确方法)

arr.sort(function(a, b) { //这个是数组排序的正确使用方法
	return a - b; //升序排列
	//return b - a;//降序排列
})
console.log(arr);

数组索引方法, 内置对象方法调用

数组中查找给定元素的第一个索引

indexOf() //数组中查找给定元素的第一个索引
var arr = ['red', 'green'
	'blue', 'blue'
];
console.log(arr.indexOf('blue')); //返回给定元素第一个的索引,返回3
console.log(arr.indexOf('pink')); //没有找到元素,返回-1

数组中的最后一个的索引

lastIndexOf(); //数组中的最后一个的索引
console.log(arr.lastIndexOf('pink')); //没有找到元素,返回-1

//虽然倒着查,如果有目标元素,返回值是正的排的
//可以利用indexOf为函数去除重复的元素
	eg:
	把旧数组存到新数组中, 取出旧数组元素查询新数组是否有此元素
	有则返回 - 1, 不添加, 无则不为 - 1, 添加

连接两个或多个数组

concat() 
	连接两个或多个数组, 不影响原数组, 返回一个新数组

数组截取

slice(begin, end) 
	返回被截取项目的新数组

数组删除--重点看splice()

splice(第几个开始, 要删除几个数)
	返回删除项目的新数组, 会影响原数组

函数

写小接口

进行声明函数,传入参数用逗号隔开, 函数名一般是动词,这个过程也叫函数封装
函数内如最好不要有输出语句, 最好给调用者, 群聊和私聊的区别

function getSum(num1, num2) {
	var sum = 0;
	for (var i = num1; i = num2; i++) {
		sum += i;
	}
	console.log(sum);
} //也可以增加判断传入参数,增强可用性

调用接口
getSum(12, 43);

形参和实参

形参

function 函数名(形参1, 形参2...) {}
	//声明时的参数,形参是用来接受传来的实参的,不用声明的变量

实参

函数名(实参1, 实参2...);
	//调用时的参数,实参是用来传递给形参的

实参多于形参个数, 则多出的不接收, 建议还是匹配较好
实参少于形参个数, 形参多出的声明但无值, NaN

函数的返回值

function 函数名() {
	return 需要返回的结果;
}
函数名(); //函数调用者

console.log(函数名());
	函数内如最好不要有输出语句, 最好给调用者, 群聊和私聊的区别

console.log(函数名(实参, 实参等));
	调用和输出一起使用

传入数组并求最大值

function getMax(arr) {
	var max = arr[0];
	for (i = 1; i < arr.length; i++) {
		if (max < arr[i]) {
			max = arr[i];
		}
		return max;
	}
}	//一般函数不直接输出, 而是给调用者一个返回值, 私聊

var arr = [34, 3, 4, 3];
var re = getArrMax(arr);
	//使用变量接受返回结果, 直接输出变量更简单
console.log(re);

函数返回值注意事项

return执行完毕后, 后面的代码不会被执行, 所以一般return在最后不仅可以对出循环和当前函数, 还可返回return中的值
return一般只可以返回一个值, 只返回最后一个值

return 1, 2; //返回2
	//只返回最后一个值

return [1, 2, 1 + 2];
	//一般返回多个数, 用数组进行返回
	//函数没有return则会undefined

arguments的使用

当不确定有多少个参数传递时使用arguments
arguments存储了用户传递的所有实参

function fn() {
	console.log(arguments);
}
fn(1, 2, 3, 4, 5);

arguments是一个伪数组
具有数组的length属性, 长度,
按照索引的方式进行存储的, 可使用数组方式遍历
它没有真正数组的一些方法, pop(), push() 等
只有函数才有arguments, 而且每个函数都具有arguments

函数调用另一个函数

函数是可以给相互调用的

function fn1() {
	console.log(11);
	fn2();
}
fn1();

function fn2() {
	console.log(22);
}

函数的两种声明方式

第一种调用

function fn() {}
fn();
利用关键字自定义函数(命名函数)

第二种调用

var 变量名 = function() {};
函数表达式声明函数
	//fun是变量名不是函数名, 函数没有名字(匿名函数)
	//函数表达式声明方式和声明变量差不多但变量存的是值, 
	  函数表达式存的是函数

JavaScript的作用域

使代码在某个范围起作用, 减少命名冲突

全局作用域
- 整个script标签内, 或一个单独的js文件
局部作用域
- 在函数内部就是局部作用域, 也叫函数作用域
- 全局作用域和局部作用域的相同名名不影响

变量作用域

全局变量

在全局作用域下的变量, JavaScript下的亲儿子变量
在全局都可以使用
	(重要) 函数内部没有声明的变量, 直接使用的也是全局变量
特点:
	只有浏览器关闭时才会销毁, 比较占内存

局部变量

在函数内部声明的变量
只能在函数内部进行使用, 函数形参也是局部变量
	(重要) 函数内部没有声明的变量, 直接使用的也是全局变量
特点:
	程序执行完毕就会销毁, 比较节约内存

块级作用域

if (xx) {
	int num = 10;
}
console.log(num);
	//外面是不能调用num的, 块级作用域可以
	//现阶段没有块级作用域,es6才有块级作用域(了解)

作用域链

var num = 10;

function fn() {
	var num = 20;

	function fun() {
		console.log(num);
	}
	fun(); //结果是20
}
fn(): //结果是20
	//如何在域链中查找变量的值
	  从内向外一层一层查找, 链式查找, 找到最近的级别的变量

js的域解析

js引擎分两步: 预解析, 代码执行

预解析

js引擎将js所有function和var提升到当前作用域的最前面.只提升变量声明, 不提升赋值

代码执行

按照代码书写的顺序从上往下执行

console.log(num); 	//预解析错误,不定义直接输出

console.log(num); 	//undefined  坑1,只提升声明,不提升赋值
var num = 10;

fn();	 //自定义函数名,函数调用上下都可以
function fn() {
	console.log(11);
}

fun(); 	// 报错, 坑2,调用必须在函数表达式下面
var fun = function() {
	console.log(22);
}

对象

由属性和方法组成的
- 属性: 特征, 名词
- 方法: 行为, 动词

var str = 'andy';
console.log(str.length);

	//按道理对象才有属性和方法,复杂数据类型才有属型和方法
	//简单类型也有lenght属型

基本包装类型:

就是把简单数据类型包装为复杂数据类型

var temp = new String('andy');

str = temp;		//把临时变量的值给str

temp = null;	//销毁这个临时变量

创建对象的三种方式object

字面量创建对象

就是 {}花括号包含的

var obj = {} //创建一个空对象
var obj = {
	uname: '张三',
	age: 23,
	sex: '男',
	sayHi: function() { //其实就是一个函数,方法就是做对象里的函数
		console.log('hi~'); //调用放法和函数有所区别 对象.方法()
		依托于对象存在
	}
}
	//多个方法用逗号隔开,以分号结尾
	  属性或方法采取键值对的形式
	  方法后冒号可以是一个匿名函数

调用对象的方法

调用上面案例的对象

对象.属性名 		//(第一种)
eg1:
	console.log(obj.uname);
对象名.方法名()	 //内部的sayHi是一个函数,则要加小括号
	obj.sayHi()

对象名['属性名'] 	//(第二种),一定要加引号
eg2:
	console.log(obj['age']);

变量和属性的异同

都是用来存储数据的
变量: 单独声明并赋值, 使用直接写变量名, 可单独存在
属性: 不需要声明, 使用必须是对象.属性

函数和方法的异同

都是用来实现某种功能, 做某件事
函数: 函数是单独声明并调用的, 单独存在
方法: 方法在对象里面, 调用是必须是对象.方法()

利用new Object 创建对象

var obj = new Object(); //创建一个空对象
obj.uname = '张三';
obj.age = 24;
obj.sex = '男';
obj.sayHi = function() {
	console.log('Hi~');
}
利用 等号 = 赋值的方法, 添加对象和属性
每个属性和方法之间用分号结束
调用方法和字面量创建的对象一样

利用构造函数创建对象

前两种创建对象方法一次只可以创建一个对象
当有属性和方法大量相同时, 利用函数的方法重复这些相同的代码
这个函数里面封装的是对象而不是普通代码
把对象里面一些相同的属性值和方法抽象出来封装到函数里面
这就叫构造函数

构造函数的语法格式

function 构造函数名() { //声明一个构造函数,传入形参
	this.属性 = 值; //this根据形参创建实例,根据构造函数的值,为new的新对象赋属性和值
	this.方法 = function() {}
}
new 构造函数名(); //创建一个空对象,让this指向这个新对象,根据构造函数的值,为新对象赋属性和值

四大天王, 相同属性: 名字, 年龄, 性别 相同方法: 唱歌
构造函数首字母大写, 不强制要求

function Star(uname, age, sex) { //形参
	this.uname = uname;
	this.age = age;
	this.sex = sex; //构造函数不需要return就可以返回函数
	this.sing = function(sang) {
		console.log(sang)
	}
}
var ldh = new Star('刘德华', 24, '男'); //实参
ldh.sing('冰雨'); //后面单独调用传参给对象方法,sing是调用,'冰雨'传参给sang
调用构造函数, , 必须要使用new
只要new Star() 调用函数就创建一个对象 ldh
属性和方法前面必须添加this

检测对象是否有某种属性

对象['属性']	  //是否有该属性,返回布尔值

var o = {
	age: 18
}
if (o['age']) {
	console.log('里面有改属性');
} else {
	console.log('没有该属性');
}
案例: 统计字符串中出现次数最多的字符, 并统计次数

遍历对象

for in 遍历对象

for (变量 in 对象) {}

for (var k in obj) {
	console.log(k); 
		//k为变量 输出属性名,喜欢用k或key
	console.log(obj[k]); 
		//得到的是属性值,方法也可以遍历出来但不常用
}

内置对象

自定义对象: var obj = {}
内置对象:
	浏览器对象:

	//内置对象
	自带的一些对象: Math, Date, Array, String等

查文档MDN: https: //developer.mozilla.org/zh-CN/
	自己查阅使用, 使用这些内置对象可以很大方便编程

格式化日期年月日

var date = new Data();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
console.log('今天是:' + year + '年' + month + '月' + date + '日' + arr[day]);

简单数据类型

值类型: string, number, boolean, undefined
null返回的数据类型是Object, 返回是一个空的对象
如果有个变量打算存储为对象, 暂时还没有想好放啥, 这时候就给null

复杂数据类型

引用类型: Object, Array, Date等,
	在存储变量中存储的仅仅是地址(引用) 因此叫做引用数据类型
通过new关键字创建的对象(系统对象, 自定义对象)

堆和栈

简单数据类型放到栈里面, 存的是值
赋值数据类型放在堆里面, 在栈里面存放地址, 通过栈里的地址找到堆里面的数据

Web APIs 和 JS基础关联

javaScript
	ECMAScript, javaScript基础:
	javaScript语法
Web APIs:
	DOM: 页面文档对象模型
	BOM: 浏览器对象模型
	DOM简介: 处理可扩展标记语言接口
	通过接口可以改变页面内容, 结构和样式

获取元素

根据ID获取

getElementById(id)

	//方法获取带有ID元素对象
	找到返回对象, 未找到返回null
	script要在标签下面, 现有标签才可以找到

document.getElemtentById('time');

	//找到Id为time的元素, 完整的元素对象

console.dir(对象名)
	//打印返回的元素对象, 可以看到里面的属性和方法
	  根据标签名获取

getElementByTagName() 

	//返回带有标签名的集合
获取对象元素的集合, 以伪数组形式储存
如果只有一个元素, 还是伪数组
如果没有, 返回还是空的伪数组

得到document里的所有标签名

var lis = document.getElementByTagName('li');
得到document里的所有li标签名的元素对象
console.log(lis);
console.log(lis[0]) //使用数组下标找到元素
//依次打印,可用遍历
for (var i = 0; i < lis.length; i++) {
	console.log(lis[i]);
}

得到某个父元素下某个标签对象

element.getElementsByTagName('标签名');

得到某个父元素下某个标签名, ul和ol下都有li, 选中ol下的li
推荐使父元素添加id, 通过document.getElementById(id) 找到独一无二的ol, 就不用添加下标了

var ol = document.getElementsByTagName('标签名');
console.log(ol[0].getElementByTagName('li'));
	//由于返回的ol是以伪数组存储,可能有多个ol,一定要指定伪数组的下标

HTML5新增的方法获取, 老版本不兼容

document.getElementsByClassName();
	//根据类名获得某些元素集合

document.querySelector('选择器');
	//返回指定选择器的第一个元素对象
	//不考虑兼容, 推荐此获取


var firstBox = document.querySelector('.类选择器')
	//可以是.类选择器, #id选择器, 标签选择器, 只返回第一个对象

document.querySelectorAll();
	//返回指定选择器所有元素对象集合

var bodyEle = document.body;
	//获取body

var htmlEle = document.documentElement;
	//获取html

事件基础

事件由三部分组成: 事件源, 事件类型, 事件处理程序,
	事件源: 事件触发对象,
	获取事件源, 参考元素获取
事件类型: 如何触发, 什么事件, 如onclick鼠标点击,
	事件处理程序: 通过函数赋值的方式完成,

事件

<button id="btn">点我</button>//事件源
	<script>
		btn.onclick = function(){ //事件类型,事件处理程序
			alert('hello');
		}
	</script>


	<div>点我</div>
	<script>
	//获取事件源
		var div = document.querySelector('div');
	//绑定事件 注册事件
		div.onclick = function(){
			console.log('我被选中了!');
		}
	//添加事件处理程序
	</script>

常用鼠标事件	功能
onclick	点击左键触发
onmouseover	经过触发
onmouseout	离开时触发
onfoucus	获得焦点触发
onblur	失去焦点触发
onmousemove	移动时触发
onmouseup	弹起时触发
onmousedown	按下时触发

其他事件	功能
onabort	发生 abort 事件时运行脚本。
onbeforeonload	在元素加载前运行脚本。
onblur	当元素失去焦点时运行脚本。
onchange	当元素改变时运行脚本。
onclick	在鼠标点击时允许脚本。
oncontextmenu	当菜单被触发时运行脚本。
ondblclick	当鼠标双击时运行脚本。
ondrag 只	要脚本在被拖动就允许脚本。
ondragend	在拖动操作结束时运行脚本。
ondragenter	当元素被拖动到一个合法的放置目标时，执行脚本。
ondragleave	当元素离开合法的放置目标时。
ondragover	只要元素正在合法的放置目标上拖动时，就执行脚本。
ondragstart	在拖动操作开始时执行脚本。
ondrop	当元素正在被拖动时执行脚本。
onerror	当元素加载的过程中出现错误时执行脚本。
onfocus	当元素获得焦点时执行脚本。
onkeydown	当按钮按下时执行脚本。
onkeypress	当按键被按下时执行脚本。
onkeyup	当按钮松开时执行脚本。
onload	当文档加载时执行脚本。
onmessage	当 message 事件触发时执行脚本。
onmousedown	当鼠标按钮按下时执行脚本。
onmousemove	当鼠标指针移动时执行脚本。
onmouseout	当鼠标指针移出元素时执行脚本。
onmouseover	当鼠标指针移动到一个元素上时执行脚本。
onmouseup	当鼠标按钮松开时执行脚本。
onmousewheel	当鼠标滚轮滚动时执行脚本。
onreset	当表单重置时执行脚本。不支持。
onresize	当元素调整大小时运行脚本。
onscroll	当元素滚动条被滚动时执行脚本。
onselect	当元素被选中时执行脚本。
onsubmit	当表单提交时运行脚本。
onunload	当文档卸载时运行脚本。

改变元素的内容

element.innerText

	从起始位置到终止位置的内容, 但它去除html标签, 同时空格和换行也会去掉
	它不识别html标签, 非标准

element.innerHTML

	起始位置到终止位置的全部内容, 包括html标签, 同时保留空格和换行
	它识别html标签, w3c推荐使用

element.innerText的用法

<button id="btn">点我</button>//事件源
	当点击按钮,div里文字会发生变化
var btn = document.querySelector('button');
var div = document.querySelector('div')
注册事件
btn.onclick = function(){
	div.innerText = hello;
	}

element.innerHTML的用法

与element.innerText用法类似,但它可以识别标签,空格和换行都保留

var ldh = document.getElementById('ldh');
var zxy = document.getElementById('zxy');
var img = document.querySelector('img');
zxy.onclick = function() {
	img.src = 'imges/zxy.jpg
	img.title = '张学友的图片'
}
ldh.onclick = function() {
	img.src = 'imges/zxy.jpg'
	img.title = '刘德华的图片'
}

通过value改变表单

var btn = document.querySelector('botton');
var input = document.querySelector('input');
btn.onclick = function() {
	input.innerHTML = '点击了'; //无效写法,这是普通盒子才有的,比如div
		//表单里的值是通过value改变的
	input.value = '被点击了';
		//如果想要某个表单被禁用
	btn.disable = ture; //不能再点击mui.back=function () {}
	this.disable = ture; //this指向的是事件函数的调用这
}

如果进行简单的html的样式更改,可用style行内样式更改,权重比css高

var div = document.querySelector('div');
div.onclic = function() {
	//给div里的sytle属性赋值
	this.sytle.backgroundColor = 'purple';
	this.style.width = '230px';
	this.style.fonSize = '25px';
	this.style.marginTop = '100px';
	//点击完毕后变色,变宽
}

如果进行复杂的html的样式更爱,可用class进行css样式更改

.change {
	background-color: purple;
	color:#fff;
	font-size: 25px;
	margin-top: 100px;
}

改变标签类名

var div = document.querySelector('div');
div.onclic = function() {
		this.className = 'change';
		//当点击完毕后将.change改变为当前类名,原先的类会被覆盖\
		//如果要保留原先的类,则在原先的类基础上再写新的类名
		this.className = 'first change';
	}

实现点击叉号关闭二维码

	//通过displa:none隐藏元素,display:block;显示元素
	//实现点击叉号关闭二维码
	<div>
		<img src="#" alt="">
		<i class="class-btn">x</i>
	</div> 

eg:
	<script >
		var btn = document.querySelector('close-btn');
		var box = document.querySelector('.box');
		btn.onclick = function() {
			this.style.display = 'none';
		} 
	</script>

文本框光标焦点则内部提示文字消失

//onfocus获得焦点,onblur失去焦点
//文本框光标焦点则内部提示文字消失,焦点移开,内部提示出现
var text = document.querySelector('input');
text.onfocus = function() {
	//console.log('获得了焦点');
	if (this.value === '默认文字') {
		this.value = '';
	}
	//获得焦点要把用户输入的内容变深
	this.sytle.color = '#333';
}
text.onblur = function() {
	console.log('失去了焦点');
	if (this.value === '') {
		this.value = '默认文字';
	}
	//用户输入后,清空文本框后,内部默认文字颜色复原
	this.style.color = '#999';
}

失去焦点就提醒密码较短,在后方有红色叉号和错误提示信息

html代码

 div {
	 width: 600px;
	 margin: 100px auto;
 }
 .maessage {
	 diaplay: inline-block;
	 font-size: 12px;
	 color: #999;
	 background: url(images/mess.png) no-repeat left center;
	 padding-left: 20px;
 }
 .wrong { 
	 color:red;
	 background: url(images/wrong.png)
 }
 .right {
	 color:green;
	 background-image:url(images/right.png);
 }
 
 <div class="register">
	<input type=:"password" class="ipt">
	<p class="message">请输入6~16位密码</p>
 </div>

js代码

var ipt = document.querySelector('.ipt');
var message = document.querSelector('.message');
ipt.onblur = function() {
		//根据表单里值的长度判断
		if (this.value.length < 6 || this.value.length > 16) {
			console.log('错误');
			message.className = 'message wrong';
			message.innerHTML = '你输入的位数不对,要求6~16位;
		} else {
			message.className = 'message right';
			message.innerHTML = '输入格式正确';
		}
	}

五个按钮的点击事件

html代码

	<button>1</button>
	<button>2</button>
	<button>3</button>
	<button>4</button>
	<button>5</button>

js代码

	//获取所有按钮元素
	var btns = document.getElementsByTagName('button');
	for(var i = 0; i < btns.length; i++){
		btns[i].onclick = function(){
			for(var i = 0; i << btns.length; i++){
				btns[i].style.backgroundColor = '';
			}//先把所有的背景颜色清空,再把当前点击按钮变色,遍历清色

			this.style.backgroundColor = 'pink';
		}
	}

点击图片,更换图片为浏览器背景(百度换肤)

CSS代码

* {
	margin: 0;
	padding: 0;
}
body {
	background: url(images/1.jpg) no-repeat center top;
}
li {
	list-style: none;
}
.baidu {
	overflow:hidden;
	margin:100px auto;
	background-color:#fff;
	width: 410px;
	padding-top: 3px;
}
.baidu li {
	float: left;
	margin: 0 1px;
	cursor: pointer;
}
.baidu img {
	width: 100px;
}

html代码

	<ul class="baidu">
		<li><img src="imges/1.jpg"></li>
		<li><img src="imges/1.jpg"></li>
		<li><img src="imges/1.jpg"></li>
		<li><img src="imges/1.jpg"></li>
	</ul>

js代码

	var imgs = document.querySelector('.baidu').querySelectorAll('img');//获取.baidu中的img
	for (var i = 0; i < imgs.length; i++){		//for循环遍历ul中的img
		imgs[i].onclick = function() {			//点击后,时其body中的style的背景图片地址改变
			document.body.style.backgroundImage = 'url('+ this.src +')';
		}
	}

表格隔行变色

js代码

	var trs = document.querySelector('thead').querySelectorAll('tr');
	for(var i = 0; i < trs.length; i++){
		trs[i].onmouseover = function(){
		}
	}

标签：function,arr,console,log,自建,JavaScript,文档,数组,var
From： https://www.cnblogs.com/SanshQ/p/17971874

JavaScript自建文档