JavaScript笔记

第一章

1、什么是JavaScript

答：是一种基于对象和事件驱动的、并具有安全性能的脚本语言

2、JavaScript特点

答：向HTML页面中添加交互行为

​ 脚本语言，语法和Java类似

​ 解释性语言，边执行边解释

3、JavaScript组成

答：ECMAscript DOM BOM

单行注释：//

多行注释：/* */

//弹框

alert("你好，javascript")

4、javascript引入的三种方式

内部文件，直接写在标签里的

外部文件，后缀名为.js文件

直接写在HTML文件中

5、变量的声明与赋值

声明变量

语法 var 变量名 = 值

		var name = "张三丰",age = 23,sex = "男"
		document.write("姓名：",name,"<br>")
		document.write("年龄：",age,"<br>")
		document.write("性别：",sex,"<br>")

6、数据类型

基本数据类型：number(数字类型)、string(字符串)、Boolean(true或false)

特殊数据类型：null(空)、undefined(未定义)、object(对象)、NaN(非数字)

7、如何查看JS数据类型

 			var a = 34,
			b = "张三"
			c = 34,56
			d = false
			//typeof查看数据类型
		document.write(typeof(a),"<br>")
		//number
		document.write(typeof(b),"<br>")
		//string
		document.write(typeof(a),"<br>")
		//boolean 布尔类型 true或者false
		document.write(typeof(d))

8、字符串类型

		var str = "你好，JavaScript"
		document.write(str,"<br>")
		//查看长度，属性 length 查看字符串的长度
		document.write("字符串的长度为：",str.length,"<br>")
		//方法
		//charAt()，根据下表(索引)获取字符
		document.write("字符串为零的字母是：",str.charAt(0),"<br>")
		//转为大写
		document.write("转为大写：",str.toLocaleUpperCase(),"<br>")
		//转为小写
		document.write("转为小写：",str.toLocaleLowerCase(),"<br>")
		//字母首次出现的位置
		document.write("v首次出现的位置：",str.indexOf("a"),"<br>")
		//截取字符串,包含开头不包含结尾
		document.write("截取Java：",str.substring(3,7),"<br>")
		//替换
		document.write("替换为你不好：",str.replace("你好","你不好"),"<br>")

9、运算符与表达式

算数运算符： +(加)、-(减)、*(乘)、/(除)、%(取模)、++(加加)、–(减减)

		var a = 6,
			b = 3
			document.write("a=",a,"<br>")
			document.write("b=",b,"<br>")
		//加法
		document.write("a+b=", a + b, "<br>")
		//减法
		document.write("a-b=", a - b, "<br>")
		//乘法
		document.write("a*b=", a * b, "<br>")
		//除法
		document.write("a/b=", a / b, "<br>")
		//取模
		document.write("a%b=", a % b, "<br>")
		
		//++、++在前先自增，后其他，++在后，先其他，后自增
		var c = a++
		document.write("c=",c)

比较运算符：>(大于)、<(小于)、>=(大于等于)、<=(小于等于)、！=(不等于)、 (等于)、=(等等于)

		var a = 6,
			b = 3
		//大于
		document.write("a > b:", a > b, "<br>")
		//小与
		document.write("a < b:", a < b, "<br>")
		//大于等于
		document.write("a >= b:", a >= b, "<br>")
		//小于等于
		document.write("a <= b:", a <= b, "<br>")
		// == 比较是否相等
		document.write("a == b:", a == b, "<br>")
		//不等于
		document.write("a!=b", a != b, "<br>")

		// === 三等号
		var c = "12",	//string
			d = 12	//number
			//比较字面常量
		document.write("c==d:", c == d,"<br>")
		//即比较值，也比较数据类型
		document.write("c===d:", c === d)

逻辑运算符：&&(与)、||(或)、！(非)

		//逻辑运算符：&& || ！
		var a = 12,
			b = 5,
		c = 6
		//&& 与 一假即假
		document.write(a > b && c < b,"<br>")
		//|| 或 一真即真
		document.write(b>c || a<c,"<br>")
		//！非	取相反
		document.write(!true)

赋值运算符：+=、-=、*=、/=、%=

 		//赋值运算符 += -= *= /= %=
		var a = 12
		document.write("a=", a, "<br>")
		a += 6 //a+=6等价于a = a+6
		document.write("a=", a, "<br>")
		a -= 5 //a-=5等价于a = a-6
		document.write("a=", a, "<br>")

三目运算符：

		//三目运算符
		//语法	表达式 ? 值1 : 值2
		//含义：如果表达式为真，则执行冒号前面的，如果表达式为假，则执行冒号后面的
		var a = 12
		var mess = a >=18 ? "你成年" : "未成年"
		document.write(mess)

10、系统对话框

1、只有确定按钮的弹框

		alert("你好")

2、带有确定和取消按钮的弹框

		//带有确定和取消按钮的弹框
		var a = confirm("删除吗？")
		document.write(a)

3、带有输入框的弹框

		//带有输入框的弹框
		var b = prompt("你几岁了")
		document.write(b)

11、if语句

三种语法：

1、单分支语句结构 2、双分支语句结构 3、多分支语句结构

单分支语句

		//单分支语句
		//语法 if(条件表达式){代码块}
		var a = 12
		if(a>=18){
			document.write("成年")
		}

双分支语句

		//双分支语句
		//语法
		/*
		if(条件表达式){
			代码块1
		}else{
			代码块2
		}
		如果表达式为真则执行代码块1，否则执行代码块2
		*/
	   var b = prompt("你今年多大")
	   if(b>=18){
		   document.write("成年")
	   }else{
		   document.write("未成年")
	   }

