JavaScript

路x飞

于 2022-11-28 22:44:12 发布

阅读量238

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/gxs508843279/article/details/128089009

版权

JavaScript

1.1表格

使用table标签来创建一个表格

在table标签中使用tr来表示表格中的一行，有几行就有几个tr

在tr中使用td表示一个单元格，有几个td就有几个单元格

使用rowspan来纵向的合并单元格

		<table border="1" width="20%" align="center">
			<tr>
				<td>A1</td>
				<td>A2</td>
				<td>A3</td>
				<td>A4</td>
			</tr>
			
			<tr>
				<td>B1</td>
				<td>B2</td>
				<td>B3</td>
				<!--
					使用rowspan来纵向的合并单元格
				-->
				<td rowspan="2">B4</td>
			</tr>
			
			<tr>
				<td>C1</td>
				<td>C2</td>
				<td>C3</td>
			</tr>
			
			<tr>
				<td>D1</td>
				<td>D2</td>
				<!-- 
					使用colspan来横向的合并单元格
				-->
				<td colspan="2">D3</td>
			</tr>
			
		</table>

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

在创建一个表格时，如果没有使用thead tbody tfoot这些标签时，
浏览器会自动在页面中添加tbody，并且将所有的tr都放到tbody中
所以实际上tr并不是table子元素，而是tbody的子元素

在html中还为我们提供了一个th标签，专门用来表示表头的单元格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table{
				/*设置一个宽度*/
				width: 300px;
				/*设置居中*/
				margin: 50px auto;
				/*设置一个边框*/
				/*border: 1px solid black;*/
				/*border-spacing可以用来设置表格边框之间的距离*/
				border-spacing: 100px;
				/*
				 * border-collapse可以用来设置表格的边框的合并
				 * 	如果将值设置collapse，则table和td的边框将会自动合并为一个
				 * 	当设置了边框合并以后，border-spacing将自动失效
				 */
				border-collapse: collapse;
			}
			
			td,th{
				/*设置边框*/
				border: 1px solid black;
			}
			
			tbody > tr{
				background-color: #bfa;
			}
			
		</style>
	</head>
	<body>
		
		<!-- table是一个块元素 -->
		<table>
			
			<tr>
				<th>学号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>住址</th>
			</tr>
			
			<tr>
				<td>1</td>
				<td>孙悟空</td>
				<td>18</td>
				<td>花果山</td>
			</tr>
			
			<tr>
				<td>2</td>
				<td>猪八戒</td>
				<td>28</td>
				<td>高老庄</td>
			</tr>
			
			<tr>
				<td>3</td>
				<td>沙和尚</td>
				<td>38</td>
				<td>流沙河</td>
			</tr>
		</table>
		
	</body>
</html>

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

1.2长表格

HTML中还为我们提供了三个标签，用来将表格分成三个部分

可以将对应部分的tr，放到指定的标签

使用这三个标签创建的表格，在打印时，会在每页都打印表格的头部和底部

无论编写到什么位置，thead中的内容，永远都会显示在表格的头部

而tfoot中的内容，永远都会显示在表格的底部

1.3表格嵌套

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table border="1" width="100%">
			
			<tr>
				<td height="120" colspan="2"></td>
			</tr>
			
			<tr>
				<td height="400" width="20%"></td>
				<td height="400">
					
					<table border="1" width="100%" height="100%">
						<tr>
							<td></td>
						</tr>
						<tr>
							<td></td>
						</tr>
					</table>
					
				</td>
			</tr>
			
			<tr>
				<td height="120" colspan="2"></td>
			</tr>
			
		</table>
	</body>
</html>

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

1.4表单

使用form标签来创建一个表单
form中有一个必须的属性叫做action
action需要一个服务器的地址，提交表单时，填写的内容将会提交到action指向的地址

在form中可以创建一个表单项，用户可以通过表单项来填写信息

1.4.1文本框

- 使用input标签来创建一个文本框

- 它需要一个type属性是text

- 如果希望表单中的内容最终发送到服务器，还必须要给表单项添加一个name属性

该属性将会作为用户填写内容名字，在服务器中可以根据这个名字来获取用户填写内容

- 默认情况下，用户添加的内容将会以查询字符串的形式发送给服务器，所谓的查询字符串就是url地址?后边的内容

- username=sunwukong&password=123123

- 查询字符实际上就是一个一个的名值对结构，多个名值对之间使用&隔开

一个名字 = 一个值

名字就是表单项指定的name属性值

值就是用户填写的内容，在服务器中可以通过名字来获取用户填写的内容

可以通过value属性为文本框指定一个默认值

1.4.2单选按钮

- 使用input来创建一个单选按钮

- 它的type属性值是radio

- 单选按钮是通过name属性来分组的，相同的name属性值属于一组

- 像这种选择框不需要用户填写内容的，还必须指定一个value属性，

这样选中的元素的value属性值将会被提交到服务器

- 如果希望某个单选按钮处在默认选中的状态可以在标签中添加属性 checked=“checked”

1.4.3多选框

- 使用input来创建一个多选框

- 它的type属性是checkbox

1.4.4下拉列表

- 使用select来创建一个下拉列表

- 使用option标签来创建下拉列表中的选项

- 下拉列表的name属性需要指定给select标签，value属性需要指定给option

- 如果希望将option设置为默认选中，则可以在option中添加一个属性 selected = “selected”

1.4.5提交按钮

- 使用input来创建一个提交按钮

- 它的type叫做submit

- 通过value属性可以设置提交按钮上的文字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	
		<form action="target.html">
			用户名 <input type="text" name="username" value="hello" /> <br /><br />
<!--密码框也是input，不同的是它type需要使用password-->
			密码 <input type="password" name="password" /> <br /><br />
			性别 <input type="radio" name="gender" value="male" />男  
				<input type="radio" name="gender" value="female" checked="checked" />女
			<br /><br />
			爱好 <input type="checkbox" name="hobby" value="ppq" />乒乓球
				<input type="checkbox" name="hobby" value="ymq" checked="checked" />羽毛球
				<input type="checkbox" name="hobby" value="lq" />篮球
				
				<br /><br />
			你最喜欢的明星
						<select name="star">
							<option value="fbb">范冰冰</option>
							<option value="zw" >赵薇</option>
							<option value="lxr" selected="selected">林心如</option>
						</select>
			
			<br /><br />
			
			<input type="submit" value="注册" />
			
<!--重置按钮重置按钮可以使表单恢复到默认值-->
			<input type="reset" />
<!--如果type设置为button，那么会生成一个普通的按钮，它只有一个功能就是被点-->
			<input type="button" value="按钮" />
			<br /><br />
<!--也可以通过button标签来创建按钮,使用button创建的按钮和input创建的按钮功能一致，只不过button标签更加的灵活-->
			<button type="submit">提交按钮</button>
			<button type="reset">重置</button>
			<button type="button">单纯的按钮</button>
			
		</form>
	</body>
</html>

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

1.5 js的编写位置

1.5.1script标签引入

可以将js代码编写到外部js文件中，然后通过script标签引入，写到外部文件中可以在不同的页面中同时引用，也可以利用到浏览器的缓存机制，script标签一旦用于引入外部文件了，就不能在编写代码了，即使编写了浏览器也会忽略

如果需要则可以在创建一个新的script标签用于编写内部代码

1.5.2script标签

可以将js代码编写到script标签

<script type="text/javascript">

alert(“我是script标签中的代码！！”);

1.5.3标签的onclick属性

以将js代码编写到标签的onclick属性中，当点击按钮时，js代码才会执行

