01-HTML+CSS+JS【常用总结+案例练习】

文章目录

- HTML
- - 第一部分
  - 第二部分
  - 第三部分
  - 总结
- CSS
- - 选择器
  - 常用样式
  - 总结
- JavaScript
- - ECMA Script
  - - 基本语法
    - JS对象
  - BOM浏览器对象模型
  - DOM文档对象模型
  - - 事件
案例：
- 案例1-注册表单校验
- 案例2-5秒后跳转到百度官网
- 案例3-全选和全不选和反选
- 案例4-省市二级联动
- 案例5-表格隔行换色
- 案例6-轮播图
- 案例7-定时弹广告
- 案例8-会跳动的时钟

不要死记硬背，要学会运用，案例驱动，通过案例学习

前端知识点细，碎，多

HTML      网页的骨架，用来书写网页的。
Css          美化网页的。
javaScript   网页的灵魂，用来交互前端页面和后台服务器之间的数据的，没有js。那么html+css就是一个静态页面，不会和后台服务器进行数据的交互。开发中也就没有什么意义了。

HTML

HTML：**超文本标记语言**（HyperText Markup Language）它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程。补充：网页存放在服务器上，运行在浏览器上，运行之前先从服务器上下载到本地，在本地浏览器上解析。

Html5 2014年10月29日，万维网联盟 ,经过8年的努力制定的HTML5标准规范目前支持的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari(苹果系统)，Opera等。**不同的浏览器之间是有差异，同一个网页运行可能会不同。**

网页内容包含：
HTML代码、CSS代码、JavaScript代码等内容。
1)HTML代码：       结构层（好比人的骨骼/身体）     负责从语义的角度搭建页面结构
2)CSS代码：        表现层（好比人的穿衣打扮）      负责从审美的角度美化页面
3)JavaScript代码： 行为层（好比一个人能歌善舞）     负责从交互的角度提升用户体验。网页根据内容是否改变分为：静态页面、动态页面
4)静态页面：编写之后在浏览器不再改变的网页。HTML就是用于编写静态网页的。
5)动态页面：会根据不同的情况展示不同的内容。例如：登录成功后右上角显示用户名。

HTML的特点：
1、 HTML文件不需要编译，直接使用浏览器解析即可。
2、 HTML文件的扩展名是*.html 或 *.htm。
3、 HTML结构都是由标签组成。
4、 标签名预先定义好的，我们只需要了解其功能即可。1) 标签名不区分大小写，通常都是小写。2) 通常情况下标签由开始标签和结束标签组成。叫做双标签。例如：<a>www.baidu.com</a> 超链接3) 如果没有结束标签，建议以/结尾。叫做单标签。例如：<img src="" width="" height="" />img： 称为标签名5、 HTML结构包括两部分：头head和体body。

HTML属性特点：
1、 HTML属性一般都出现在HTML标签中, 是HTML标签的一部分。
2、 标签可以有属性,它包含了额外的信息.属性的值一定要在双引号中。
3、 标签可以拥有多个属性。
4、 一般属性由属性名和属性值成对组成的。
例如：
<!-- 定义一张图片，并设置图片的宽度和高度-->
<img src="data:images/baby.jpg" width="80" height="50"/>

第一部分

`标题标签 h1.在html中，标题标签使用hn表示，n的取值范围是1-6，标题字体依次变小2.标题标签特点：1）单独占一行，在html中只要单独占一行的标签称为块级标签2）标题标签是加粗的`水平线 hr1.水平线标签使用 hr2.水平线标签属于单标签3.hr水平线标签的属性：1）size:表示水平线的大小即高度2）noshade="noshade" :表示没有阴影，即实心，默认是空心的`字体标签 font1  在html中字体标签使用 font表示2  在html5后，字体标签font过时了，但是所有的浏览器依然识别3  font字体标签常见的属性：1）color:表示字体颜色.color属性值取值可以有两种写法：a:直接书写英文单词b:可以使用十六进制方式来表示，表示格式：#RGB, r :红色 g : 绿色   b: 蓝色 建议然后每种颜色使用两个数字表示。举例：红色： #ff 00 00R  G  B蓝色：#00 00 ff绿色：#00 ff 002)size:表示字体大小：取值1-7，超过最大按照7显示，小于1，按照1显示.默认大小是3px3)face:表示字体样式。宋体 楷体等`格式化标签:1.加粗标签：b2.倾斜标签: i`段落和换行标签：1.段落标签：p.每个文字段落之间都会有留白(空白)，单独占一行，属于块级标签  双标签2.换行标签：br 每段文字可以实现换行，每一行之间没有留白 单标签`特殊字符实体标签：1.在html中所有的特殊字符实体标签的格式：&开始，;结尾2.举例：<     &lt;    less than>     &gt;    greater than空格   &nbsp;版权符号：&copy; © 2003-现在 Taobao.com 版权所有人民币符号：&yen;`显示图片的标签img
属性：
1.src:表示引入的图片的服务器地址1)src="../img/美女.jpg" : ..表示当前页面demo01.html的父目录：c_img_032)然后找到c_img_03的同级目录：img3)img/美女.jpg:找到img下面的美女.jpg
2.alt:如果加载图片失败，显示alt中的属性值内容
3.title:表示鼠标放到图片上的说明
4.width:图片宽度
5.height:图片高度
6.border:图片边框`无序列表标签ul
说明：
1.无序列表标签ul单独使用没有意义，必须借助于子标签li一起使用
2.ul具有一个常见的属性：type,具有三个属性值1）disc:默认的，表示实心圆2）square:表示实心正方形3) circle:表示空心圆ul>li*4 按tab键   快速生成无序的四个列表`有序列表标签ol
说明：
1.有序列表标签ol单独使用没有意义，必须借助于子标签li一起使用
2.ol具有一个常见的属性：type,具有属性值:1)1:默认的，数字2)a:小写字母3)A:大写字母4)i:罗马数字5)I:罗马数字`超链接标签：a
属性：1.href:要跳转的服务器地址2.target:以何种方式打开要跳转的新页面：1）_blank:新的窗口打开2）_self:覆盖当前页面，属于默认的打开方式
a标签实现空连接：不能跳转1.<a href="#">         这种不建议使用2.javascript:void(0);  表示使用我们后面学习的语言javascript中的空函数void(0)3.javascript:         建议使用
a标签的锚点连接 例如：
<a href="#maodian">找锚点</a>======================================================================================================。。。。。。省略一万行============== <a name="maodian">锚点在这呢</a>======