多分支语句结构

	   //多分枝语句结构
	   /*
	   语法
	   if(条件表达式1){
		   代码块1
	   }else if(条件表达式2){
		   代码块2
	   }else if(条件表达式3){
		   代码块3
	   }
	   ...
	   else{
		   代码块n
	   }
	   如果表达式1成立，则执行代码块1如果表条件表达式2成立，则执行代码块2...
	   如果条件都不成立，则执行else中的代码
	   */
	  var d = prompt("你考多少分")
	  if(d>=90){
		  document.write("优")
	  }else if(d>=60){
		  document.write("良")
	  }else if(d<=60){
		  document.write("差")
	  }else{
		  document.write("啥也不是")
	  }

12、switch语句

		//swith语句
		/*
		语法
		swith(表达式){
			case 值1：
				代码块1
				break
			case 值2：
				代码块2
				break
			...
			default：
				代码块n
				break
		}
		
		*/
	   var sex = "aa"
	   switch (sex){
	   	case "男":
			document.write("帅哥")
	   		break;
	   	case "女":
			document.write("美眉")
	   		break;
		default :
			document.write("输入有误")
	   }

13、循环结构

循环四要素：开始值、结束值、循环体、变化值

for循环

for(初始化；条件表达式；增量){

​ 循环体

}

		for(var i = 1;i<=5;i++){
			document.write("跑了",i,"圈","<br>")
		}

while循环

while(条件表达式){

​ 循环体

}

如果表达式为真，则执行循环体

		var i = 1
		while(i<=50){
			document.write(i,"<br>")
			i++
		}

do-while循环

do{

循环体

}while(条件表达式)

		var i = 1
		do{
			document.write(i,"<br>")
			i++
		}
		while(i <= 100)

注：

while和do-while的区别

while是先判断条件是否成立；如果成立在执行循环体

do-while是先执行循环体；在判断条件是否成立

也就是说，do-while循环无论条件是否成立，至少会执行一次

14、循环中断

break：结束循环

continue：跳过本次循环，进入下次循环

break：

		for (var i = 1; i <= 10; i++) {
			//判断
			if (i == 5) {
				document.write("肚子疼，不跑了")
				break
			}
			document.write("跑了", i, "圈", "<br>")
		}

continue:

		for (var i = 1; i <= 10; i++) {
			//判断
			if (i == 5) {
				document.write("鞋带开了，下圈跟上","<br>")
				continue
			}
			document.write("跑了", i, "圈", "<br>")
		}

15、循环嵌套

五行五列

		//五行五列
		for(var j =0;j<=5;j++){
			for(var i = 0; i<=5; i++){
				document.write("*")
			}
			document.write("<br>")
		}

金字塔形状

		//金字塔形状
		for(var c = 1;c<=8; c++){
			for(var d = 1; d<=c; d ++){
				document.write("*")
			}
			document.write("<br>")
		}

九九乘法表

<style type="text/css">
			tr td{
				border: 1px solid red;
				height: 30px;
				width: 200px;
				background-color: yellow;
				color: green;
			}
		</style>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		//九九乘法表
		document.write("<table>")
		for (var i = 1; i <= 9; i++) {
			document.write("<tr>")
			for (var j = 1; j <= i; j++) {
				document.write("<td>",j,"*",i, "=", j*i,"</td>" )
			}
			document.write("</tr>")
		}
		document.write("</table>")
	</script>

**注：**内层循环控制行数，外层循环控制列数

16、关键字、保留字

关键字

关键字
break	delete	if	this	while
case	do	in	throw	with
catch	else	instanceof	try
continue	finally	new	typeof
debugger	for	return	var
default	function	switch	void

保留字

abstract	debugger	float	long	short
boolean	double	goto	native	static
byte	enum	implements	package	super
char	export	import	private	synchronized
class	extends	int	protected	throws
const	final	interface	public	transient
volatile

17、程序调试

1、alert()

2、console.log()

第二章

1、什么是函数

答：完成特定功能的代码块

2、函数的分类

答：系统函数、自定义函数

系统函数

		//函数完成特定的代码块
		//分类：系统函数；自定义函数

		//将字符串转为整数数字
		var a = parseInt("12,56")
		document.write(a, "<br>")
		//将字符串转为小数
		var b = parseFloat("45.89")
		document.write(b+1,"<br>")
		//检查参数是否非数字，如果不是数字返回true，是数字返回flace
		var c = "45"
		document.write(isNaN(c),"<br>")
		//计算
		var k = eval(12+45-6*9)
		document.write(k)

自定义函数

语法：自定义函数
参数，在函数定义的时候，下载小括号中的叫参数
返回值，return
function 函数名(参数1，参数2…){
功能代码块
return 返回值
}

定义无参数的函数

	   //无参数无返回值的函数
	   function f1(){
		   document.write("打扫卫生！！")
	   }
	   f1()

定义有参数的函数

	   //定义有参数的函数
	   function f2(name){
		   document.write(name,"吃西瓜")
	   }
	   f2("张三")

3、事件

名称	说明
onload	页面加载
onlick	鼠标点击
onmouseover	鼠标移入
onmouseout	鼠标移出
onkeydown	键盘按键按下
onchange	内容被改变

点击事件；onclick()

	<body>
		<button onclick="f2('张三')">点击</button>
	</body>
	<script type="text/javascript">
		function f2(a) {
			alert("点我干啥" + a)
		}
	</script>

页面加载；onload()

	<body onload="f1()">
		<div id="box"></div>
	</body>
	<script type="text/javascript">
		function f1(){
			console.log("页面加载了");
		}
	</script>

鼠标移入；onmouseover()

	<body>
		<div id="box" onmouseover="f2()"></div>
	</body>
	<script type="text/javascript">
		function f2(){
			console.log("鼠标来了");
		}
	</script>