虽然可以写在标签的属性中，但是他们属于结构与行为耦合，不方便维护，不推荐使用

<button onclick="alert('讨厌，你点我干嘛~~');">点我一下</button>
		<!--
			可以将js代码写在超链接的href属性中，这样当点击超链接时，会执行js代码
		-->
		<a href="javascript:alert('让你点你就点！！');">你也点我一下</a>
		<a href="javascript:;">你也点我一下</a>

1.6基本语法

/*多行注释

JS注释

多行注释，注释中的内容不会被执行，但是可以在源代码中查看 */

//单行注释

1.JS中严格区分大小写

2.JS中每一条语句以分号(;)结尾

如果不写分号，浏览器会自动添加，但是会消耗一些系统资源，

而且有些时候，浏览器会加错分号，所以在开发中分号必须写

3.JS中会忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化

1.7字面量和变量

字面量，都是一些不可改变的值。比如：1 2 3 4 5

字面量都是可以直接使用，但是我们一般都不会直接使用字面量

变量变量可以用来保存字面量，而且变量的值是可以任意改变的

变量更加方便我们使用，所以在开发中都是通过变量去保存一个字面量，而很少直接使用字面量，可以通过变量对字面量进行描述

在js中使用var关键字来声明一个变量

1.8标识符

* - 在JS中所有的可以由我们自主命名的都可以称为是标识符

* - 例如：变量名、函数名、属性名都属于标识符

* - 命名一个标识符时需要遵守如下的规则：

* 1.标识符中可以含有字母、数字、_、$

* 2.标识符不能以数字开头

* 3.标识符不能是ES中的关键字或保留字

* 4.标识符一般都采用驼峰命名法

* - 首字母小写，每个单词的开头字母大写，其余字母小写

* helloWorld xxxYyyZzz

* - JS底层保存标识符时实际上是采用的Unicode编码，

* 所以理论上讲，所有的utf-8中含有的内容都可以作为标识符

2.1数据类型

2.1.1六种数据类型

* 在JS中一共有六种数据类型

* String 字符串

* Number 数值

* Boolean 布尔值

* Null 空值

* Undefined 未定义

* Object 对象

* 其中String Number Boolean Null Undefined属于基本数据类型

* 而Object属于引用数据类型

2.1.2string字符串

* - 在JS中字符串需要使用引号引起来

* - 使用双引号或单引号都可以，但是不要混着用

* - 引号不能嵌套，双引号不能放双引号，单引号不能放单引号

2.2number

* 在JS中所有的数值都是Number类型，

* 包括整数和浮点数（小数）

* JS中可以表示的数字的最大值

* Number.MAX_VALUE

* 1.7976931348623157e+308

* Number.MIN_VALUE 大于0的最小值

* 5e-324

* 如果使用Number表示的数字超过了最大值，则会返回一个

* Infinity 表示正无穷

* -Infinity 表示负无穷

* 使用typeof检查Infinity也会返回number

* NaN 是一个特殊的数字，表示Not A Number

* 使用typeof检查一个NaN也会返回number

可以使用一个运算符 typeof，来检查一个变量的类型

语法：typeof 变量

检查字符串时，会返回string；检查数值时，会返回number

2.3Boolean 布尔值

* 布尔值只有两个，主要用来做逻辑判断

* true表示真

* false表示假

* 使用typeof检查一个布尔值时，会返回boolean

2.4null和undefined

* Null（空值）类型的值只有一个，就是null

* null这个值专门用来表示一个为空的对象

* 使用typeof检查一个null值时，会返回object

* Undefined（未定义）类型的值只有一个，就undefind

* 当声明一个变量，但是并不给变量赋值时，它的值就是undefined

* 使用typeof检查一个undefined时也会返回undefined

2.5强制类型转换

* 强制类型转换

* - 指将一个数据类型强制转换为其他的数据类型

* - 类型转换主要指，将其他的数据类型，转换为

* String Number Boolean

将其他的数据类型转换为String

* 方式一：

* - 调用被转换数据类型的toString()方法

* - 该方法不会影响到原变量，它会将转换的结果返回

* - 但是注意：null和undefined这两个值没有toString()方法，

* 如果调用他们的方法，会报错

* 方式二：

* - 调用String()函数，并将被转换的数据作为参数传递给函数

* - 使用String()函数做强制类型转换时，

* 对于Number和Boolean实际上就是调用的toString()方法

* 但是对于null和undefined，就不会调用toString()方法

* 它会将 null 直接转换为 “null”

* 将 undefined 直接转换为 “undefined”

2.6转换为Number

转换方式一：

* 使用Number()函数

* - 字符串 --> 数字

* 1.如果是纯数字的字符串，则直接将其转换为数字

* 2.如果字符串中有非数字的内容，则转换为NaN

* 3.如果字符串是一个空串或者是一个全是空格的字符串，则转换为0

* - 布尔 --> 数字

* true 转成 1

* false 转成 0

* - null --> 数字 0

* - undefined --> 数字 NaN

转换方式二：

* - 这种方式专门用来对付字符串

* - parseInt() 把一个字符串转换为一个整数

* - parseFloat() 把一个字符串转换为一个浮点数

2.7其他进制的数

* 在js中，如果需要表示16进制的数字，则需要以0x开头

* 如果需要表示8进制的数字，则需要以0开头

* 如果要要表示2进制的数字，则需要以0b开头

* 但是不是所有的浏览器都支持

2.8转换为Boolean

将其他的数据类型转换为Boolean

* - 使用Boolean()函数

* - 数字 —> 布尔

* - 除了0和NaN，其余的都是true

* - 字符串 —> 布尔

* - 除了空串，其余的都是true

* - null和undefined都会转换为false

* - 对象也会转换为true

2.9运算符

* 运算符也叫操作符

* 通过运算符可以对一个或多个值进行运算,并获取运算结果

* 比如：typeof就是运算符，可以来获得一个值的类型

* 它会将该值的类型以字符串的形式返回

* number string boolean undefined object

算数运算符

* 当对非Number类型的值进行运算时，会将这些值转换为Number然后在运算

* 任何值和NaN做运算都得NaN

* +可以对两个值进行加法运算，并将结果返回

* 如果对两个字符串进行加法运算，则会做拼串

* 会将两个字符串拼接为一个字符串，并返回

* 任何的值和字符串做加法运算，都会先转换为字符串，然后再和字符串做拼串的操作

**-**可以对两个值进行减法运算，并将结果返回

*可以对两个值进行乘法运算

/ 可以对两个值进行除法运算

% 取模运算（取余数）

任何值和字符串相加都会转换为字符串，并做拼串操作

2.10一元运算符

* 一元运算符，只需要一个操作数

* + 正号

* - 正号不会对数字产生任何影响

* - 负号

* - 负号可以对数字进行负号的取反

* - 对于非Number类型的值，

* 它会将先转换为Number，然后在运算

* 可以对一个其他的数据类型使用+,来将其转换为number

* 它的原理和Number()函数一样

2.11自增和自减

自增 ++

* - 通过自增可以使变量在自身的基础上增加1

* - 对于一个变量自增以后，原变量的值会立即自增1

* - 自增分成两种：后++(a++) 和前++(++a)

* 无论是a++ 还是 ++a，都会立即使原变量的值自增1

* 不同的是a++ 和 ++a的值不同

* a++的值等于原变量的值（自增前的值）

* ++a的值等于新值（自增后的值）

自减 –

* - 通过自减可以使变量在自身的基础上减1

* - 自减分成两种：后–(a–) 和前–(–a)

* 无论是a-- 还是 --a 都会立即使原变量的值自减1