`表格标签
1)<table>表格标签border表格边框的宽度width表格的宽度height表格的高度cellpadding单元格边沿与其内容之间的空白cellspacing单元格之间的空白bgcolor :background color表格的背景颜色
2) <tr>表格中的行标签align单元格内容的水平对齐方式,取值：left 左 、right 右、center 居中
3)<td>表格中一行中的列标colspan单元格可横跨的列数(横向合并单元格)columnrowspan单元格可横跨的行数(纵向合并单元格)align单元格内容的水平对齐方式,取值：left 左 、right 右、center 居中（了解）表格标签的子标签：1.整个表格的标题：caption2.tbody:表格体标签,默认就存在的<table border="1px" cellpadding="0px" cellspacing="0px" width="400px" height="400px"><!--整个表格的标题：caption--><caption>联系人</caption><!--表格体标签--><tbody><tr><th>姓名</th><!--表示跨2列，手机号占第2 3列--><th colspan="2">手机号</th><!--<th>手机号</th>--></tr><tr><td>张三</td><td>138000000000</td><td>138000000001</td></tr><tr><td>李四</td><td>139000000000</td><td>139000000001</td></tr></tbody></table>

第二部分

`form表单标签1.单独存在无意义，必须借助于子标签，子标签内容必须书写在form标签文本中，否则后台无法获取到前端浏览器提交的数据2.form表单标签常见属性：1）action="提交数据到服务器的地址"2）method="前端浏览器提交到后台服务器数据的提交方式"
注意：
1.常见的提交方式有两种：get post
2.如果不书写提交方式，默认是get请求方式，对于post请求方式必须书写post
3.get和post的请求方式区别：a:get请求的数据放到请求服务器的地址后面：例如：http://www.baidu.com?username=zhangsan&password=1234get请求缺点：不安全 所有数据都放到url后面，大小有限制 只能传输字符数据get优点：快 可以作为商品分享b:post请求的数据不放到请求服务器的地址后面：数据放到请求体中http://www.baidu.compost请求缺点：慢post请求优点：1）安全2）可以传输的数据没有限制 可以传输图片 音频 视频`input标签：
属性：
1.type属性,常见的属性值：1）text:input输入标签的文本，默认的2）password:密码框 加密2) email:邮件框3）radio：单选按钮4）checkbox:复选框(多选)5）file:表示上传的文件6) image:上传的图片 了解7) hidden：隐藏域，不在页面中显示，但是可以使用8) submit:提交按钮 通过value属性来显示显示的值9) reset：重置10）button ：提交按钮，后续可以使用js操作等
2.name属性：1）使用在单选按钮上，多个单选按钮的name属性值相同，那么就会实现只能选择一个的效果2）在实际开发中我们必须给input标签书写name属性，后台服务器就可以通过name属性值获取输入框的value属性值
3.value属性，后台服务器获取的就是value属性对于输入框输入的值就是value属性值
4.checked属性：使用在单选按钮和复选框中，表示默认被选中使用：checked="checked" 或者在input标签中直接书写checked
5.disabled：使得按钮不能操作，使用在单选按钮和复选框使用：disabled="disabled" 或者在input标签中直接书写disabled
6.readonly:只读，一般使用在输入框中
7.maxlength：允许输入的最大长度<input type="image" src="../img/美女.jpg">
两种方式都可以显示图片
<img src="../img/美女.jpg" alt="">`select下拉框标签：1.单独存在没有意义，需要使用子标签：option表示下拉框的选项，有几个选项就书写几个option2.select标签的属性：1)name属性：后台可以通过name属性值获取当前下拉框被选中项的value属性值举例：当前页面被选中的是硕士，那么后台可以根据edu获取硕士的value属性值sh2)size:下拉框每次显示的选项个数3)multiple="multiple" 表示下拉框可以展示多个选项3.子标签option属性：1）value属性：必须书写，如果不书写，后台获取的就是option的文本值2) selected="selected" 表示页面一加载下拉框被选中的项eg:<form action="#" method="get"><!--<select name="edu" size="2">--><!--<select name="edu" multiple="multiple">--><select name="edu"><option value="">-----------请选择学历-----------</option><option value="bs">博士</option><option value="sh">硕士</option><option value="bk" selected="selected">本科</option><option value="zk">专科</option></select></form>`文本域标签：textarea
`按钮标签：button<form action="#"><!--文本域标签：textarea:由行和列组成-->自我描述：<br><textarea rows="10" cols="20"></textarea><!--按钮标签：button常见属性type具有属性值：1.submit ：提交表单2.button：提交按钮，后续可以使用js操作3.reset ：重置注意：上述三个属性值显示的内容在标签的文本中指定--><button type="submit">登录</button><button type="button">注册</button><button type="reset">重置</button>
</form>`label标签【可以实现通过文本选中某个指定的标签】 比较常见的应用场景是单选按钮。说明：使用label标签的for属性值引用要定位的标签的id属性值。就是for属性值必须和id属性值一致
eg:
<form action="#">
性别：
<input type="radio" name="sex" id="male"><label for="male">男</label>
<input type="radio" name="sex" id="female"><label for="female">女</label>
</form>