鼠标移出；onmouseout()

	<body>
		<div id="box" onmouseout="f1()"></div>
	</body>
	<script type="text/javascript">
		function f1(){
			console.log("鼠标走了");
		}
	</script>

4、获取标签对象的方式

1、通过id获取

<body>
		<input type="text" id="inp">
		<button onclick="f2()">获取值</button>
	</body>
	<script type="text/javascript">
		function f2(){
			//根据id获取标签对象
			//get 获取	element 节点		by 通过
			var oinp = document.getElementById("inp")
			//获取input标签中的值	.value属性
			alert(oinp.value)
		}
	</script>

5、计算器

	<body>
		第一个数：<input type="text" id="o1" /><br />
		第二个数：<input type="text" id="o2" /><br />
		<button onclick="f2('+')">+</button>
		<button onclick="f2('-')">-</button>
		<button onclick="f2('*')">*</button>
		<button onclick="f2('/')">/</button><br />
		计算结果：<input type="text" id="o3" /><br />
	</body>
	<script type="text/javascript">
		function f2(v) {
			//获取input标签
			var op1 = parseFloat(document.getElementById("o1").value)
			var op2 = parseFloat(document.getElementById("o2").value)
			if (v == "+") {
				document.getElementById("o3").value = op1 + op2
			} else if (v == "-") {
				document.getElementById("o3").value = op1 - op2
			} else if (v == "*") {
				document.getElementById("o3").value = op1 * op2
			} else if (v == "/") {
				document.getElementById("o3").value = op1 / op2
			}
		}
	</script>

高级计算器

<body>
		<div id="box">
			<input type="text" value="0" id="inp" />
			<div id="a">
				<div id="l1" onclick="f1('清除')">清除</div>
				<div id="l1" onclick="f1('删除')">删除</div>
				<div onclick="f1('9')">9</div>
				<div onclick="f1('8')">8</div>
				<div onclick="f1('7')">7</div>
				<div onclick="f1('/')">/</div>
				<div onclick="f1('6')">6</div>
				<div onclick="f1('5')">5</div>
				<div onclick="f1('4')">4</div>
				<div onclick="f1('*')">*</div>
				<div onclick="f1('3')">3</div>
				<div onclick="f1('2')">2</div>
				<div onclick="f1('1')">1</div>
				<div onclick="f1('-')">-</div>
				<div onclick="f1('0')">0</div>
				<div onclick="f1('.')">.</div>
				<div onclick="f1('=')">=</div>
				<div onclick="f1('+')">+</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		//定义变量接收点击的数
		var str = ""

		function f1(v) {
			if (v == "1") {
				str += "1"
			} else if (v == "2") {
				str += "2"
			} else if (v == "3") {
				str += "3"
			} else if (v == "4") {
				str += "4"
			} else if (v == "5") {
				str += "5"
			} else if (v == "6") {
				str += "6"
			} else if (v == "7") {
				str += "7"
			} else if (v == "8") {
				str += "8"
			} else if (v == "9") {
				str += "9"
			} else if (v == "0") {
				str += "0"
			} else if (v == "+") {
				str += "+"
			} else if (v == "-") {
				str += "-"
			} else if (v == "*") {
				str += "*"
			} else if (v == "/") {
				str += "/"
			} else if (v == "删除") {
				//截取字符串
				str = str.substring(0, str.length - 1)
			}
			//获取输入框标签并设置值
			document.getElementById("inp").value = str
			//清除
			if (v == "清除") {
				str = ""
				document.getElementById("inp").value = 0
			}
			//等号
			if (v == "=") {
				//计算
				document.getElementById("inp").value = eval(str)
				str = ""
			} 
		}
	</script>

6、函数表达式

				//函数表达式
		//语法
		//var 函数名 = function([参数]){
		//代码块
		//}
		//总结:普通函数如果有重名的话会把原来的覆盖掉
		//函数表达式有重名的话不会覆盖掉

		//普通函数
		function f1() {
			console.log("你好")
		}
		f1()

		function f1() {
			console.log("你好,你不好")
		}
		f1()
		
		//函数表达式
		var f2 = function() {
			console.log("你好，javascript")
		}
		f2()
		var f2 = function() {
			console.log("你好，java")
		}
		f2()

7、预解析

	<script type="text/javascript">
		//顾名思义就是提前解析代码
		console.log(b);
		var b = 122
		
		//函数也可以
		f2()
		function f2(){
			console.log("都多余了");
		}

8、函数自调用

自定义函数分类：1、匿名函数；2、命名函数

匿名函数的特点：函数没有名字，在声明的同时便直接调用

匿名函数的好处：同名函数之间不会有冲突

语法：(function(){

//函数体

}) ([实参])

	<script type="text/javascript">
		(function (a){
			console.log("这是匿名函数",a);
		})("这是实参")
	</script>

9、回调函数

	<script type="text/javascript">
	function f1(){
		console.log("f1函数");
	}
		//在函数中调用函数
	function f2(){
		console.log("f2函数")
		f1()
	}
	f2()
	</script>

10、变量的作用域

变量的作用域分为：1、全局变量；2、局部变量

局部变量：在函数内部声明的变量(必须使用var)

​ 可以在不同的函数中使用名称相同的局部变量

全局变量：在函数外声明的变量

​ 网页的所有脚本和函数都能访问它

		<script type="text/javascript">
			//全局变量
			var a = 12
			console.log(a);
			
			function f1(){
				//局部变量
				var b = 34
				console.log(a);
				console.log(b);
			}
			f1()
		</script>