* 不同的是a-- 和 --a的值不同

* a-- 是变量的原值（自减前的值）

* --a 是变量的新值（自减以后的值）

3.1逻辑运算符

* JS中为我们提供了三种逻辑运算符

! 非

* - !可以用来对一个值进行非运算

* - 所谓非运算就是值对一个布尔值进行取反操作，

* true变false，false变true

* - 如果对一个值进行两次取反，它不会变化

* - 如果对非布尔值进行元素，则会将其转换为布尔值，然后再取反

* 所以我们可以利用该特点，来将一个其他的数据类型转换为布尔值

* 可以为一个任意数据类型取两次反，来将其转换为布尔值，

* 原理和Boolean()函数一样

&& 与

* - &&可以对符号两侧的值进行与运算并返回结果

* - 运算规则

* - 两个值中只要有一个值为false就返回false，

* 只有两个值都为true时，才会返回true

* - JS中的“与”属于短路的与，

* 如果第一个值为false，则不会看第二个值

|| 或

* - ||可以对符号两侧的值进行或运算并返回结果

* - 运算规则：

* - 两个值中只要有一个true，就返回true

* 如果两个值都为false，才返回false

* - JS中的“或”属于短路的或

* 如果第一个值为true，则不会检查第二个值

3.2赋值运算符

= 可以将符号右侧的值赋值给符号左侧的变量

3.3关系运算符

通过关系运算符可以比较两个值之间的大小关系，

如果关系成立它会返回true，如果关系不成立则返回false

大于号

* - 判断符号左侧的值是否大于右侧的值

* - 如果关系成立，返回true，如果关系不成立则返回false

= 大于等于

* - 判断符号左侧的值是否大于或等于右侧的值

< 小于号 <= 小于等于

* 非数值的情况

* - 对于非数值进行比较时，会将其转换为数字然后在比较

* - 如果符号两侧的值都是字符串时，不会将其转换为数字进行比较

* 而会分别比较字符串中字符的Unicode编码

3.4编码

在字符串中使用转义字符输入Unicode编码，\u四位编码

在网页中使用Unicode编码，&#编码; 这里的编码需要的是10进制

3.5相等运算符

相等运算符用来比较两个值是否相等，相等会返回true，否则返回false

* 使用 == 来做相等运算

* - 当使用==来比较两个值时，如果值的类型不同，则会自动进行类型转换，将其转换为相同的类型，然后在比较；不相等，不相等用来判断两个值是否不相等，如果不相等返回true，否则返回false

* - 使用 != 来做不相等运算

* - 不相等也会对变量进行自动的类型转换，如果转换后相等它也会返回false

* === 全等

* - 用来判断两个值是否全等，它和相等类似，不同的是它不会做自动的类型转换，如果两个值的类型不同，直接返回false

* !==不全等

* - 用来判断两个值是否不全等，和不等类似，不同的是它不会做自动的类型转换，如果两个值的类型不同，直接返回true

3.6条件运算符

条件运算符也叫三元运算符

语法：条件表达式?语句1:语句2;

* - 执行的流程：

* 条件运算符在执行时，首先对条件表达式进行求值，

* 如果该值为true，则执行语句1，并返回执行结果

* 如果该值为false，则执行语句2，并返回执行结果

* 如果条件的表达式的求值结果是一个非布尔值，

* 会将其转换为布尔值然后在运算

4.1流程控制语句

* 流程控制语句

* - JS中的程序是从上到下一行一行执行的

* - 通过流程控制语句可以控制程序执行流程，

* 使程序可以根据一定的条件来选择执行

* - 语句的分类：

* 1.条件判断语句

* 2.条件分支语句

* 3.循环语句

4.2if 条件判断语句：

* - 使用条件判断语句可以在执行某个语句之前进行判断，

* 如果条件成立才会执行语句，条件不成立则语句不执行。

* - if语句

* - 语法一：

* if(条件表达式){

* 语句…

* }

* if语句在执行时，会先对条件表达式进行求值判断，

* 如果条件表达式的值为true，则执行if后的语句，

* 如果条件表达式的值为false，则不会执行if后的语句。

* if语句只能控制紧随其后的那个语句,

* 如果希望if语句可以控制多条语句，

* 可以将这些语句统一放到代码块中

* if语句后的代码块不是必须的，但是在开发中尽量写上代码块，即使if后只有一条语句

4.3 条件分支语句

* 条件分支语句也叫switch语句

* 语法：

* switch(条件表达式){

* case 表达式:

* 语句…

* break;

* case 表达式:

* 语句…

* break;

* default:

* 语句…

* break;

* }

执行流程：

* switch…case…语句

* 在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行全等比较，

* 如果比较结果为true，则从当前case处开始执行代码。

* 当前case后的所有的代码都会执行，我们可以在case的后边跟着一个break关键字，

* 这样可以确保只会执行当前case后的语句，而不会执行其他的case

* 如果比较结果为false，则继续向下比较

* 如果所有的比较结果都为false，则只执行default后的语句

* switch语句和if语句的功能实际上有重复的，使用switch可以实现if的功能，

* 同样使用if也可以实现switch的功能，所以我们使用时，可以根据自己的习惯选择。

4.4循环语句

* 循环语句：

* 通过循环语句可以反复的执行一段代码多次

while循环

* - 语法：

* while(条件表达式){

* 语句…

* }

* - while语句在执行时，

* 先对条件表达式进行求值判断，

* 如果值为true，则执行循环体，

* 循环体执行完毕以后，继续对表达式进行判断

* 如果为true，则继续执行循环体，以此类推

* 如果值为false，则终止循环

do…while循环

* - 语法：

* do{

* 语句…

* }while(条件表达式)

执行流程：

* do…while语句在执行时，会先执行循环体，

* 循环体执行完毕以后，在对while后的条件表达式进行判断，

* 如果结果为true，则继续执行循环体，执行完毕继续判断以此类推

* 如果结果为false，则终止循环

* 实际上这两个语句功能类似，不同的是while是先判断后执行，

* 而do…while会先执行后判断，

* do…while可以保证循环体至少执行一次，

* 而while不能

4.5for循环

* for语句，也是一个循环语句，也称为for循环

* 在for循环中，为我们提供了专门的位置用来放三个表达式：

* 1.初始化表达式

* 2.条件表达式

* 3.更新表达式

for循环的语法：

for(①初始化表达式;②条件表达式;④更新表达式){

* ③语句…

* }

* for循环的执行流程：

* ①执行初始化表达式，初始化变量（初始化表达式只会执行一次）

* ②执行条件表达式，判断是否执行循环。

* 如果为true，则执行循环③

* 如果为false，终止循环

* ④执行更新表达式，更新表达式执行完毕继续重复②

5.1对象

对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性。

对象的分类：

1.内建对象

- 由ES标准中定义的对象，在任何的ES的实现中都可以使用

- 比如：Math String Number Boolean Function Object…

2.宿主对象

- 由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象

- 比如 BOM DOM

3.自定义对象

-由开发人员自己创建的对象

创建对象

* 使用new关键字调用的函数，是构造函数constructor

* 构造函数是专门用来创建对象的函数

* 使用typeof检查一个对象时，会返回object

* 在对象中保存的值称为属性

* 向对象添加属性

* 语法：对象.属性名 = 属性值;

//向obj中添加一个name属性

obj.name = “孙悟空”;

//向obj中添加一个gender属性

obj.gender = “男”;

//向obj中添加一个age属性

obj.age = 18;

* 读取对象中的属性

* 语法：对象.属性名

* 如果读取对象中没有的属性，不会报错而是会返回undefined