`html5后对于input标签的type新增的属性值
<form action="#"><!--显示日历年月日--><input type="date"><input type="color"><input type="datetime-local"><!--邮箱校验--><input type="email"><!--只能输入数字--><input type="number"><!--表示查找--><input type="search"><input type="submit">
</form>

第三部分

div标签：主要结合css技术用来页面的布局，单独使用没有效果，属于块级标签p标签属于块级标签，具有留白span标签：单独使用没有意义，和css一起使用，可以设置字体样式，从html5后取代了font.
span标签属于行内标签(共处一行的标签：input span a等)

总结

第一章、HTML概述1、HTML：超文本标签语言    标签语言，超文本(文本，音频，视频....)2、作用：编写网页3、HTML文件：【1】后缀名: .html  .htm【2】书写内容： 普通文本，标签【3】运行： 浏览器运行html4、HTML文件基本结构：【1】文档声明： <!doctype html>【2】根标签： <html></html>【3】头部，主体： head标签  body标签第二章、标签和属性1、标签组成： <标签名> 标签体 </标签名>    <br>2、分类：【1】是否有标签体：双标签  ，单标签【2】是否会换行： 块标签，内联标签3、标签属性： <font color="red">传智播客</font>属性写法： 开始标签内部 属性名="属性值"作用：给标签添加额外的修饰效果4、学习HTML：知道标签的基本作用知道标签的常用属性第三章、常用标签1、新闻字体标签：修饰文章【1】标题标签  h标签分类：h1~h6特点：1、给文字设置标题； 2、独占一行，文字加粗效果属性：align:水平对齐方式    left,center,right【2】水平线标签： hr标签作用：在页面上设置水平线，区分标题和正文属性：noshade="noshade"color="red"size="数字"【3】文字效果： font<font color="red" size="7" face="楷体">传智播客</font>    【4】加粗/倾斜：  <b><i>文字</i></b>【5】换行标签： br【6】段落标签： p2、特殊字符：字符实体空格： &nbsp;大于： &gt;小于： &lt;。。。。。。。。。。。。。。。。3、列表和超链接：列表： ul>li    ol>li超链接：a【1】作用：超链接，锚点定位，空链接【2】超链接：<a href="url" target="_blank">百度</a>3、图片标签：img【1】作用：在页面上引入一张图片【2】属性：<img src="../../img/1.jpg" width="200px" height="50%" alt="提示信息" title="标题">4、表格标签：table【1】作用：数据表格--格式化展示数据    页面布局（table,div+css）【2】组成：table：tr：td：th：【3】其他标签：标题： <caption>表格标题</caption>thead  tbody tfoot【4】属性：border="1px"width="宽度"height="高度"cellspacing="0"cellpadding="10px"【5】跨行跨列表格：跨行： rowspan="2"   从上到下跨列： colspan="2"  从左到右第四章、form表单【1】form表单的作用：提供一系列的组件，收集用户在页面上输入或者选择的数据；把数据提交给服务器；【2】form标签：action="url"：设置提交数据的地址method="get/post"： post【3】表单项：子标签input：用户名： <input type="text" name="userName">  文本框密码：  <input type="password" name="pwd">   密码框性别：  男<input type="radio" name="gender" checked value="男"> .....爱好：  唱 <input type="checkbox" name="hobby" checked value="唱"> .......隐藏域： <input type="hidden" name="id" value="1001"  >            文件上传： <input type="file" name="file">select：下拉框城市： <select name="city" multiple ><option value="sh">上海</option><option value="bj"  selected>北京</option></select>textarea：文本域个人简介：<textarea name="desc" rows="10" cols="20"></textarea>按钮：input类按钮：提交按钮： <input type="submit" value="注册">图片提交： <input type="image" src="url" >重置： <input type="reset" >重置用户输入的内容普通按钮： <input type="button" value="普通按钮">button类：<button>注册</button>  提交表单数据H5的新特性： input标签的 type日期： <input type="date"> 日期插件数字： <input type="number">数字email：<input type="email">

CSS

选择器

CSS 通常称为CSS样式或层叠样式表，又称之为网页的美容师，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（高宽、边框样式、边距等）以及版面的布局等外观显示样式。CSS+DIV布局更佳灵活，更容易绘制出用户需要的结构。CSS (Cascading Style Sheets) ：指层叠样式表样式： 给HTML标签添加需要显示的效果。层叠： 使用不同的添加方式，给同一个HTML标签添加样式，最后所有的样式都叠加到一起，共同作用于该标签。

`样式的属性：
字体颜色：color
字体大小：font-size
边框：border：border-width border-style border-color
注意：这里的像素单位px不能省略，省略，效果就不会出现了。border: 1px solid red;`CSS和HTML结合的方式
方式一：使用HTML标签的style属性（行内）
<div style="color: yellow;font-size: 100px;border-width: 1px;border-style: solid;border-color: red">div哈哈哈</div>方式二：在head标签使用style标签设置（内部）<style type="text/css">/*书写css样式作用div标签*/div{/*字体为黄色*/color: yellow;/*字体大小100px*/font-size: 100px;/*边框为 1px  实线 边框颜色为红色*/border: 1px solid red;}</style>方式三：在head标签中使用link标签（外部）(掌握)1.rel="stylesheet" 表示层叠样式表，不能省略2.type="text/css" 表示引入文件的类型是css文件，可以省略3.href="../css/demo01.css" 引入外部的css文件路径
<link rel="stylesheet" type="text/css" href="css文件路径" />选择器 (理解)
`**标签名选择器** ：作用在当前页面的所有该名称标签上的。
格式
具体标签名称{css代码;
}
例如：
div{color:red;font-size: 100px;background-color: yellow;border:1px solid blue;
}`id选择器
作用于某一个特定的标签上。根据指定标签的id来设置css样式。
说明：一个页面中要求id的属性值唯一。不能重复。
格式：
#ID选择器的名称 ｛css代码；
｝
<标签名 id=” ID选择器的名称” />`class选择器
作用在一组标签之上。
说明：ID选择器只能作用单个标签。而class选择器可以作用在单个或者多个标签上。
格式：
.class选择器的名称 ｛css代码；
｝
<标签名 id=” ID选择器的名称” />`组合选择器
应用场景：如果页面不同的选择器想使用相同的css样式。
组合选择器可以使用任意的选择器来组合，个数可以任意个。
格式
选择器1, 选择器2... {css代码
}`关联选择器
格式
父标签的选择器 后代标签选择器｛css代码；
｝
例如：通过id为a的标签找到下面的所有的span标签，也就是说，关联选择器更加强调的是通过父亲查找孩子<style type="text/css">#a span {color: yellow;font-size: 50px;border: 1px solid red;}
</style><div id="a"><span>我是span1</span><span>我是span2</span>
</div><span>我是span3</span><span>我是span4</span>
<div><span>我是span5</span><span>我是span6</span>
</div>`属性选择器(了解)
属性选择器是在原有选择器的基础上，通过**标签的属性**，再次对标签进行筛选。
格式
选择器名[属性名="属性值"] {css样式；
}

常用样式

`边框和尺寸
1、border ：设置边框的样式。1） 格式：border：边框宽度(border-width) 边框样式 边框颜色。2）例如：style="border:1px solid #f00"  表示1像素实边红色。边框样式取值：solid 实线，none 无边，dashed虚线 等。2、width、height：用于设置标签的宽度、高度。
格式：
width:标签具体的宽度。
height:标签具体的高度。`转换：display(掌握)
HTML提供丰富的标签，这些标签被定义成了不同的类型，一般分为：块标签和行内标签。
1、块标签：以区域块方式出现。每个块标签独自占据一整行或多整行。1）常见的块元素：<h1>、<div>、<ul>等2）默认可以设置高度和宽度
2、行内元素：不必在新的一行开始，同时也不强迫其他元素在新的一行显示。1）常见的行内元素：<span>、<a> 等2）设置高度和宽度无效在开发中，如果希望行内元素具有块元素的特性，或者希望块元素具有行内元素的特性。
也就是希望行内元素和块元素之间相互转换。
需要使用display属性将**行内元素转换成块级元素** 或者将**块级元素转换为行内元素**。选择器 {display : 属性值 }
常用的属性值：inline：此元素将显示为行内元素（行内元素默认的display属性值）block：此元素将显为块元素（块元素默认的display属性值）none：此元素将被隐藏，不显示，也不占用页面空间。`字体：color、line-height
color：     颜色    字体颜色
line-height:  行高    设置行高`背景
background-color： 颜色;  设置元素的背景颜色
background-image : url(图片的路径地址);
background-repeat: 背景平铺方式;
背景平铺方式取值：
no-repeat： 不平铺
repeat-x ： 横向平铺
repeat-y ： 纵向平铺
注意：图片默认是平铺满整个盒子的`边框(盒模型)(了解)
1、 盒子模型有哪些部分组成
元素的内容(高度、宽度)、内边距（padding）、边框（border）和外边距（margin）组成 。
2、 盒子模型大小受哪些部分影响
盒子模型的大小受元素的内容(高度、宽度)、内边距（padding）、边框（border）的影响，不受外边距的影响
3、外边距影响在页面中的位置

总结

 1、CSS作用：美化HTML页面（给html标签添加样式）;2、CSS选择器：【1】基本选择器：id选择器：    #id值{样式}   选中页面唯一标签class选择器： .class属性值{ 样式 }元素选择器：  div{  }通用（选择所有）： *{  }【2】扩展选择器：层级选择器：  div span{}属性过滤：    input[type='text']{}【3】其他：并集（组合）：  div,span{}交集（同时满足）：  div#myDiv{}伪类（操作状态）：a:link{}  默认状态a:active{} 正在被点击a:visited{} 已经被点击过一次a:hover{}   鼠标悬浮在元素上面3、常用样式：【1】文本样式：color:yellowtext-align:centertext-indent: 2emtext-decoration: none,underline【2】文字样式：font-size:100pxfont-family:楷体font-style:italicfont-weight:bold【3】背景：background-color:redbackground-image:url("../img/1.jpg")background-repeat: no-repeat  【4】边框：border: 1px solid red;border-radius: 5px【5】盒子模型：盒子模型内容：边框：border（4个边）内容：内边距：padding(4个)外边距：margin(4个)设置块元素水平居中： margin:auto;