11、隐式全局变量

	<script type="text/javascript">
		var a1 = 12
			a2 = 23//隐式全局变量
			console.log(a1);
			console.log(a2);
			
			function f1(){
				a3 = 77//隐式全局变量
				var a4 = 90//局部变量
			}
			f1()
			console.log(a3);
			console.log(a4);
	</script>

12、函数的返回值

语法：

function 函数名([参数]){

代码块

[return 返回值]

}

	   //无参数无返回值
	   function f1(){
		   console.log("f1函数");
	   }
	   f1()
	   
	   //有参数无返回值
	   function f2(a){
		   console.log("f2函数",a);
	   }
	   f2("zhangsna")
	   
	   //有参数有返回值
	   function f3(){
		   console.log("f3函数");
		   return "李四"
	   }
	   var a = f3()
	   console.log(a);
	   
	   //有参数有返回值
	   function f4(k,v){
		   return k+v
	   }
	   var d = f4(23,23)
	   console.log("d=",d);

13、闭包

	function f1(){
		//定义变量
		var b = 45
		
		function f2(){
			return b
		}
		//将f2函数返回出去
		return f2
	}
	//接受的是个函数
	var f = f1()
	//调用
	var a = f()
	console.log(a+1);

第三章

1、this指向

this代表当前对象

	<body>
		<div id="box">白日依山尽，黄河入海流。<br />欲穷千里目，更上一层楼。 </div>
		<input type="text" id="inp" onblur="f1(this)">
		<br />
			<select onchange="f2(this)" id="slt">
				<option>楷体</option>
				<option>宋体</option>
				<option>黑体</option>
				<option>华文彩云</option>
				<option>华文琥珀</option>
			</select>
		
	</body>
	<script type="text/javascript">
		var obox = document.getElementById("box")
		function f1(oinp){
			obox.style.fontSize = oinp.value+"px"
		}
		function f2(oslt){
		obox.style.fontFamily = oslt.value
		}
	</script>

2、数组

数组是可以保存多个数据的容器

数组的索引（下表）是从零开始的

创建数组的语法：

var 数组名 = [值1，值2，值3…]

			var arr = [12,34,56,"lisi"]
			//查看数组的长度
			console.log(arr.length);
			//取值：数组名[下标]
			console.log(arr[2])
			//遍历数组
			for (var i = 0; i < arr.length; i++) {
				console.log(arr[i]);
			}

3、定时器

定时器：setinterval()

	<body>
		<div id="box">
			<img src="img/3.jpg" id="im"/>
		</div>
	</body>
	<script type="text/javascript">
		//创建数组保存图片路径
		var arr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg",]
		//定义变量作为数组下标
		var i = 0
		function f1(){
			//获取图片标签，更改src属性
			document.getElementById("im").src = arr[i]
			i++
			//判断是否到最后一张
			if(i == arr.length){
				//切换为第一张
				i = 0
			}
		}
		//定时器，一秒钟执行一次
		setInterval(f1,1000)
	</script>

4、Math对象

	<script type="text/javascript">
		//数学工具类
		//向上取整
		document.write(Math.ceil(12.001),'<br>')
		//向下取整
		document.write(Math.floor(12.99),'<br>')
		//四舍五入
		document.write(Math.round(12,4),'<br>')
		//随机数
		document.write(Math.random(0,1),'<br>')
		//0-5之间的随机数
		document.write(Math.floor(Math.random()*5))
	</script>

5、四种遍历数组的方式

	<script type="text/javascript">
		var arr = [12,23,45,67,78,89]
		//第一种		for
		for (var i = 0; i < arr.length; i++) {
			document.write(arr[i],'<br>')
		}
		document.write("----------------<br>")
		//第二种		for in
		for(var a in arr){
			document.write(arr[a],'<br>')
		}
		document.write("----------------<br>")
		//第三种		for of
		for(var b of arr){
			document.write(b,"<br>")
		}
		document.write("----------------<br>")
		//第四种		forEach
		arr.forEach((k,v)=>{
			document.write(k,"下标",v,'<br>')
		})
	</script>

6、Date对象(日期)

	<body>
		<div id="a"></div>
	</body>
	<script type="text/javascript">
		function f1() {
			//创建当前日期
			var s = new Date()
			//获取年份
			var a = s.getFullYear(),
				//获取月份
				b = s.getMonth() + 1,
				//获取日
				c = s.getDate(),
				//获取时间
				d = s.getHours(),
				//获取分钟
				e = s.getMinutes(),
				//获取秒;三目运算符进行补零操作
				f = s.getSeconds() < 10 ? "0" + s.getSeconds() : s.getSeconds()
				//拼接到一起
			var str = a + "年" + b + "月" + c + "号" + d + "时" + e + "分" + f + "秒"
			//获取div框给div框设置内容
			document.getElementById("a").innerText = str
		}
		//调用
		f1()
		//动态显示
		setInterval(f1, 1000)
	</script>

7、innerHTML与innerText

获取时：

	<script type="text/javascript">
		/*获取时：innerHTML获取标签中的全部内容
				innerText 只会获取文本信息
				 
				 */
		var od1 = document.getElementById("box").innerHTML
		console.log(od1);
		var od2 = document.getElementById("box").innerText
		console.log(od2);
	</script>

设置时：

<script type="text/javascript">
		/*获取时：innerHTML获取标签中的全部内容
				innerText 只会获取文本信息
		  设置时：innerHTML会解析标签
				innerText会把标签作为文本输出
				
				 */
		
		document.getElementById("box").innerHTML = "<h2>新的一天新的开端是</h2>"
		document.getElementById("box").innerText = "<h2>新的一天新的开端是</h2>"

8、Window对象