//console.log(obj.gender);

//console.log(obj.hello);

* 修改对象的属性值

* 语法：对象.属性名 = 新值

obj.name = “tom”;

* 删除对象的属性

* 语法：delete 对象.属性名

delete obj.name;

console.log(obj.age);

5.2属性名和属性值

var obj = new Object();

向对象中添加属性

* 属性名：

* - 对象的属性名不强制要求遵守标识符的规范

* 什么乱七八糟的名字都可以使用

* - 但是我们使用是还是尽量按照标识符的规范去做

obj.name = “孙悟空”;

//obj.var = “hello”;

* 如果要使用特殊的属性名，不能采用.的方式来操作

* 需要使用另一种方式：

* 语法：对象[“属性名”] = 属性值

* 读取时也需要采用这种方式

* 使用[]这种形式去操作属性，更加的灵活，

* 在[]中可以直接传递一个变量，这样变量值是多少就会读取那个属性

obj[“123”] = 789;

obj[“nihao”] = “你好”;

var n = “nihao”;

//console.log(obj[“123”]);

属性值

* JS对象的属性值，可以是任意的数据类型

* 甚至也可以是一个对象

obj.test = true;

obj.test = null;

obj.test = undefined;

//创建一个对象

var obj2 = new Object();

obj2.name = “猪八戒”;

//将obj2设置为obj的属性

obj.test = obj2;

//console.log(obj.test.name);

in 运算符

* - 通过该运算符可以检查一个对象中是否含有指定的属性

* 如果有则返回true，没有则返回false

* - 语法：

* “属性名” in 对象

//console.log(obj.test2);

//检查obj中是否含有test2属性

//console.log(“test2” in obj);

//console.log(“test” in obj);

console.log(“name” in obj);

5.3基本和引用数据

* 基本数据类型

* String Number Boolean Null Undefined

* 引用数据类型

* Object

* JS中的变量都是保存到栈内存中的，

* 基本数据类型的值直接在栈内存中存储，

* 值与值之间是独立存在，修改一个变量不会影响其他的变量

* 对象是保存到堆内存中的，每创建一个新的对象，就会在堆内存中开辟出一个新的空间，

* 而变量保存的是对象的内存地址（对象的引用），如果两个变量保存的是同一个对象引用，

* 当一个通过一个变量修改属性时，另一个也会受到影响

5.4对象字面量

//创建一个对象
			//var obj = new Object();
			/*使用对象字面量来创建一个对象*/
			var obj = {};
			//console.log(typeof obj);
			obj.name = "孙悟空";
			//console.log(obj.name);

			 * 使用对象字面量，可以在创建对象时，直接指定对象中的属性
			 * 语法：{属性名:属性值,属性名:属性值....}
			 * 	对象字面量的属性名可以加引号也可以不加，建议不加,
			 * 	如果要使用一些特殊的名字，则必须加引号
			 * 属性名和属性值是一组一组的名值对结构，
			 * 	名和值之间使用:连接，多个名值对之间使用,隔开
			 * 	如果一个属性之后没有其他的属性了，就不要写,
			var obj2 = {
				name:"猪八戒",
				age:13,
				gender:"男",
				test:{name:"沙僧"}	
			};
			console.log(obj2.test);

5.5函数

函数 function

* - 函数也是一个对象

* - 函数中可以封装一些功能（代码），在需要时可以执行这些功能（代码）

* - 函数中可以保存一些代码在需要的时候调用

* - 使用typeof检查一个函数对象时，会返回function

//我们在实际开发中很少使用构造函数来创建一个函数对象

//创建一个函数对象

//可以将要封装的代码以字符串的形式传递给构造函数

//var fun = new Function(“console.log(‘Hello 这是我的第一个函数’);”);

//封装到函数中的代码不会立即执行

//函数中的代码会在函数调用的时候执行

//调用函数语法：函数对象()

//当调用函数时，函数中封装的代码会按照顺序执行

//fun();

使用函数声明来创建一个函数

* 语法：

* function 函数名([形参1,形参2…形参N]){

* 语句…

* }

5.6返回值

可以使用 return 来设置函数的返回值

* 语法：

* return 值

* return后的值将会会作为函数的执行结果返回，

* 可以定义一个变量，来接收该结果

* 在函数中return后的语句都不会执行

* 如果return语句后不跟任何值就相当于返回一个undefined，

* 如果函数中不写return，则也会返回undefined

* return后可以跟任意类型的值

5.7立即执行函数

函数对象()

* 立即执行函数

* 函数定义完，立即被调用，这种函数叫做立即执行函数

* 立即执行函数往往只会执行一次

(function(a,b){
				console.log("a = "+a);
				console.log("b = "+b);
			})(123,456);

5.8对象

* 函数也可以称为对象的属性，

* 如果一个函数作为一个对象的属性保存，

* 那么我们称这个函数时这个对象的方法

* 调用这个函数就说调用对象的方法（method）

* 但是它只是名称上的区别没有其他的区别

5.9枚举对象中的属性

使用for … in 语句

* 语法：

* for(var 变量 in 对象){

* }

for…in语句对象中有几个属性，循环体就会执行几次

每次执行时，会将对象中的一个属性的名字赋值给变量

5.10作用域

- 作用域指一个变量的作用的范围

- 在JS中一共有两种作用域：

1.全局作用域

* - 直接编写在script标签中的JS代码，都在全局作用域

* - 全局作用域在页面打开时创建，在页面关闭时销毁

* - 在全局作用域中有一个全局对象window，

* 它代表的是一个浏览器的窗口，它由浏览器创建我们可以直接使用

* - 在全局作用域中：

* 创建的变量都会作为window对象的属性保存

* 创建的函数都会作为window对象的方法保存

* - 全局作用域中的变量都是全局变量，

* 在页面的任意的部分都可以访问的到

5.11声明提前

变量的声明提前

* - 使用var关键字声明的变量，会在所有的代码执行之前被声明（但是不会赋值），

* 但是如果声明变量时不适用var关键字，则变量不会被声明提前

函数的声明提前

* - 使用函数声明形式创建的函数 function 函数(){}

* 它会在所有的代码执行之前就被创建，所以我们可以在函数声明前来调用函数

* 使用函数表达式创建的函数，不会被声明提前，所以不能在声明前调用

5.12函数的作用域

* - 调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁

* - 每调用一次函数就会创建一个新的函数作用域，他们之间是互相独立的

* - 在函数作用域中可以访问到全局作用域的变量

* 在全局作用域中无法访问到函数作用域的变量

* - 当在函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用

* 如果没有则向上一级作用域中寻找，直到找到全局作用域，

* 如果全局作用域中依然没有找到，则会报错ReferenceError

* - 在函数中要访问全局变量可以使用window对象

5.13this

* 解析器在调用函数每次都会向函数内部传递进一个隐含的参数,

* 这个隐含的参数就是this，this指向的是一个对象，

* 这个对象我们称为函数执行的上下文对象，

* 根据函数的调用方式的不同，this会指向不同的对象

* 1.以函数的形式调用时，this永远都是window

* 2.以方法的形式调用时，this就是调用方法的那个对象

5.14构造函数

\ * 创建一个构造函数，专门用来创建Person对象的

* 构造函数就是一个普通的函数，创建方式和普通函数没有区别,

* 不同的是构造函数习惯上首字母大写

* 构造函数和普通函数的区别就是调用方式的不同

* 普通函数是直接调用，而构造函数需要使用new关键字来调用

* 构造函数的执行流程：

* 1.立刻创建一个新的对象

* 2.将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象

* 3.逐行执行函数中的代码