JavaScript

作用：用于开发交互式的web页面
1995年时，Netscape（网景）公司推出Navigator浏览器
网景公司大牛Brendan Eich（布兰登·艾奇）据说用了10天就把JavaScript搞了出来，刚出来叫LiveScript
微软参考JavaScript弄了个名为JScript浏览器脚本语言
1997年弄出了ECMAScript作为标准。这里ECMAscript和JavaScript可以看做表达的同一个东西。

**JavaScript特点**
1. 它不需要进行编译，而是直接嵌入在HTML页面中，**由浏览器执行**。
2. JavaScript 被设计用来向 HTML 页面添加交互行为
3. JavaScript **是一种脚本语言**（脚本语言是一种轻量级的编程语言）。 说明：脚本语言就是一种轻量级的编程语言。一般都由相应的脚本引擎来[解释执行](解释执行不依赖于平台，因为编译器会根据不同的平台进行解析。例如JS语言无论在windows平台还是在Lunix平台都可以使用。故可移植性强。使用解释执行的程序我们一般称为解释程序)。例如JavaScript语言就由浏览器引擎来解析和执行。
在计算机上不需要安装其他的软件。而java语言就不是脚本语言，必须在计算机安装jdk之后才可以运行。
脚本语言除了JavaScript 语言，还有PHP,Python等语言。
4. 重点强调一下：JavaScript(js)是弱类型语言，js变量声明不需要指明类型，而java属于强类型语言。
例如java中定义变量时会根据不同的数据类型书写不同的数据类型的关键字，而js不是。

 **JavaScript组成**| **组成部分**     | **作用**                                                   |
| --------------- | ---------------------------------------------------------- |
| **ECMA Script** | 构成了JS核心的语法基础                                         |
| **BOM**         | Browser Object Model 浏览器对象模型，用来操作浏览器上的对象         |
| **DOM**         | Document Object Model 文档对象模型，用来操作网页中的元素（标签）    |

ECMA Script

基本语法