方法名称	说 明
prompt( )	显示可提示用户输入的对话框
alert( )	显示带有一个提示信息和一个确定按钮的警示框
confirm( )	显示一个带有提示信息、确定和取消按钮的对话框
close( )	关闭浏览器窗口
open( )	打开一个新的浏览器窗口，加载给定 URL 所指定的文档
setTimeout( )	在指定的毫秒数后调用函数或计算表达式
setInterval( )	按照指定的周期（以毫秒计）来调用函数或表达式
clearTimeout( )	用于停止执行setTimeout( )方法的函数代码
clearInterval( )	用于停止 setInterval( ) 方法执行的函数代码

**History对象 **

类别	名称	说 明
属性	length	返回历史记录列表中的网址数
方法	back()	加载 History 对象列表中的前一个URL
forward()	加载 History 对象列表中的下一个URL
go()	加载 History 对象列表中的某个具体URL

​ Location对象

名称	说 明
host	设置或返回主机名和当前URL的端口号
hostname	设置或返回当前URL的主机名
href	设置或返回完整的URL

9、Document对象的常用方法

Document对象代表整个HTML文档

Document对象的常用方法

名 称	说 明
getElementById()	返回对拥有指定id的第一个对象的引用
getElementsByName()	返回带有指定名称的对象的集合
getElementsByTagName()	返回带有指定标签名的对象的集合
write()	向文档写文本、HTML表达式或JavaScript代码

1、通过id属性获取

2、通过标签名获取

	<body>
	<div id="a">div1</div>
	<ul>
		<li>电泳</li>
		<li>电商</li>
		</ul>
		<button onclick="f1()">点击</button>
	</body>
	<script type="text/javascript">
		function f1(){
			//通过标签名获取
			var oli = document.getElementsByTagName("li")
			var str = ""
			for (var i = 0; i < oli.length; i++) {
				str+=oli[i].innerHTML+" "
			}
			//通过id属性获取标签对象
			document.getElementById("a").innerHTML = str
		}
	</script>

10、获取标签对象的方式

<body>
	<div id="a">div1</div>
	<div class="a">div2</div>
	<div>div3</div>
</body>
<script type="text/javascript">
	//1、通过id的获取，唯一值
	var a1 = document.getElementById("a")
	console.log(a1);
	//2、通过标签名获取多个值
	var a2 = document.getElementsByTagName("div")
	console.log(a2);
	//3、通过类名获取
	var a3 = document.getElementsByClassName("a")
	console.log(a3);
</script>

11、事件的注册方式

<body>
	<button onclick="f1()">点击1</button>
	<button id="btn">点击2</button>
</body>
<script type="text/javascript">
	//第一种方法：直接写在标签上
	function f1(){
		console.log("点击1");
	}
	//第二种：用id获取
	var obtn = document.getElementById("btn")
	obtn.onclick = ()=>{
		console.log("点击2");
	}
</script>

第四章

1、操作DOM

dom: Document Object Model (文档对象模型)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H6qSfLhJ-1676860331543)(C:\Users\吴振\AppData\Roaming\Typora\typora-user-images\1675171041522.png)]

2、节点信息

节点类型:

Element(元素)

Attr(属性)

Text(文本)

Comment(注释)

Document(文档)

3、访问节点

使用getElement系列方法访问指定节点

1、ugetElementById() 通过id访问节点

2、getElementsByName() 通过name属性访问节点

3、getElementsByTagName() 通过标签名访问节点

**a、**节点属性：

属性名称	描述
parentNode	返回节点的父节点
childNodes	返回子节点集合，childNodes[i]
firstChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild	返回节点的最后一个子节点
nextSibling	返回下一个节点
previousSibling	返回上一个节点

**b、**element属性

属性名称	描述
firstElementChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastElementChild	返回节点的最后一个子节点
nextElementSibling	下一个节点
previousElementSibling	上一个节点

4、style属性

HTML元素.style.样式属性 = "值"

示例：

document.getElementById("titles").style.color="#ff0000"; 
document.getElementById("titles").style.fontSize="25px";

边框：backgroundColor、backgroundImage…

文本：font、fontSize、color…

边距：padding、paddingTop、paddingLeft…

边框：border、borderTop、borderLeft…

5、className属性

语法：

HTML元素.className = "class样式名"

示例

function over() {
     document.getElementById("cart").className="cartOver";
     document.getElementById("cartList").className="cartListOver";
}
function out() {
     document.getElementById("cart").className="cartOut";
     document.getElementById("cartList").className="cartListOut";
}

6、获取元素的样式

语法

HTML元素.style.样式属性

示例

alert(document.getElementById("cartList").style.display);

！只能获取内联样式的属性值

7、总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3t4aYi6S-1676860331544)(C:\Users\吴振\AppData\Roaming\Typora\typora-user-images\1675173254469.png)]

第五章

1、获取和设置节点

获取节点，getAttribute(“属性名”) ；设置节点，setAttribute(“属性名”，“属性值”)

		var oim = document.getElementById("im")	
		function f1(){
			var a = oim.getAttribute("src")
			console.log(a);
		}
		function f2(){
			oim.setAttribute("src","img/3.jpg")
		}

2、创建和追加节点

创建节点，createElement ；追加节点，appendChild

	<script type="text/javascript">
		function f1(){
			//创建
			var oim = document.createElement("img")
			//设置属性
			oim.setAttribute("src","img/1.jpg")
			//获取div
			var od = document.getElementsByTagName("div")[0]
			//追加
			od.appendChild(oim)
		}
	</script>

3、删除和替换节点