* 4.将新建的对象作为返回值返回

* 使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类。

* 我们将通过一个构造函数创建的对象，称为是该类的实例

*** this的情况：**

* 1.当以函数的形式调用时，this是window

* 2.当以方法的形式调用时，谁调用方法this就是谁

* 3.当以构造函数的形式调用时，this就是新创建的那个对象

* 创建一个Person构造函数

* - 在Person构造函数中，为每一个对象都添加了一个sayName方法，

* 目前我们的方法是在构造函数内部创建的，

* 也就是构造函数每执行一次就会创建一个新的sayName方法

* 也是所有实例的sayName都是唯一的。

* 这样就导致了构造函数执行一次就会创建一个新的方法，

* 执行10000次就会创建10000个新的方法，而10000个方法都是一摸一样的

* 这是完全没有必要，完全可以使所有的对象共享同一个方法

6.1数组

* 数组（Array）

* - 数组也是一个对象

* - 它和我们普通对象功能类似，也是用来存储一些值的

* - 不同的是普通对象是使用字符串作为属性名的，

* 而数组时使用数字来作为索引操作元素

* - 索引：

* 从0开始的整数就是索引

* - 数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据

创建数组对象 var arr = new Array();

使用typeof检查一个数组时，会返回object console.log(typeof arr);

向数组中添加元素

语法：数组[索引] = 值

arr[0] = 10;

* 读取数组中的元素

* 语法：数组[索引]

* 如果读取不存在的索引，他不会报错而是返回undefined

//console.log(arr[3]);

* 获取数组的长度

* 可以使用length属性来获取数组的长度(元素的个数)

* 语法：数组.length

* 对于连续的数组，使用length可以获取到数组的长度（元素的个数）

* 对于非连续的数组，使用length会获取到数组的最大的索引+1

* 尽量不要创建非连续的数组

console.log(arr.length);

console.log(arr);

* 修改length

* 如果修改的length大于原长度，则多出部分会空出来

* 如果修改的length小于原长度，则多出的元素会被删除

//arr.length = 10;

向数组的最后一个位置添加元素

语法：数组[数组.length] = 值;

arr[arr.length] = 70;

<script type="text/javascript">
			
			//创建一个数组
			//var arr = new Array();
			
			//使用字面量来创建数组
			//语法:[]
			//var arr = [];
			
			//console.log(typeof arr);
			
			//使用字面量创建数组时，可以在创建时就指定数组中的元素
			var arr = [1,2,3,4,5,10];
			
			//console.log(arr[3]);
			
			//使用构造函数创建数组时，也可以同时添加元素，将要添加的元素作文构造函数的参数传递
			//元素之间使用,隔开
			var arr2 = new Array(10,20,30);
			//console.log(arr2);
			
			//创建一个数组数组中只有一个元素10
			arr = [10];
			
			//创建一个长度为10的数组
			arr2 = new Array(10);
			
			//console.log(arr2.length);
			//数组中的元素可以是任意的数据类型
			arr = ["hello",1,true,null,undefined];
			
			//也可以是对象
			var obj = {name:"孙悟空"};
			arr[arr.length] = obj;
			arr = [{name:"孙悟空"},{name:"沙和尚"},{name:"猪八戒"}];
			
			//也可以是一个函数
			arr = [function(){alert(1)},function(){alert(2)}];
			
			//console.log(arr);
			//arr[0]();
			
			//数组中也可以放数组，如下这种数组我们称为二维数组
			arr = [[1,2,3],[3,4,5],[5,6,7]];
			console.log(arr[1]);
			
		</script>

6.2数组的方法

创建一个数组var arr = [“孙悟空”,“猪八戒”,“沙和尚”];

push()

* - 该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度

* - 可以将要添加的元素作为方法的参数传递，

* 这样这些元素将会自动添加到数组的末尾

* - 该方法会将数组新的长度作为返回值返回

var result = arr.push(“唐僧”,“蜘蛛精”,“白骨精”,“玉兔精”);

pop()

该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回

result = arr.pop();

unshift()

* - 向数组开头添加一个或多个元素，并返回新的数组长度

* - 向前边插入元素以后，其他的元素索引会依次调整

arr.unshift(“牛魔王”,“二郎神”);

shift()

* - 可以删除数组的第一个元素，并将被删除的元素作为返回值返回

result = arr.shift();

slice()

* - 可以用来从数组提取指定元素

* - 该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回

* - 参数：

* 1.截取开始的位置的索引,包含开始索引

* 2.截取结束的位置的索引,不包含结束索引

* - 第二个参数可以省略不写,此时会截取从开始索引往后的所有元素

* - 索引可以传递一个负值，如果传递一个负值，则从后往前计算

* -1 倒数第一个

* -2 倒数第二个

var result = arr.slice(1,4);

splice()

* - 可以用于删除数组中的指定元素

* - 使用splice()会影响到原数组，会将指定元素从原数组中删除

* 并将被删除的元素作为返回值返回

* - 参数：

* 第一个，表示开始位置的索引

* 第二个，表示删除的数量

* 第三个及以后。。

* 可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边

arr = [“孙悟空”,“猪八戒”,“沙和尚”,“唐僧”,“白骨精”];

var result = arr.splice(3,0,“牛魔王”,“铁扇公主”,“红孩儿”);

6.3数组的遍历

创建一个数组

var arr = [“孙悟空”,“猪八戒”,“沙和尚”,“唐僧”,“白骨精”];

for(var i=0 ; i<arr.length ; i++){

console.log(arr[i]);

}

6.4forEach

* 一般我们都是使用for循环去遍历数组，

* JS中还为我们提供了一个方法，用来遍历数组

* forEach()

* - 这个方法只支持IE8以上的浏览器

* IE8及以下的浏览器均不支持该方法，所以如果需要兼容IE8，则不要使用forEach

* 还是使用for循环来遍历

* forEach()方法需要一个函数作为参数

* - 像这种函数，由我们创建但是不由我们调用的，我们称为回调函数

* - 数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素

* 以实参的形式传递进来，我们可以来定义形参，来读取这些内容

* - 浏览器会在回调函数中传递三个参数：

* 第一个参数，就是当前正在遍历的元素

* 第二个参数，就是当前正在遍历的元素的索引

* 第三个参数，就是正在遍历的数组

<script type="text/javascript">
			var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
			arr.forEach(function(value , index , obj){
				console.log(value);
			});
		</script>

6.5函数的方法

* call()和apply()

* - 这两个方法都是函数对象的方法，需要通过函数对象来调用

* - 当对函数调用call()和apply()都会调用函数执行

* - 在调用call()和apply()可以将一个对象指定为第一个参数

* 此时这个对象将会成为函数执行时的this

* - call()方法可以将实参在对象之后依次传递

* - apply()方法需要将实参封装到一个数组中统一传递

* - this的情况：

* 1.以函数形式调用时，this永远都是window

* 2.以方法的形式调用时，this是调用方法的对象

* 3.以构造函数的形式调用时，this是新创建的那个对象

* 4.使用call和apply调用时，this是指定的那个对象

6.6arguments

* 在调用函数时，浏览器每次都会传递进两个隐含的参数：

* 1.函数的上下文对象 this

* 2.封装实参的对象 arguments

* - arguments是一个类数组对象,它也可以通过索引来操作数据，也可以获取长度

* - 在调用函数时，我们所传递的实参都会在arguments中保存

* - arguments.length可以用来获取实参的长度

* - 我们即使不定义形参，也可以通过arguments来使用实参，

* 只不过比较麻烦

* arguments[0] 表示第一个实参