`js和html整合: 在html中编写js代码
方式1: 内联式在html页面添加 <script>在标签体中编写js代码</script>
方式2: 外联式1.编写外部的js文件*.js2.在使用的html页面引入<script src="外部js文件的位置"></script>注意事项:  1.一个页面中可以同时出现多个 script 标签2.script标签可以写在页面的任何位置(注意正确嵌套)3.script标签一旦引入了外部的js文件,那么标签体失效4.js的加载顺序,从上到下,从左到右<script>// 警告框alert("hello js!");
</script>
<script src="../js/first.js">/* 此代码无效 */alert("hello 啊...");
</script>`变量声明:
var 变量名称 = 初始值;
let 变量名称 = 初始值;
const 常量名称 = 值;   // 常量: 只能赋值一次,初始化时赋值注意：1.在js中关键字typeof可以查看某个变量的具体数据类型，使用格式：typeof 变量名`数据类型：5种基本数据类型和1种引用数据类型
数字类型：number       包含了小数和整数
布尔类型：boolean       只有两个值： true（真）| false（假）
字符串类型：String       包含字符和字符串，既可以使用双引号又可以使用单引号
未定义类型：undefined   只有一个值，即 undefined未定义
空类型：null             只有一个值 null，表示空对象补充:值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。
alert(null == undefined);  输出 "true"，尽管这两个值相等，但它们的含义不同。2、引用数据类型(复合数据类型)
object : 对象`运算符：
1、赋值运算符：等号(=), 举例： var x = 5。
2、比较运算符： >  <  >= <=   ==  !=   ===  !==
注意：1. === 和 == 区别1）=== 比较数据类型，然后比较数值2）== 比较数值，不考虑数据类型2.!== 和 != 的区别1）!== 是 === 的取反2）!= 是  == 的取反3、逻辑运算符：  &&  ||   ！
&&  并且，双与：只有运算符两侧都为true，结果才是true； 一假即假。
||  或者，双或：只要运算符两侧有一个是true，结果就是true；一真即真。
!   取反： !true = false;  !false=true;注意：1. 在js中，不光boolean值能够参与逻辑运算。所有的值都能参与逻辑运算2. 数字0， 空字符串‘’或者"", false,  空null,  undefined,  NaN3. NaN:  Not a Number 不是一个数字例如： 1 -‘abc’ -> 表示1减去字符’abc’--》不属于一个数字--》NaN4、算数运算符： +  -  *  /  %
注意： + 号比较特殊 因为除了可以进行算数运算，还可以进行字符串的拼接。这点和java是一样的。5、三元运算符：  条件表达式1 ? 条件表达式2 : 条件表达式3; `JS流程控制
js也存在if、if-else、switch、for、while、do-while等逻辑语句，与java使用方式一致`var声明变量全局作用域、let声明变量是局部作用域`Js函数
一、普通函数
js中，通过**function**关键字来定义函数
格式
function 函数名(参数列表) {//形参类型不需要书写，直接书写变量名即可js逻辑代码
}1、 函数需要被调用才能执行。
2、 js中，如果函数需要返回值我们直接return就行了。
定义函数的时候不需要声明返回值的类型，因为js是弱数据类型，返回什么数据类型都是let。
3、 在js中，如果我们需要给函数传递参数，那么我们直接写变量名就行，不需要声明传入变量的类型。
4、 在js中，不存在函数重载的概念，如果2个函数名相同，后面出现的函数会覆盖前面的函数。1、 如果函数的声明带有参数，但是调用时不带参数，函数也可以正常被调用。
2、 如果函数声明时没有参数列表，调用的时候传入参数，函数也能照样执行。
3、 在JS中,可以使用arguments来获取实际传入的参数。arguments是实参的参数数组。二、匿名函数
function(参数列表){js逻辑代码
}
**第一种：** 将匿名函数赋值给一个变量，使用变量调用函数。
let fn = function(参数列表) {js逻辑代码
}；
**第二种：** 匿名函数直接作为另一个函数的实际参数传递。
//调用函数，第二个参数是匿名函数
function fn(x,y){//输出x和yconsole.log('x='+x); //x=100console.log('y='+y); //y=function(){console.log(5);}//调用匿名函数y();
}
fn(100,function(){console.log(5);
}); `定时器setInterval
var timer = window.setInterval(code, millisec)
按照指定的周期（间隔）来执行函数或代码片段。参数1： code 必须写。  执行的函数名或执行的代码字符串。 参数2： millisec 必须写。时间间隔，单位：毫秒。window可以理解为浏览器窗口。后面会讲解。
timer 返回值：一个可以传递给 window.clearInterval(定时器的返回值) 从而取消对 code 的周期性执行的值。
在关闭定时器时需要使用定时器的返回值作为参数，否则不知道关闭哪个定时器。
例如：
方式：函数名 ， setInterval(show, 1000);   show 表示函数名，1000表示每隔1000毫秒执行这个函数。`定时器：setTimeout
setTimeout() 在指定的毫秒数后调用函数或执行代码片段。
和setInterval()不同的是setTimeout()
只是执行一次，而setInterval()每隔指定的时间就会执行，
如果不停止计时器就会一直执行代码片段。
window.setTimeout(code,millisec)
参数：
code  必需。要调用的函数。
millisec 必需。在执行代码前需等待的毫秒数。`JavaScript样式获取或修改
obj.style.样式名        获得指定“样式”的值。样式名包括标签的宽、高、背景颜色等。
obj.style.样式名= 样式值  给指定“样式”设置样式。注意：如果属性有多个单词使用“-”连接，样式名书写的时候需要将“-”删除，并将后一个单词首字母大写。例如：background-color 需要改成 backgroundColor

JS对象

`数组Array
let arr = [18];
new Array();  创建空数组
new Array(3);   创建包含指定个数的数组
new Array(ele1,ele2...);  创建包含指定元素的数组
## 特征
- 数组长度可变
- 数组中可以存放任何类型的值
## 常用属性
- length   长度
## 常用方法
- join("分隔符");  按指定的分隔符分割
- sort();  操作数组结构  对数组进行排序
- reverse();  颠倒数组中元素的顺序
- concat();连接两个或更多的数组，并返回结果sort()
对于排序函数sort如果操作的数组存储的是字符串，那么就是无参的。按照编码值升序排序。
对于排序函数sort如果操作的数组存储的是数值，那么就是有参的。按照大小排序。对数组进行排序，不带参数是按照编码值进行排序。如果不是按照编码值排序,那么必须指定比较器。
说明：由于字符串都是按照编码值比较大小的，也可以将这个方法这样理解使用：
如果要对数字进行排序，必须指定比较器。如果是按字符串进行排序，那么就是无参。
// 定义数组
let a1=['kaja','aha','abclaja','0aa','abcde','ahd','AKAJA'];
// 使用数组对象中的函数对上述数组进行排序
a1.sort();  // 默认是大小升序，按照编码值升序排序
// 排序后：["0aa", "AKAJA", "abcde", "abclaja", "aha", "ahd", "kaja"] let a2=[10,108,2,9,99,34,345,200];
function(o1,o2){升序：o1 - o2降序：o2 - o1
}
a2.sort(function (o1,o2) {return o2 - o1;
});
最后结果：
[345, 200, 108, 99, 34, 10, 9, 2] 数值大小降序`RegExp正则对象
a.编写正则表达式var reg = new RegExp(正则表达式, 匹配模式);var reg = /正则表达式/匹配模式匹配模式i: 忽略大小写g: 全局匹配(模糊匹配)[] : 可选的值有哪些{} : 可选值出现的位数* : 0到多次? : 0次或1次+ : 1次到多次^ : 以什么开头$ : 以什么结尾b.校验正则表达式.test("被校验的字符串");  返回boolean值let result = reg.test(字符串);`Date对象
- toLocaleString();  ★★★    根据本地时间格式，把 Date 对象转换为字符串。
- getFullYear(); 从 Date 对象以四位数字返回年份。
- getMonth();  从 Date 对象返回月份 (0 ~ 11)。
- getDate(); 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
- getHours() ; 返回 Date 对象的小时 (0 ~ 23)。
- getMinutes(); 返回 Date 对象的分钟 (0 ~ 59)。
- getSeconds() ;返回 Date 对象的秒数 (0 ~ 59)。
- getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
- getTime()  ★★★返回 1970 年 1 月 1 日至今的毫秒数。类似于Java中的System.currentTimeMillis()`全局对象
- parseInt(要转换的对象);  尝试 转换为Int类型     "9.9超市"
- parseFloat(要转换的对象);  尝试转换为float类型
- String(要转换的对象); 强制转换为String类型
- Number(要转换的对象); 强制转换为number类型
- Boolean(要转换的对象)); 强制转换为Boolean类型
- encodeURI();    编码
- decodeURI();   解码
- isNaN();
- eval();  将字符串转换成js可以执行的代码
let str = "alert('hello 美女')";`String对象
1.双引号
2.构造方法 了解 let s1=new String("abc");
3.单引号 推荐  let s2='def';
4.反单引号：let s3 = `efg`;
注意：使用反单引号主要目的为了方便字符串的拼接，省去了字符串+拼接的麻烦
let s3 = `efg`;
`${s3}你好` 结果是  efg你好
${变量}这种写法只能书写在反单引号中，${变量}大括号中的变量不一定是反单引号定义的，可以是单引号定义的

BOM浏览器对象模型

BOM对象：Browser Object Model 浏览器对象模型。把整个浏览器当做一个对象来处理。Window对象：表示浏览器整个窗口。就是上述空白的地方，不包括工具栏和地址栏。
History对象：表示浏览器中的向后和向前的左右箭头。
Location对象：表示浏览器中的地址栏。
Navigator (了解)存放有关浏览器的信息
Screen(了解)存放客户端显示屏幕的信息
**补充：**
所有JavaScript全局对象、函数以及变量均自动成为window对象的成员。就是都可以使用window对象来调用，例如上述history和location对象都可以使用window对象来调用。
举例：window.history   、 window.location` Window对象（掌握）
1、方法：定时器
setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()取消由 setInterval() 设置的定时器。
setTimeout()在指定的毫秒数后调用函数或计算表达式。2、方法：消息框1）提示框：alert(提示信息);2）确认框：confirm(提示信息);方法返回值：确定返回true取消返回false3）输入框：prompt(提示信息, 默认值);方法返回值：点击确定：输入框的内容点击取消：null`Lation对象(理解)
| **属性**  | **对应的值**                                                 |
| --------- | ------------------------------------------------------------ |
| hash:     | #abc                                                         |
| host:     | 127.0.0.1:8020                                               |
| hostname: | 127.0.0.1                                                    |
| **href:** | http://127.0.0.1:8020/day03/定时弹广告/05.location.html?__hbt=1503844483351#abc |
| pathname: | /day03/定时弹广告/05.location.html                           |
| port:     | 8020                                                         |
| protocol: | http:                                                        |
| search:   | ?__hbt=150384448335                                          |
例如：location的href值来实现窗口的跳转。就是在页面加载的时候直接访问http://www.baidu.com**
<script type="text/javascript">/** 需求：设置location的href值来实现窗口的跳转。* 就是在页面加载的时候直接访问http://www.baidu.com*/window.location.href="http://www.baidu.com";//          alert(window.location.href);
</script>`History对象（理解）
window.history用来访问浏览器历史浏览记录。
例如：
<script type="text/javascript">//点击按钮跳转到b页面 前进function toPageB(){//    window.history.forward();window.history.go(1);}
</script><script type="text/javascript">//后退function toPageA(){//window.history.back();window.history.go(-1);}//前进function toPageC(){//window.history.forward();window.history.go(1);}
</script>1. 清除计时器的方法: clearInterval(计时器)
2. 让元素不可用的属性是：disabled=true/false
3. toLocaleString() 据本地时间格式，把 Date 对象转换为字符串。

DOM文档对象模型

DOM:document object model 文档对象模型。
用来操作html页面中所有html标签的。在使用dom操作html标签之前，浏览器会将html页面中的标签加载到内存中形成一个dom树，上面最大的对象时document。我们可以通过document调用属性或者函数获取html标签。

`标签属性和文本的操作
| **属性名**                                | **描述**
| **element.getAttribute(属性的名称);   | 根据标签的属性的名字来获取属性的值
| element.setAttribute(属性的名称, 值); | 给标签设置一个属性
| element.removeAttribute(属性的名称);  | 根据标签的属性的名字来删除属性
| element.children;                   | 获取当前元素（标签）的子元素注意：获取的子级（一层），不管嵌套(不包括孙子，只包括儿子) |
| element.nodeName/tagName;             | 获取标签名 注意：获取的是大写的字符串的标签名
| element.innerHTML;                  | 获取当前元素（标签）的文本内容 <div>哈哈<div>