名称	描述
node.removeChild(child)	删除指定的子节点
node.replaceChild(newChild,oidChild)	用其他节点替换指定的子节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box">
			<p id="p">段落标签</p>
			<img src="img/1.jpg" id="im"/>
		</div>
		<button onclick="f2()">点击</button>
	</body>
	<script type="text/javascript">
		function f2(){
			var obox = document.getElementById("box")
			var oim = document.getElementById("im")
			var op = document.getElementById("p")
			//删除图片标签
			obox.removeChild(oim)
			//创建节点
			var oh = document.createElement('h1')
			oh.innerHTML = "标题标签"
			//替换
			obox.replaceChild(oh,op)
		}
	</script>
</html>

4、获取元素的宽高属性

• offset指偏移，及这个元素在文档中占用的所有显示宽度

属性	描述
offsetLeft	返回当前元素左边界到它上级元素的左边界的距离，只读属性
offsetTop	返回当前元素上边界到它上级元素的上边界的距离，只读属性
offsetParent	返回元素的偏移容器，即对最近的动态定位的包含元素的引用
offsetHeight	返回元素的高度
offsetWidth	返回元素的宽度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				height: 200px;
				width: 200px;
				border: 10px solid red;
				background-color: red;
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
	<script type="text/javascript">
		var od = document.getElementsByTagName('div')[0]
		console.log('高',od.offsetHeight,'宽',od.offsetWidth);
		console.log('可见高',od.clientHeight,'可见宽',od.clientWidth);
		console.log('页面高',window.innerHeight,'页面宽',window.innerWidth);
	</script>
</html>

5、浮动广告

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			div {
				height: 100px;
				width: 200px;
				background-color: firebrick;
				position: relative;
				/* 相对定位 */

			}
		</style>
	</head>
	<body>
		<div id="box">
			<a href="http://www.jd.com"></a>
		</div>
	</body>
	<script type="text/javascript">
		//获取div标签
		let obox = document.getElementById("box")
		//tp:上下移动	lt:左右移动
		let tp = 0,lt = 0
		    //a：上	b：下
		let a = true,b = true
		function f1() {
			//获取页面及div的宽高
			let h = window.innerHeight - obox.offsetHeight - 5
			let w = window.innerWidth - obox.offsetWidth - 5

			//如果a为真，则y增加1，否则y减1
			tp = a ? tp + 1 : tp - 1
			//如果y大于等于高度，则把a设为false
			if (tp >= h) a = false
			//如果y小于等于0，则把a设为true
			if (tp <= 0) a = true

			lt = b ? lt + 1 : lt - 1
			if (lt >= w) b = false
			if (lt <= 0) b = true

			obox.style.top = tp + "px"
			obox.style.left = lt + "px"
		}
		let t = setInterval(f1, 10)

		//设置鼠标移入事件
		obox.onmouseover = ()=> {
			clearInterval(t)
		}
		//设置鼠标移出事件
		obox.onmouseout = ()=> {
			t = setInterval(f1, 10)
		}
	</script>
</html>

6、随机点名

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table{
				margin: auto;
				
			}
			tr,td{
				height: 30px;
				width: 60px;
				border: 1px solid red;
				text-align: center;
				font-family: kaiti;
				font-size: 20px;
				
			}
		.e{
			background-color: orange;
		}
		#box{
			height: 50px;
			width: 90px;
			background-color: bisque;
			position: absolute;
			top: 50px;
			left: 210px;
			display: none;
			font-size: 23px;
			font-family: kaiti;
			text-align: center;
			line-height: 50px;
		}
		</style>
	</head>
	<body>
		<div id="box">小宇宙</div>
		<table>
			<tr>
				<td>张三</td>
				<td>李四</td>
				<td>王五</td>
			</tr>
			<tr>
				<td>宇将军</td>
				<td>大懿</td>
				<td>小宇宙</td>
			</tr>
			<tr>
				<td>田七</td>
				<td>马八</td>
				<td>王九</td>
			</tr>
			<tr >
				<td colspan="3">
					<button id="btn">开始</button>
				</td>
			</tr>
		</table>
	</body>
	<script type="text/javascript">
		//获取按钮标签
		var obtn = document.getElementById("btn")
		var obox = document.getElementById("box")
		var t 
		//给按钮设置点击事件
		obtn.onclick = function(){
			if(this.innerHTML == '开始'){
				obox.style.display = 'none'
				 this.innerHTML = '停止'
				t =setInterval(f1,1)
				setTimeout(function(){
					obtn.innerHTML = '开始'
					clearInterval(t)
					obox.style.display = 'block'
				},2000)
			}
		}
		//获取所有的td标签
		var otds = document.getElementsByTagName("td")
		//随机获取名称
		function f1(){
			for(var otd of otds){
				otd.className = ""
			}
			//随机下标
			var i = Math.floor(Math.random()*(otds.length-1))
			otds[i].className = 'e'
			obox.innerHTML = otds[i].innerHTML 
		}
		
	</script>
</html>

第六章

1、什么是对象

对象是相关属性和方法的集合体：属性、方法

对象包括：string(字符串)对象、array(数组)对象、date(日期)对象、math(数学工具类)对象、regExp(正则验证)对象

2、创建一个自定义对象

基于Object对象创建自定义对象

var 对象名称 = new Object()

通过点操作符(.)为其添加属性或方法

第一种方法

	<script type="text/javascript">
		//创建自定义对象的语法
		//var 对象名 = new Object()
		var stu = new Object()
		//通过点操作符（.）为其添加属性或方法
		stu.name = '张三丰'
		stu.age = 23
		stu.play = function(){
			console.log("张丹峰在玩");
		}
		//调用
		console.log(stu.name,stu.age);
		stu.play()
	</script>

第二种方法

使用字面常量创建对象

	<script type="text/javascript">
		var stu ={
			name:'张三',
			age:56,
			play:function(){
				console.log("张三在玩香肠派对");
			}
		}
		console.log(stu.name,stu.age);
		stu.play()
	</script>