* arguments[1] 表示第二个实参。。。

* - 它里边有一个属性叫做callee，

* 这个属性对应一个函数对象，就是当前正在指向的函数的对象

6.7date

Date对象-在JS中使用Date对象来表示一个时间

<script type="text/javascript">
			//创建一个Date对象
			//如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间
			var d = new Date();
			//创建一个指定的时间对象
			//需要在构造函数中传递一个表示时间的字符串作为参数
			//日期的格式  月份/日/年 时:分:秒
			var d2 = new Date("2/18/2011 11:10:30");
			/*
			 * getDate()
			 * 	- 获取当前日期对象是几日
			 */
			var date = d2.getDate();
			/*
			 * getDay()
			 * 	- 获取当前日期对象时周几
			 * 	- 会返回一个0-6的值
			 * 		0 表示周日
			 * 		1表示周一
			 * 		。。。
			 */
			var day = d2.getDay();
			/*
			 * getMonth()
			 * d2 = new Date("12/18/2011 11:10:30");
			 * - 获取当前时间对象的月份
			 * 	- 会返回一个0-11的值
			 * 		0 表示1月
			 * 		1 表示2月
			 * 		11 表示12月
			 */
			var month = d2.getMonth();
			/*
			 * getFullYear()
			 * 	- 获取当前日期对象的年份
			 */
			var year = d2.getFullYear();
			
			/*
			 * getTime()
			 * 	- 获取当前日期对象的时间戳
			 * 	- 时间戳，指的是从格林威治标准时间的1970年1月1日，0时0分0秒
			 * 		到当前日期所花费的毫秒数（1秒 = 1000毫秒）
			 * 	- 计算机底层在保存时间时使用都是时间戳
			 */
			
			var time = d2.getTime();
			
			//利用时间戳来测试代码的执行的性能
			//获取当前的时间戳
			var start = Date.now();
			for(var i=0 ; i<100 ; i++){
				console.log(i);
			}
			var end = Date.now();
			console.log("执行了："+(end - start)+"毫秒");
		</script>

6.8math

* - Math和其他的对象不同，它不是一个构造函数，

* 它属于一个工具类不用创建对象，它里边封装了数学运算相关的属性和方法

* - 比如Math.PI 表示的圆周率

* abs()可以用来计算一个数的绝对值

//console.log(Math.abs(-1));

* Math.ceil()

* - 可以对一个数进行向上取整，小数位只有有值就自动进1

* Math.floor()

* - 可以对一个数进行向下取整，小数部分会被舍掉

* Math.round()

* - 可以对一个数进行四舍五入取整

* Math.random()

* - 可以用来生成一个0-1之间的随机数

* - 生成一个0-10的随机数

* - 生成一个0-x之间的随机数

* Math.round(Math.random()*x)

* - 生成一个1-10

* - 生成一个x-y之间的随机数

* Math.round(Math.random()*(y-x)+x)

* max() 可以获取多个数中的最大值

* min() 可以获取多个数中的最小值

var max = Math.max(10,45,30,100);

var min = Math.min(10,45,30,100);

//console.log(min);

* Math.pow(x,y)

* 返回x的y次幂

* Math.sqrt()

* 用于对一个数进行开方运算

console.log(Math.sqrt(2));

7.1字符串相关方法

创建一个字符串 var str = “Hello Atguigu”;

在底层字符串是以字符数组的形式保存的 [“H”,“e”,“l”]

length属性

- 可以用来获取字符串的长度

//console.log(str.length);

charAt()

- 可以返回字符串中指定位置的字符

- 根据索引获取指定的字符

str = “中Hello Atguigu”;

var result = str.charAt(6);

* charCodeAt()

* - 获取指定位置字符的字符编码（Unicode编码）

result = str.charCodeAt(0);

String.formCharCode()

- 可以根据字符编码去获取字符

result = String.fromCharCode(0x2692);

concat()

- 可以用来连接两个或多个字符串

- 作用和+一样

result = str.concat(“你好”,“再见”);

indexof()

* - 该方法可以检索一个字符串中是否含有指定内容

* - 如果字符串中含有该内容，则会返回其第一次出现的索引

* 如果没有找到指定的内容，则返回-1

* - 可以指定一个第二个参数，指定开始查找的位置

lastIndexOf();

* - 该方法的用法和indexOf()一样，

* 不同的是indexOf是从前往后找，

* 而lastIndexOf是从后往前找

* - 也可以指定开始查找的位置

str = “hello hatguigu”;

result = str.indexOf(“h”,1);

result = str.lastIndexOf(“h”,5);

slice()

* - 可以从字符串中截取指定的内容

* - 不会影响原字符串，而是将截取到内容返回

* - 参数：

* 第一个，开始位置的索引（包括开始位置）

* 第二个，结束位置的索引（不包括结束位置）

* - 如果省略第二个参数，则会截取到后边所有的

* - 也可以传递一个负数作为参数，负数的话将会从后边计算

str = “abcdefghijk”;

result = str.slice(1,4);

result = str.slice(1,-1);

substring()

* - 可以用来截取一个字符串，可以slice()类似

* - 参数：

* - 第一个：开始截取位置的索引（包括开始位置）

* - 第二个：结束位置的索引（不包括结束位置）

* - 不同的是这个方法不能接受负值作为参数，

* 如果传递了一个负值，则默认使用0

* - 而且他还自动调整参数的位置，如果第二个参数小于第一个，则自动交换

result = str.substring(0,1);

substr()

* - 用来截取字符串

* - 参数：

* 1.截取开始位置的索引

* 2.截取的长度

str = “abcdefg”;

result = str.substr(3,2);

split()

* - 可以将一个字符串拆分为一个数组

* - 参数：

* -需要一个字符串作为参数，将会根据该字符串去拆分数组

str = “abcbcdefghij”;

result = str.split(“d”);

* 如果传递一个空串作为参数，则会将每个字符都拆分为数组中的一个元素

result = str.split(“”);

//console.log(Array.isArray(result));

//console.log(result[0]);

console.log(result);

str = “abcdefg”;

toUpperCase()

* - 将一个字符串转换为大写并返回

result = str.toUpperCase();

str = “ABCDEFG”;

toLowerCase()

* -将一个字符串转换为小写并返回

result = str.toLowerCase();

console.log(result);

7.2字符串和正则表达式

var str = “1a2b3c4d5e6f7”;

split()

* - 可以将一个字符串拆分为一个数组

* - 方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串

* - 这个方法即使不指定全局匹配，也会全都插分

search()

* - 可以搜索字符串中是否含有指定内容

* - 如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回-1

* - 它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串

* - serach()只会查找第一个，即使设置全局匹配也没用

str = “hello abc hello aec afc”;

* 搜索字符串中是否含有abc 或 aec 或 afc

result = str.search(/a[bef]c/);

//console.log(result);

match()

* - 可以根据正则表达式，从一个字符串中将符合条件的内容提取出来

* - 默认情况下我们的match只会找到第一个符合要求的内容，找到以后就停止检索

* 我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容

* 可以为一个正则表达式设置多个匹配模式，且顺序无所谓

* - match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果

str = “1a2a3a4a5e6f7A8B9C”;

result = str.match(/[a-z]/ig);

//console.log(result[2]);

replace()

* - 可以将字符串中指定内容替换为新的内容

* - 参数：

* 1.被替换的内容，可以接受一个正则表达式作为参数

* 2.新的内容

* - 默认只会替换第一个

//result = str.replace(/[a-z]/gi , “@_@”);

result = str.replace(/[a-z]/gi , “”);

//console.log(result);

7.3 正则表达式