`获取标签(元素)
document.getElementById(id名称);               通过元素（标签）的id属性值获取标签对象，返回的是**单个的标签对象**注意：只能从document下面去获取
document.getElementsByName(name属性名称);       通过元素（标签）的name属性值获取标签对象，返回的是标签对象的**数组**。注意：只能从document下面去获取
document/parentNode.getElementsByTagName(标签名);  通过元素（标签）的名称获取标签的对象,返回的是标签对象的**数组**。注意：可以从document或者某一个父级标签下面去document/parentNode.getElementsByClassName(类名);  通过元素（标签）的class属性获取标签对象，返回的是标签对象的**数组**。注意：可以从document或者某一个父级标签下面去获取1.根据标签id属性值获取标签对象：
~~~js
document.getElementById(id名称);
~~~
2.根据标签名获取标签的数组：
~~~jslet arrDivs = document.getElementsByTagName('标签名');
~~~
3.根据name属性值获取标签的数组：
~~~js
document.getElementsByName('name属性值')
~~~
4.根据class属性值获取的数组：
~~~js
let arrReds = document.getElementsByClassName('class属性值');
~~~

`新增元素
document.createElement(元素名称); 在页面上根据标签名来创建元素，返回创建的标签（元素）对象注意：只能从document下面去创建元素<li></li>parentNode.appendChild(要添加的元素对象); 在某一个父级元素（标签)下面去添加一个元素，每次添加到父级元素的**最后面**，相当于一个追加的操作parentNode.insertBefore(要添加的元素对象，在谁的前面添加); 在某一个父级元素（标签)下面去添加一个元素，可以指定在哪一个子元素（标签）的前面添加1.创建标签：
~~~js
document.createElement('标签名')
~~~
2.添加父标签的最后一个孩子位置：
~~~js
父标签对象.appendChild(子标签对象)
~~~
3.向父标签的指定位置添加：
~~~js
父标签对象.inertBefore(要添加的子标签对象,添加到哪个子标签前面的对象)
~~~

