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>