创建一个正则表达式检查一个字符串中是否含有aaa

* 量词

* - 通过量词可以设置一个内容出现的次数

* - 量词只对它前边的一个内容起作用

* - {n} 正好出现n次

* - {m,n} 出现m-n次

* - {m,} m次以上

* - + 至少一个，相当于{1,}

* - * 0个或多个，相当于{0,}

* - ? 0个或1个，相当于{0,1}

* 检查一个字符串中是否以a开头

* ^ 表示开头

* $ 表示结尾

reg = /^a/; //匹配开头的a

reg = /a$/; //匹配结尾的a

7.3.1手机表达式

* 创建一个正则表达式，用来检查一个字符串是否是一个合法手机号

* 手机号的规则：

* 1 3 567890123 （11位）

* 1. 以1开头

* 2. 第二位3-9任意数字

* 3. 三位以后任意数字9个

* ^1 [3-9] [0-9]{9}$

var phoneStr = “13067890123”;

var phoneReg = /^1[3-9][0-9]{9}$/;

console.log(phoneReg.test(phoneStr));

7.3.2邮件的正则

* 电子邮件

* hello .nihao @ abc .com.cn

* 任意字母数字下划线 .任意字母数字下划线 @ 任意字母数字 .任意字母（2-5位） .任意字母（2-5位）

* \w{3,} (.\w+)* @ [A-z0-9]+ (.[A-z]{2,5}){1,2}

      var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;

      var email = "abc.hello@163.com";

      console.log(emailReg.test(email));

8.1DOM

* 浏览器已经为我们提供文档节点对象这个对象是window属性

* 可以在页面中直接使用，文档节点代表的是整个网页

<button id="btn">我是一个按钮</button>
		<script type="text/javascript">
			//console.log(document);
			//获取到button对象
			var btn = document.getElementById("btn");
			//修改按钮的文字
			btn.innerHTML = "I'm Button";	
		</script>

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

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

8.2事件

* 事件，就是用户和浏览器之间的交互行为，

* 比如：点击按钮，鼠标移动、关闭窗口。。。

* 可以为按钮的对应事件绑定处理函数的形式来响应事件

* 这样当事件被触发时，其对应的函数将会被调用

<body>
		<!--<button id="btn" οnmοusemοve="alert('讨厌，你点我干嘛！');">我是一个按钮</button>-->
		<button id="btn">我是一个按钮</button>
		<script type="text/javascript">
			//获取按钮对象
			var btn = document.getElementById("btn");
			/*
			 * 可以为按钮的对应事件绑定处理函数的形式来响应事件
			 * 	这样当事件被触发时，其对应的函数将会被调用
			 */
			
			//绑定一个单击事件
			//像这种为单击事件绑定的函数，我们称为单击响应函数
			btn.onclick = function(){
				alert("你还点~~~");
			};		
		</script>

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

8.3文件的加载

* 浏览器在加载一个页面时，是按照自上向下的顺序加载的，

* 读取到一行就运行一行,如果将script标签写到页面的上边，

* 在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载

* 会导致无法获取到DOM对象

* onload事件会在整个页面加载完成之后才触发

* 为window绑定一个onload事件

* 该事件对应的响应函数将会在页面加载完成之后执行，

* 这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了

8.4DOM查询

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="style/css.css" />
		<script type="text/javascript">
		
			window.onload = function(){
				
				//为id为btn01的按钮绑定一个单击响应函数
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					//查找#bj节点
					var bj = document.getElementById("bj");
					//打印bj
					//innerHTML 通过这个属性可以获取到元素内部的html代码
					alert(bj.innerHTML);
				};
				
				
				//为id为btn02的按钮绑定一个单击响应函数
				var btn02 = document.getElementById("btn02");
				btn02.onclick = function(){
					//查找所有li节点
					//getElementsByTagName()可以根据标签名来获取一组元素节点对象
					//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
					//即使查询到的元素只有一个，也会封装到数组中返回
					var lis = document.getElementsByTagName("li");
					
					//打印lis
					//alert(lis.length);
					
					//变量lis
					for(var i=0 ; i<lis.length ; i++){
						alert(lis[i].innerHTML);
					}
				};
				
				
				//为id为btn03的按钮绑定一个单击响应函数
				var btn03 = document.getElementById("btn03");
				btn03.onclick = function(){
					//查找name=gender的所有节点
					var inputs = document.getElementsByName("gender");
					
					//alert(inputs.length);
					
					for(var i=0 ; i<inputs.length ; i++){
						
						alert(inputs[i].className);
					}
				};
				
				
				
				//查找#city下所有li节点
				//返回#city的所有子节点
				//返回#phone的第一个子节点
				//返回#bj的父节点
				//返回#android的前一个兄弟节点
				//读取#username的value属性值
				//设置#username的value属性值
				//返回#bj的文本值
				
			};
			
		
		</script>
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>

				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>

				<br>
				<br>

				<p>
					你喜欢哪款单机游戏?
				</p>

				<ul id="game">
					<li id="rl">红警</li>
					<li>实况</li>
					<li>极品飞车</li>
					<li>魔兽</li>
				</ul>

				<br />
				<br />

				<p>
					你手机的操作系统是?
				</p>

				<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
			</div>

			<div class="inner">
				gender:
				<input class="hello" type="radio" name="gender" value="male"/>
				Male
				<input class="hello" type="radio" name="gender" value="female"/>
				Female
				<br>
				<br>
				name:
				<input type="text" name="name" id="username" value="abcde"/>
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">查找#bj节点</button></div>
			<div><button id="btn02">查找所有li节点</button></div>
			<div><button id="btn03">查找name=gender的所有节点</button></div>
			<div><button id="btn04">查找#city下所有li节点</button></div>
			<div><button id="btn05">返回#city的所有子节点</button></div>
			<div><button id="btn06">返回#phone的第一个子节点</button></div>
			<div><button id="btn07">返回#bj的父节点</button></div>
			<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
			<div><button id="btn09">返回#username的value属性值</button></div>
			<div><button id="btn10">设置#username的value属性值</button></div>
			<div><button id="btn11">返回#bj的文本值</button></div>
		</div>
	</body>
</html>

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

8.5DOM其他查询

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			window.onload = function(){
				
				//获取body标签
				//var body = document.getElementsByTagName("body")[0];
				
				/*
				 * 在document中有一个属性body，它保存的是body的引用
				 */
				var body = document.body;
				
				/*
				 * document.documentElement保存的是html根标签
				 */
				var html = document.documentElement;
				
				//console.log(html);
				
				/*
				 * document.all代表页面中所有的元素
				 */
				var all = document.all;
				
				//console.log(all.length);
				
				/*for(var i=0 ; i<all.length ; i++){
					console.log(all[i]);
				}*/
				
				//all = document.getElementsByTagName("*");
				//console.log(all.length);
				
				
				/*
				 * 根据元素的class属性值查询一组元素节点对象
				 * getElementsByClassName()可以根据class属性值获取一组元素节点对象，
				 * 	但是该方法不支持IE8及以下的浏览器
				 */
				//var box1 = document.getElementsByClassName("box1");
				//console.log(box1.length);
				
				//获取页面中的所有的div
				//var divs = document.getElementsByTagName("div");
				
				//获取class为box1中的所有的div
				//.box1 div
				/*
				 * document.querySelector()
				 * 	- 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
				 * 	- 虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替
				 * 	- 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
				 */
				var div = document.querySelector(".box1 div");
				
				var box1 = document.querySelector(".box1")
				
				//console.log(div.innerHTML);
				//console.log(box1.innerHTML);
				
				/*
				 * document.querySelectorAll()
				 * 	- 该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
				 * 	- 即使符合条件的元素只有一个，它也会返回数组
				 */
				box1 = document.querySelectorAll(".box1");
				box1 = document.querySelectorAll("#box2");
				console.log(box1);
				
			};
			
			
		</script>
	</head>
	<body>
		<div id="box2"></div>	
		<div class="box1">
			我是第一个box1	 
			<div>我是box1中的div</div>
		</div>
		<div class="box1">
			<div>我是box1中的div</div>
		</div>
		<div class="box1">
			<div>我是box1中的div</div>
		</div>
		<div class="box1">
			<div>我是box1中的div</div>
		</div>
		
		<div></div>
	</body>