3、案例，创建猫对象

	<script type="text/javascript">
		var cat = {
			name:'小布丁',
			age:23,
			address:'河南',
			play:function(){
				console.log('都多余了');
			}
		}
		console.log(cat.name,cat.age,cat.address);
		cat.play()
	</script>

4、工厂模式

将对象的创建逻辑封装在一个函数中

	<script type="text/javascript">
	//工厂模式
	function f1(name,age,address){
		var cat = new Object()
		//添加属性
		cat.name = name
		cat.age = age
		cat.address = address
		//添加方法
		cat.play = function(){
			document.write("猫咪名字：",this.name+'<br>')
			document.write("猫咪颜色：",this.age+'<br>')
			document.write("猫咪住址：",this.address+'<br>')
		}
		return cat
	}
	var cat1 = f1("小布丁",23,'河南')
	cat1.play()
	
	var cat2 = f1("小花猫",60,'商丘')
	cat2.play()
	</script>

5、构造函数

• 定义构造函数用以创建特定类型的对象

  与工厂模式相比

  a、没有显示创建object对象，没有return语句

  b、将属性的方法赋给this对象

	<script type="text/javascript">
		//构造函数
		function cat(name,age,sex){
			this.name = name
			this.age = age
			this.sex = sex
			this.play = function(){
				document.write("猫咪名字：",this.name,'<br>')
				document.write("猫咪年龄：",this.age,'<br>')
				document.write("猫咪性别：",this.sex,'<br>')
			}
		}
		//创建对象
		var cat1 = new cat('小黄',23,'男')
		cat1.play()
		var cat2 = new cat('小黑',67,'<br>')
		cat2.play()
	</script>

6、原型对象

• 每一个函数都有一个prototype属性，指向其原型对象

• 使用原型对象方式添加属性和方法。所有实例会共享它所包含的属性和方法

  语法

  构造函数名.rototype.属性或方法
  

  案例

  	<script type="text/javascript">
  		function f1(name){
  			this.name = name
  			this.play = function(){
  				console.log(this.clazz,'的',this.name,'在卖鱼');
  			}
  		}
  		//通过prototype属性，添加属性或方法，所有的对象共享
  		f1.prototype.clazz = "11班"
  		var s1 = new f1('张三')
  		s1.play()
  		var s2 = new f1('李四')
  		s2.play()
  	</script>
  

7、 constructor属性和instanceof操作符

	<script type="text/javascript">
		function f1(name){
			this.name = name
			this.play = function(){
				console.log(this.clazz,'的',this.name,'在卖鱼');
			}
		}
		//通过prototype属性，添加属性或方法，所有的对象共享
		f1.prototype.clazz = "11班"
		
		
		var s1 = new f1('张三')
		s1.play()
		//constructor 构造函数
		console.log(s1.constructor == f1);
		//instanceof 判断对象的类型
		console.log(s1 instanceof f1);
		var s2 = new f1('李四')
		s2.play()
		var s3 = new f1('王五')
		s3.play()
	</script>

第七章(es6)

1、新增命令

• let命令

  声明变量

  用法类似与var

  但是，所声明的变量，只在let命令所在的代码块有效

• const命令

  声明一个只读的常量

  一旦声明，常量的值就不能被改变

2、let命令

1、没有作用域提升

2、是一个块级作用域

3、不能重复声明

	<script type="text/javascript">
		{
			var a = 23
			let b = 24
		}
		console.log(a);	//23
		console.log(b);	//b is not defined
	</script>

3、const命令

1、没有作用于提升

2、是一个块级作用域

3、不能重复声明

4、定义变量值不能改变

	<script type="text/javascript">
		const a = 23
		a = 45
		//Assignment to constant variable.
		console.log(a);
	</script>

4、解构赋值

完全结构、不完全结构

a、数组的解构赋值

在ES6中，可以从数组中提取值，按照对应位置，对变量赋值

let [a,b,c]=[1,2,3];

• 完全解构

  将数组中的值全部拿出来

	<script type="text/javascript">
		//数组的解构赋值
		//声明数组
		var arr = [12,23,454,676,78,99]
		//es5	代码冗絮
		//let a = arr[0]
		//let b = arr[1]
		//let c = arr[2]
		//let d = arr[3]
		//let e = arr[4]
		//let f = arr[5]
		//console.log(a,b,c,d,e,f);
		
		//es6	代码简单好记
		let[a,b,c,d,e,f] = arr
		console.log(a,b,c,d,e,f);
	</script>

• 不完全解构(,)

  用逗号隔开

  		//不完全解构	用逗号隔开
  		let arr = [12,23,45,56]
  		let[a,,,b] = arr
  		console.log(a,b);
  

• 剩余运算符(…)

  第一个值给第一个参数，剩下的参数变成数组传给第二个值

		let arr = [12, 23, 45, 56]
		let [k, ...l] = arr
		console.log(k);
		console.log(l);

b、对象的解构与赋值

• 数组的元素是按次序排列的，变量的取值由它的位置决定
• 对象的属性没有次序，变量必须与属性同名，才能取到正确的值

	<script type="text/javascript">
		//对象的解构赋值
		let stu = {
			name:'张三',
			age:23,
			sex:'男'	
		}
		//es5
		console.log(stu.name,stu.age,stu.sex);
		
		//es6
		//let{name,age,sex} = stu
		//console.log(name,age,sex);
		//变更名要跟属性名相同，才可以取到正确的值
		let{name} = stu
		console.log(name);
		
		let{a} = stu
		console.log(a);	//undefined
	</script>

c、字符串的解构赋值