`删除元素
element.remove();                       删除当前的元素（标签）
parentNode.removeChild(要删除的子元素);   通过父级元素（标签）删除子元素（标签）

事件

`HTML 事件可以是浏览器行为，也可以是用户行为。
如果是浏览器行为例如是页面加载完成事件。
如果是用户行为就是用户的一切操作都是发生的事件，
鼠标操作事件(单击，双击，悬浮等)，键盘操作事件(键盘录入等)。`事件和事件源绑定绑定事件:<xxx 事件名="函数名()"></xxx>派发事件: 注意页面的加载顺序1.获取事件源标签对象let 标签对象 = document.getElementById("id标记");2.派发事件标签对象.事件名 = function(){ js代码 }`常见事件
单击事件: onclick
表单提交事件: onsubmit
页面加载成功事件: onload
焦点事件:
获取焦点: onfocus
失去焦点: onblur表单事件(了解)
ondblclick      双击事件
onreset         重置
onchange;       改变(熟练使用)
鼠标事件:(了解)
onmouseover     悬停
onmouseout      移出
onmousedown     按下
onmouseup       弹起
onmousemove     移动
键盘事件:(了解)
onkeydown       按下
onkeyup         弹起
onkeypress      按住`html标签绑定事件
标签绑定事件：就是让上述的js事件作用在某个标签上`静态绑定
将事件名作为html标签的属性名，在属性值中调用js函数。
<标签名 事件名="调用的js函数" 事件名="调用的js函数"....></标签名>
<div onclick="fn1(this);" onmouseover="fn2(this);" onmouseout="fn3(this);">div1</div>`动态绑定
根据dom技术获取某个标签对象，使用标签对象调用事件名，然后将匿名函数赋值事件名。标签对象.事件名 = function(){ js代码}`代码演示
1）静态绑定：将事件名作为标签的属性名，在属性值中调用js函数
~~~html
<div onclick="fn(this);">柳岩</div>
<script type="text/javascript">// 1、给div标签绑定单击事件,输出div的文本function fn(obj) {//obj=thisconsole.log(obj.innerHTML);}
</script>
~~~
2)动态绑定：使用标签对象调用js事件，使用匿名函数给其赋值
~~~js
let oDiv = document.getElementsByTagName('div')[0];//给上述div动态绑定js单击事件oDiv.onclick = function () {//this表示调用当前事件onclick的标签对象oDiv// console.log(oDiv.innerHTML);console.log(this.innerHTML);};
~~~`静态绑定和动态绑定区别
静态绑定缺点：js和html标签耦合在一起
动态绑定：解耦合。

案例：

案例1-注册表单校验

【1】鼠标离开输入框的事件，离焦事件onblur

【2】点击提交按钮执行的提交事件onsubmit。

补充：

1.对于onsubmit事件表示表单提交就执行的事件，如果阻止表单提交，那么该事件绑定的函数返回false，如果提交表单，那么该事件绑定的函数返回true，默认返回的是true。

2.在js中阻止事件都是返回false，不阻止返回true，默认是true。

需求分析:当点击"表单提交"按钮时,对表单中的数据进行校验,如果用户输入的数据满足我们想要的格式,则表单可以提交,反之不允许提交.技术分析:事件: onsubmitdom: 获取标签对象,并获取属性的值正则: /^[a-zA-Z_$][0-9a-zA-Z_$]{5,11}$/
步骤分析:1.确定事件给表单绑定表单提交事件<form action="#" onsubmit="return checkForm()"></form>2.编写事件调用的函数function checkForm(){let flag = true;//1.获取用户名和密码的值let username = document.getElementById("usernameId").value;let password = document.getElementById("passwordId").value;//2.编写正则表达式let zz = /^[a-zA-Z_$][0-9a-zA-Z_$]{5,11}$/;//3.校验if(zz.test(username)){// 满足格式,显示成功的提示信息document.getElementById("usernameMsg").innerHTML='<font color='green'>✔</font>';}else{// 不满足格式,显示失败的提示信息document.getElementById("usernameMsg").innerHTML='<font color='red'>✖输入不合法</font>';// 关闭开关flag = false;}if(zz.test(password)){// 满足格式,显示成功的提示信息document.getElementById("passwordMsg").innerHTML='<font color='green'>✔</font>';}else{// 不满足格式,显示失败的提示信息document.getElementById("passwordMsg").innerHTML='<font color='red'>✖输入不合法</font>';// 关闭开关flag = false;}return flag;}

示例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function checkForm(){let flag = true;//1.获取用户名和密码的值let username = document.getElementById("username").value;let password = document.getElementById("password").value;//alert(username+" : "+password);//2.编写正则表达式let zz = /^[a-zA-Z_$][0-9a-zA-Z_$]{5,11}$/;//3.校验if(zz.test(username)){// 满足格式,显示成功的提示信息document.getElementById("usernameMsg").innerHTML='<font color="green">✔</font>';}else{// 不满足格式,显示失败的提示信息document.getElementById("usernameMsg").innerHTML='<font color="red">✖输入不合法</font>';// 关闭开关flag = false;}if(zz.test(password)){// 满足格式,显示成功的提示信息document.getElementById("passwordMsg").innerHTML='<font color="green">✔</font>';}else{// 不满足格式,显示失败的提示信息document.getElementById("passwordMsg").innerHTML='<font color="red">✖输入不合法</font>';// 关闭开关flag = false;}return flag;}</script>
</head>
<body><!-- 给表单绑定表单提交事件 --><form action="#" onsubmit="return checkForm()">用户名: <input type="text" name="username" id="username" value="tom"/><span id="usernameMsg"></span><br>密码: <input type="password" name="password" id="password" value="123"/><span id="passwordMsg"></span><br><input type="submit" value="提交"></form>
</body>
</html>

案例2-5秒后跳转到百度官网

需求分析:当页面加载成功5秒后,跳转到黑马官网
技术分析:事件: 页面加载事件定时器: setTimeout(函数,5000);location.href = "路径";
步骤分析:1.确定事件onload = function(){// 设置单次执行定时器setTimeout(jumpFun,5000);}2.编写jumpFun函数function jumpFun(){// 跳转到黑马官网location.href="路径";}

示例代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>let interId;onload = function(){// 设置单次执行定时器//setTimeout(jumpFun,5000);interId = setInterval(jumpFun,1000);}let count = 5;function jumpFun() {count--;if(count==0){location.href = "http://www.itheima.com";clearInterval(interId);}else{document.getElementById("spId").innerText = count;}}</script>
</head>
<body><h1>支付成功,<span id="spId">5</span>秒后跳转到黑马官网</h1>
</body>
</html>

案例3-全选和全不选和反选

需求分析:当点击"全选/全不选"复选框时,让其他复选框的状态与之保持一致.
技术分析:事件: 单击 onclick操作属性:checked
步骤分析:1.确定事件给"全选/全不选"复选框绑定单击事件<input id="all" type="checkbox" onclick="checkAll()" />2.编写checkAll函数function checkAll(){//1.获取"全选/全不选"复选框的状态  checkedlet flag = document.getElementById("all").checked;//2.获取其他复选框对象,并设置checked属性}

示例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function checkAll(obj) {//1.获取"全选/全不选"复选框的状态  checked//let flag = document.getElementById("all").checked;let flag = obj.checked;//alert(flag);//2.获取其他复选框对象,并设置checked属性let itemObjArr = document.getElementsByName("item");for (let i = 0; i < itemObjArr.length; i++) {itemObjArr[i].checked = flag;}}function reverseSelect() {let itemObjArr = document.getElementsByName("item");for (let i = 0; i < itemObjArr.length; i++) {itemObjArr[i].checked = !itemObjArr[i].checked;}}</script>
</head>
<body><h3>商品价格列表</h3><input type="checkbox" name="item" value="1500" /> 山地自行车1500<br /><input type="checkbox" name="item" value="200"  /> 时尚女装200<br /><input type="checkbox" name="item" value="3000"  /> 笔记本电脑3000元<br /><input type="checkbox" name="item" value="800"  /> 情侣手表800<br /><input type="checkbox" name="item" value="2000"  /> 桑塔纳2000<br /><hr/><!-- TODO:1.确定事件 给"全选/全不选"复选框绑定单击事件this: 写在哪个标签上就代表那个标签对象--><input type="checkbox" id="all" onclick="checkAll(this)"  />全选/全不选 &nbsp;<input type="button" id="reverse" onclick="reverseSelect()"  value=" 反 选 "/>&nbsp;
</body>
</html>

案例4-省市二级联动

需求分析:当省份的下拉选改变时,根据选中的省份,查询对应的市,将查询到的市动态的展示到市的下拉选中.
技术分析:事件: onchange操作标签体: innerHTML
步骤分析:1.确定事件给省份下拉选添加改变事件<select name="pro" onchange="changePro(this)"></select>2.编写changePro函数function changePro(obj){//1.获取value属性的值let val = obj.value;//2.从二维数组中查找对应的市数组let cityArr = arr[val];//3.遍历市数组,将每一个市拼成option,追加到市的下拉选中let cityStr = '';for(let i=0;i<cityArr.length;i++){cityStr+='<option>'+cityArr[i]+'</option>'}// 获取市的下拉选对象,并设置标签体内容document.getElementById("city").innerHTML=cityStr;}

示例代码1

准备Json文件

var china = [{"p_name": "吉林省","p_id": "jl","cities": [{"c_name": "长春","c_id": "cc"},{"c_name": "四平","c_id": "sp"},{"c_name": "通化","c_id": "th"},{"c_name": "松原","c_id": "sy"}]},{"p_name": "辽宁省","p_id": "ln","cities": [{"c_name": "沈阳","c_id": "sy"},{"c_name": "大连","c_id": "dl"},{"c_name": "抚顺","c_id": "fs"},{"c_name": "铁岭","c_id": "tl"}]},{"p_name": "山东省","p_id": "sd","cities": [{"c_name": "济南","c_id": "jn"},{"c_name": "青岛","c_id": "qd"},{"c_name": "威海","c_id": "wh"},{"c_name": "烟台","c_id": "yt"}]},{"p_name": "上海市","p_id": "sh","cities": [{"c_name": "闵行区","c_id": "mh"},{"c_name": "徐汇区","c_id": "xh"},{"c_name": "黄浦区","c_id": "hp"},{"c_name": "浦东新区","c_id": "pd"}]}
];

代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title><script>// 定义二维数组:var arr = new Array(4);arr[0] = new Array("哈尔滨","齐齐哈尔","大庆","佳木斯");arr[1] = new Array("长春市","吉林市","四平市","通化市");arr[2] = new Array("沈阳市","锦州市","大连市","铁岭市");arr[3] = new Array("郑州市","洛阳市","安阳市","南阳市");</script><script>function changePro(obj){//1.获取value属性的值let val = obj.value;//alert(val);//2.从二维数组中查找对应的市数组let cityArr = arr[val];//3.遍历市数组,将每一个市拼成option,追加到市的下拉选中let cityStr = '<option>==请选择==</option>';for(let i=0;i<cityArr.length;i++){cityStr+='<option>'+cityArr[i]+'</option>'}// 获取市的下拉选对象,并设置标签体内容document.getElementById("city").innerHTML=cityStr;}</script>
</head>
<body>
<form action="#" method="get">籍贯:<select name="pro" onchange="changePro(this)"><option>请选择</option><option value="0">黑龙江</option><option value="1">吉林</option><option value="2">辽宁</option><option value="3">河南</option></select> 省<select id="city"><option >-请选择-</option></select> 市
</form>
</body>
</html>

示例代码2

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Area</title>
</head>
<body>
省份：
<select id="province"><option value="">---请选择---</option>
</select>
市区：
<select id="city"><option value="">---请选择---</option>
</select><script type="text/javascript" src="../js/cities.js"></script>
<script type="text/javascript">let oPros = document.getElementById('province');let proValue = oPros.value;for (let i = 0; i < china.length; i++) {proValue = china[i].p_name;let pId = china[i].p_id// alert(oProValue);let option = new Option(proValue,pId);oPros.appendChild(option);}let oCity = document.getElementById('city');oPros.onchange = function () {oCity.options.length = 1;let htmlPid = this.value;for (let i = 0; i < china.length; i++) {let oProChina = china[i];let pId = oProChina.p_id;if(pId === htmlPid){let arrCities = oProChina.cities;console.log(arrCities)for (let j = 0; j < arrCities.length; j++) {let city = arrCities[j];let cName = city.c_name;let cId = city.c_id;let option = new Option(cName,cId);oCity.appendChild(option);}}}}
</script>
</body>
</html>

案例5-表格隔行换色

需求分析:当页面加载成功后,给表格的奇数行和偶数行分别添加不同的背景颜色,表头除外.
技术分析:事件: onloaddom: 获取所有的行操作css样式:
步骤分析:1.确定事件onload = function(){//2.获取所有的行let trObjArr = document.getElementsByTagName("tr");//遍历for(let i=1;i<trObjArr.length;i++){if(i%2==0){trObjArr[i].style.backgroundColor="red";}else{trObjArr[i].style.backgroundColor="green";}}}

示例代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title><script>onload = function(){//2.获取所有的行let trObjArr = document.getElementsByTagName("tr");//遍历for(let i=1;i<trObjArr.length;i++){if(i%2==0){trObjArr[i].style.backgroundColor="pink";}else{trObjArr[i].style.backgroundColor="yellow";}}}</script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center" ><tr style="background-color: #999999;"><th>分类ID</th><th>分类名称</th><th>分类描述</th><th>操作</th></tr><tr><td>1</td><td>手机数码</td><td>手机数码类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td>2</td><td>电脑办公</td><td>电脑办公类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td>3</td><td>鞋靴箱包</td><td>鞋靴箱包类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td>4</td><td>家居饰品</td><td>家居饰品类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr>
</table>
</body>
</html>

案例6-轮播图

1、为页面设置加载事件onload

2、给轮播图的图片设置一个id

3、根据id来获取到轮播图的图片

4、开启定时器，2000毫秒重新设置图片的src属性

需求分析:当页面加载成功后,设置一个周期执行定时器,每隔2秒钟切换一张图片,实现轮播效果
技术分析:事件: onload定时器: setInterval(changeImg,2000);dom操作: 改变图片的路径
步骤分析://1.确定事件onload=function(){// 设置周期执行定时器setInterval(changeImg,2000);}//2.编写changeImg函数let i = 0;function changeImg(){i++;//获取图片标签,并修改路径let imgObj = document.getElementById("imgId");imgObj.src = "../img/"+i+".jpg";if(i==4){i = -1;}}

示例代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">body {background-color: black;}.container {/*居中*/margin: auto;border: 1px solid black;width: 850px;}img {width: 850px;}</style><script>//1.确定事件onload=function(){// 设置周期执行定时器setInterval(changeImg,2000);}//2.编写changeImg函数let i = 0;function changeImg(){i++;//获取图片标签,并修改路径let imgObj = document.getElementById("imgId");imgObj.src = "../img/"+i+".jpg";if(i==4){i = -1;}}</script></head><body><div class="container"><img src="../img/0.jpg" id="imgId"></div></body>
</html>

案例7-定时弹广告

分析：

对于广告图片，刚开始是隐藏的，过3秒是显示，再过3秒隐藏。

window.setTimeout(code,millisec)
参数：
code 必需。要调用的函数。
millisec 必需。在执行代码前需等待的毫秒数。
注意：
该定时器只执行一次

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>定时弹出广告</title>
</head>
<body>
<!--
对于广告图片，刚开始是隐藏的，过3秒是显示，再过3秒隐藏。
window.setTimeout(code,millisec)
参数：
code  必需。要调用的函数。
millisec 必需。在执行代码前需等待的毫秒数。
注意：
该定时器只执行一次
-->
<div align="center"><div style="color: darkgreen; font-size: 50px">王者荣耀皮肤</div><div><img src="./img/0.jpg" id="imgId" width="500px" height="300px" ></div><div align="left" id="txtAdvert" style="display: none"><div style="color: red; font-size: 2px">惊喜!还有这种优惠！</div><div><img src="img/index.jpg" id="advertId" width="100px" height="100px" ></div></div>
</div><script type="text/javascript">let oImg = document.getElementById('imgId');let i = 1window.setInterval(function () {oImg.src = "img/"+i+".jpg";if(i === 4 ){i = 0;}i++;},3000);let oTxtAdvert = document.getElementById('txtAdvert');window.setInterval(function () {setTimeout(function () {oTxtAdvert.style.display = 'block';},3000);},6000);</script>
</body>
</html>

案例8-会跳动的时钟

1.在页面上创建一个h1标签，用于显示时钟，设置颜色和大小。
2.一开始暂停按钮不可用，设置disabled属性，disabled=true表示不可用。
3.创建全局的变量，用于保存计时器
4.为了防止多次点开始按钮出现bug，点开始按钮以后开始按钮不可用，暂停按钮可用。点暂停按钮以后，暂停按钮不可用，开始按钮可用。设置disabled=true。
5.点开始按钮，在方法内部每过1秒中调用匿名函数，在匿名函数内部得到现在的时间，并将得到的时间显示在h1标签内部。
6.暂停的按钮在方法内部清除clearInterval()的计时器。

<body><div align="center"><h3 style="color: darkgreen; font-size: 100px" >北京时间</h3><h2 style="color: darkgreen; font-size: 50px" id="timeTxt"></h2><input type="button" value="开始" id="start" disabled="disabled">&nbsp;&nbsp;<input type="button" value="暂停" id="pause" >
</div><script type="text/javascript">let oStart = document.getElementById('start');let oPause = document.getElementById('pause');let oTimeTxt = document.getElementById('timeTxt');let clockTimer// alert(oStart.innerHTML)// alert(oStart)oStart.disabled = false;oStart.onclick = function () {oStart.disabled = true;oPause.disabled = false;clockTimer = window.setInterval(function () {let date = new Date();oTimeTxt.innerHTML = date.toLocaleString();}, 1000);}oPause.onclick = function () {oPause.disabled = true;oStart.disabled = false;clearInterval(clockTimer);}</script></body>