</html>

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

8.6DOM增删改

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="style/css.css" />
		<script type="text/javascript">
			window.onload = function() {
				//创建一个"广州"节点,添加到#city下
				myClick("btn01",function(){
					//创建广州节点 <li>广州</li>
					//创建li元素节点
					/*
					 * document.createElement()
					 * 	可以用于创建一个元素节点对象，
					 * 	它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，
					 * 	并将创建好的对象作为返回值返回
					 */
					var li = document.createElement("li");
					
					//创建广州文本节点
					/*
					 * document.createTextNode()
					 * 	可以用来创建一个文本节点对象
					 *  需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
					 */
					var gzText = document.createTextNode("广州");
					
					//将gzText设置li的子节点
					/*
					 * appendChild()
					 * 	 - 向一个父节点中添加一个新的子节点
					 * 	 - 用法：父节点.appendChild(子节点);
					 */
					li.appendChild(gzText);
					
					//获取id为city的节点
					var city = document.getElementById("city");
					
					//将广州添加到city下
					city.appendChild(li);
				});
				
				//将"广州"节点插入到#bj前面
				myClick("btn02",function(){
					//创建一个广州
					var li = document.createElement("li");
					var gzText = document.createTextNode("广州");
					li.appendChild(gzText);
					
					//获取id为bj的节点
					var bj = document.getElementById("bj");
					
					//获取city
					var city = document.getElementById("city");	
					/*
					 * insertBefore()
					 * 	- 可以在指定的子节点前插入新的子节点
					 *  - 语法：
					 * 		父节点.insertBefore(新节点,旧节点);
					 */
					city.insertBefore(li , bj);
					
				});
				//使用"广州"节点替换#bj节点
				myClick("btn03",function(){
					//创建一个广州
					var li = document.createElement("li");
					var gzText = document.createTextNode("广州");
					li.appendChild(gzText);
					
					//获取id为bj的节点
					var bj = document.getElementById("bj");
					
					//获取city
					var city = document.getElementById("city");
					
					/*
					 * replaceChild()
					 * 	- 可以使用指定的子节点替换已有的子节点
					 * 	- 语法：父节点.replaceChild(新节点,旧节点);
					 */
					city.replaceChild(li , bj);
				});
				//删除#bj节点
				myClick("btn04",function(){
					//获取id为bj的节点
					var bj = document.getElementById("bj");
					//获取city
					var city = document.getElementById("city");
					
					/*
					 * removeChild()
					 * 	- 可以删除一个子节点
					 * 	- 语法：父节点.removeChild(子节点);
					 * 		
					 * 		子节点.parentNode.removeChild(子节点);
					 */
					//city.removeChild(bj);
					
					bj.parentNode.removeChild(bj);
				});
				
				
				//读取#city内的HTML代码
				myClick("btn05",function(){
					//获取city
					var city = document.getElementById("city");
					
					alert(city.innerHTML);
				});
				
				//设置#bj内的HTML代码
				myClick("btn06" , function(){
					//获取bj
					var bj = document.getElementById("bj");
					bj.innerHTML = "昌平";
				});
				
				myClick("btn07",function(){
					
					//向city中添加广州
					var city = document.getElementById("city");
					
					/*
					 * 使用innerHTML也可以完成DOM的增删改的相关操作
					 * 一般我们会两种方式结合使用
					 */
					//city.innerHTML += "<li>广州</li>";
					
					//创建一个li
					var li = document.createElement("li");
					//向li中设置文本
					li.innerHTML = "广州";
					//将li添加到city中
					city.appendChild(li);
					
				});
				
				
			};
			
			function myClick(idStr, fun) {
				var btn = document.getElementById(idStr);
				btn.onclick = fun;
			}
			
		
		</script>
		
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>

				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>
				
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
			<div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
			<div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
			<div><button id="btn04">删除#bj节点</button></div>
			<div><button id="btn05">读取#city内的HTML代码</button></div>
			<div><button id="btn06">设置#bj内的HTML代码</button></div>
			<div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
		</div>
	</body>
</html>

ById(“city”);
/*
* insertBefore()
* - 可以在指定的子节点前插入新的子节点
* - 语法：
* 父节点.insertBefore(新节点,旧节点);
*/
city.insertBefore(li , bj);

			});
			//使用"广州"节点替换#bj节点
			myClick("btn03",function(){
				//创建一个广州
				var li = document.createElement("li");
				var gzText = document.createTextNode("广州");
				li.appendChild(gzText);
				
				//获取id为bj的节点
				var bj = document.getElementById("bj");
				
				//获取city
				var city = document.getElementById("city");
				
				/*
				 * replaceChild()
				 * 	- 可以使用指定的子节点替换已有的子节点
				 * 	- 语法：父节点.replaceChild(新节点,旧节点);
				 */
				city.replaceChild(li , bj);
			});
			//删除#bj节点
			myClick("btn04",function(){
				//获取id为bj的节点
				var bj = document.getElementById("bj");
				//获取city
				var city = document.getElementById("city");
				
				/*
				 * removeChild()
				 * 	- 可以删除一个子节点
				 * 	- 语法：父节点.removeChild(子节点);
				 * 		
				 * 		子节点.parentNode.removeChild(子节点);
				 */
				//city.removeChild(bj);
				
				bj.parentNode.removeChild(bj);
			});
			
			
			//读取#city内的HTML代码
			myClick("btn05",function(){
				//获取city
				var city = document.getElementById("city");
				
				alert(city.innerHTML);
			});
			
			//设置#bj内的HTML代码
			myClick("btn06" , function(){
				//获取bj
				var bj = document.getElementById("bj");
				bj.innerHTML = "昌平";
			});
			
			myClick("btn07",function(){
				
				//向city中添加广州
				var city = document.getElementById("city");
				
				/*
				 * 使用innerHTML也可以完成DOM的增删改的相关操作
				 * 一般我们会两种方式结合使用
				 */
				//city.innerHTML += "<li>广州</li>";
				
				//创建一个li
				var li = document.createElement("li");
				//向li中设置文本
				li.innerHTML = "广州";
				//将li添加到city中
				city.appendChild(li);
				
			});
			
			
		};
		
		function myClick(idStr, fun) {
			var btn = document.getElementById(idStr);
			btn.onclick = fun;
		}
		
	
	</script>
	
</head>
<body>
	<div id="total">
		<div class="inner">
			<p>
				你喜欢哪个城市?
			</p>

			<ul id="city">
				<li id="bj">北京</li>
				<li>上海</li>
				<li>东京</li>
				<li>首尔</li>
			</ul>
			
		</div>
	</div>
	<div id="btnList">
		<div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
		<div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
		<div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
		<div><button id="btn04">删除#bj节点</button></div>
		<div><button id="btn05">读取#city内的HTML代码</button></div>
		<div><button id="btn06">设置#bj内的HTML代码</button></div>
		<div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
	</div>
</body>