跟数组类似

	<script type="text/javascript">
		//字符串的解构赋值
		let str = 'hello'
		//完全解构
		let[a,b,c,d,e] = str
		console.log(a,b,c,d,e);
		//不完全解构
		let[y,,,,u] = str
		console.log(y,u);
		//剩余运算符
		let[j,...k] = str
		console.log(j);
		console.log(k);
	</script>

5、函数默认值

参数变量是默认声明的所有不能用leth或const再次声明

使用参数默认值时函数不能有同名参数

	<script type="text/javascript">
		//函数默认值
		function add(a,b=4){
			return a+b
		}
		let sum = add(4)
		console.log(sum);
	</script>

6、剩余运算符(剩余参数)

	<script type="text/javascript">
		//数组
		let arr = [12, 23, 45]
		let [a, ...b] = arr
		console.log(a, b);

		//函数
		function add(...args) {
			let sum = 0
			for (let i = 0; i < args.length; i++) {
				sum += args[i]
			}
			return sum
		}
		let sum = add(5, 5, 5, 5,5)
		console.log(sum);
	</script>

7、箭头函数

使用"箭头"函数(>=)定义函数

let f = v => v;
// 等同于
let f = function (v) {
  return v;
}; 

特点：简洁、参数、函数体的大括号

普通写法

//箭头函数
let f3 = ()=>{
		console.log('箭头函数');
	}
	f3()

简便写法：

省略大括号,函数体只有一条语句

let f4 = ()=>console.log('省略大括号');
f4()

省略小括号，有一个参数的时候

let f5 = a => console.log('省略小括号了', a);
f5(666)

有多个参数时，小括号不可以省略

let f6 = (k,v)=>console.log('多个参数，不可省略小括号',k,v);
f6(66,88)

return

//箭头函数
let f7 = (t, y) => {
	return t + y
}
let s1 = f7(6, 6)
console.log(s1);

//简写
let f8 = (d, h) => d + h
let s2 = f8(8,8)
console.log(s2);

如果返回对象，需要用小括号括起来

let f9 = id=>
	({
	id:100,
	name:'zhangsan',
	age:23
	})
let s3 = f9(100)
console.log(s3);

8、箭头函数的this指向问题

a、箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this

b、扩展理解

b.1、箭头函数的this判断外层是否有函数

b.2、如果有，外层函数的this就是内部箭头函数的this

b.3、如果没有，则this是window

<body>
	<button id="btn">点我呀你个**</button>
</body>
<script type="text/javascript">
	let obtn = document.getElementById("btn")
	obtn.onclick = function(){
		console.log(this);		//普通函数this指向当前对象：button
	}
	obtn.onclick = ()=>console.log(this);		//箭头函数this向:window
</script>

箭头函数使用注意事项

a、函数体内的this对象是定义时所在的对象

b、不可以当作构造函数

c、不可以使用arguments对象

箭头函数不适用场合

a、定义对象的方法，且该方法内部包括this

b、需要动态this的时候，也不应使用箭头函数

第八章(es6进阶)

1、模板字符串

ole.log(j);
console.log(k);

##### 5、函数默认值

参数变量是默认声明的所有不能用leth或const再次声明

使用参数默认值时函数不能有同名参数

```javascript
	<script type="text/javascript">
		//函数默认值
		function add(a,b=4){
			return a+b
		}
		let sum = add(4)
		console.log(sum);
	</script>

6、剩余运算符(剩余参数)

	<script type="text/javascript">
		//数组
		let arr = [12, 23, 45]
		let [a, ...b] = arr
		console.log(a, b);

		//函数
		function add(...args) {
			let sum = 0
			for (let i = 0; i < args.length; i++) {
				sum += args[i]
			}
			return sum
		}
		let sum = add(5, 5, 5, 5,5)
		console.log(sum);
	</script>

7、箭头函数

使用"箭头"函数(>=)定义函数

let f = v => v;
// 等同于
let f = function (v) {
  return v;
}; 

特点：简洁、参数、函数体的大括号

普通写法

//箭头函数
let f3 = ()=>{
		console.log('箭头函数');
	}
	f3()

简便写法：

省略大括号,函数体只有一条语句

let f4 = ()=>console.log('省略大括号');
f4()

省略小括号，有一个参数的时候

let f5 = a => console.log('省略小括号了', a);
f5(666)

有多个参数时，小括号不可以省略

let f6 = (k,v)=>console.log('多个参数，不可省略小括号',k,v);
f6(66,88)

return

//箭头函数
let f7 = (t, y) => {
	return t + y
}
let s1 = f7(6, 6)
console.log(s1);

//简写
let f8 = (d, h) => d + h
let s2 = f8(8,8)
console.log(s2);

如果返回对象，需要用小括号括起来

let f9 = id=>
	({
	id:100,
	name:'zhangsan',
	age:23
	})
let s3 = f9(100)
console.log(s3);

8、箭头函数的this指向问题

a、箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this

b、扩展理解

b.1、箭头函数的this判断外层是否有函数

b.2、如果有，外层函数的this就是内部箭头函数的this

b.3、如果没有，则this是window

<body>
	<button id="btn">点我呀你个**</button>
</body>
<script type="text/javascript">
	let obtn = document.getElementById("btn")
	obtn.onclick = function(){
		console.log(this);		//普通函数this指向当前对象：button
	}
	obtn.onclick = ()=>console.log(this);		//箭头函数this向:window
</script>

箭头函数使用注意事项

a、函数体内的this对象是定义时所在的对象

b、不可以当作构造函数

c、不可以使用arguments对象

箭头函数不适用场合

a、定义对象的方法，且该方法内部包括this

b、需要动态this的时候，也不应使用箭头函数

第八章(es6进阶)

1、模板字符串