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.coma> 超链接
3) 如果没有结束标签，建议以/结尾。叫做单标签。例如：<img src="" width="" height="" />
img： 称为标签名
5、 HTML结构包括两部分：头head和体body。
HTML属性特点：
1、 HTML属性一般都出现在HTML标签中, 是HTML标签的一部分。
2、 标签可以有属性,它包含了额外的信息.属性的值一定要在双引号中。
3、 标签可以拥有多个属性。
4、 一般属性由属性名和属性值成对组成的。
例如：
<img src="images/baby.jpg" width="80" height="50"/>
第一部分
`标题标签 h
1.在html中，标题标签使用hn表示，n的取值范围是1-6，标题字体依次变小
2.标题标签特点：
1）单独占一行，在html中只要单独占一行的标签称为块级标签
2）标题标签是加粗的
`水平线 hr
1.水平线标签使用 hr
2.水平线标签属于单标签
3.hr水平线标签的属性：
1）size:表示水平线的大小即高度
2）noshade="noshade" :表示没有阴影，即实心，默认是空心的
`字体标签 font
1 在html中字体标签使用 font表示
2 在html5后，字体标签font过时了，但是所有的浏览器依然识别
3 font字体标签常见的属性：
1）color:表示字体颜色.color属性值取值可以有两种写法：
a:直接书写英文单词
b:可以使用十六进制方式来表示，
表示格式：#RGB, r :红色 g : 绿色 b: 蓝色 建议
然后每种颜色使用两个数字表示。
举例：红色： #ff 00 00
R G B
蓝色：#00 00 ff
绿色：#00 ff 00
2)size:表示字体大小：取值1-7，超过最大按照7显示，
小于1，按照1显示.默认大小是3px
3)face:表示字体样式。宋体 楷体等
`格式化标签:
1.加粗标签：b
2.倾斜标签: i
`段落和换行标签：
1.段落标签：p.每个文字段落之间都会有留白(空白)，单独占一行，属于块级标签 双标签
2.换行标签：br 每段文字可以实现换行，每一行之间没有留白 单标签
`特殊字符实体标签：
1.在html中所有的特殊字符实体标签的格式：
&开始，;结尾
2.举例：
< < less than
> > greater than
空格
版权符号：© © 2003-现在 Taobao.com 版权所有
人民币符号：¥
`显示图片的标签img
属性：
1.src:表示引入的图片的服务器地址
1)src="../img/美女.jpg" : ..表示当前页面demo01.html的父目录：c_img_03
2)然后找到c_img_03的同级目录：img
3)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单元格可横跨的列数(横向合并单元格)column
rowspan单元格可横跨的行数(纵向合并单元格)
align单元格内容的水平对齐方式,取值：left 左 、right 右、center 居中
（了解）表格标签的子标签：
1.整个表格的标题：caption
2.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=1234
get请求缺点：不安全 所有数据都放到url后面，大小有限制 只能传输字符数据
get优点：快 可以作为商品分享
b:post请求的数据不放到请求服务器的地址后面：数据放到请求体中
http://www.baidu.com
post请求缺点：慢
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表示下拉框的选项，有几个选项就书写几个option
2.select标签的属性：
1)name属性：后台可以通过name属性值获取当前下拉框被选中项的value属性值
举例：当前页面被选中的是硕士，那么后台可以根据edu获取硕士的value属性值sh
2)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】运行： 浏览器运行html
4、HTML文件基本结构：
【1】文档声明：
【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】段落标签： p
2、特殊字符：字符实体
空格：
大于： >
小于： <
。。。。。。。。。。。。。。。。
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:yellow
text-align:center
text-indent: 2em
text-decoration: none,underline
【2】文字样式：
font-size:100px
font-family:楷体
font-style:italic
font-weight:bold
【3】背景：
background-color:red
background-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文件
*.js
2.在使用的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, NaN
3. NaN: Not a Number 不是一个数字
例如： 1 -‘abc’ -> 表示1减去字符’abc’--》不属于一个数字--》NaN
4、算数运算符： + - * / %
注意： + 号比较特殊 因为除了可以进行算数运算，还可以进行字符串的拼接。这点和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和y
console.log('x='+x); //x=100
console.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
取消返回false
3）输入框：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.根据标签名获取标签的数组：
~~~js
let 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=this
console.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。
需求分析:
当点击"表单提交"按钮时,对表单中的数据进行校验,如果用户输入的数据满足我们想要的格式,则表单可以提交,反之不允许提交.
技术分析:
事件: onsubmit
dom: 获取标签对象,并获取属性的值
正则: /^[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='✔';
}else{
// 不满足格式,显示失败的提示信息
document.getElementById("usernameMsg").
innerHTML='✖输入不合法';
// 关闭开关
flag = false;
}
if(zz.test(password)){
// 满足格式,显示成功的提示信息
document.getElementById("passwordMsg").
innerHTML='✔';
}else{
// 不满足格式,显示失败的提示信息
document.getElementById("passwordMsg").
innerHTML='✖输入不合法';
// 关闭开关
flag = false;
}
return flag;
}
示例代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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='✔';
}else{
// 不满足格式,显示失败的提示信息
document.getElementById("usernameMsg").
innerHTML='✖输入不合法';
// 关闭开关
flag = false;
}
if(zz.test(password)){
// 满足格式,显示成功的提示信息
document.getElementById("passwordMsg").
innerHTML='✔';
}else{
// 不满足格式,显示失败的提示信息
document.getElementById("passwordMsg").
innerHTML='✖输入不合法';
// 关闭开关
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="路径";
}
示例代码:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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">5span>秒后跳转到黑马官网h1>
body>
html>
案例3-全选和全不选和反选
需求分析:
当点击"全选/全不选"复选框时,让其他复选框的状态与之保持一致.
技术分析:
事件: 单击 onclick
操作属性:
checked
步骤分析:
1.确定事件
给"全选/全不选"复选框绑定单击事件
<input id="all" type="checkbox" onclick="checkAll()" />
2.编写checkAll函数
function checkAll(){
//1.获取"全选/全不选"复选框的状态 checked
let flag = document.getElementById("all").checked;
//2.获取其他复选框对象,并设置checked属性
}
示例代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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/>
<input type="checkbox" id="all" onclick="checkAll(this)" />全选/全不选
<input type="button" id="reverse" onclick="reverseSelect()" value=" 反 选 "/>
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+='+cityArr[i]+''
}
// 获取市的下拉选对象,并设置标签体内容
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"
}
]
}
];
代码
<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 = '';
for(let i=0;i<cityArr.length;i++){
cityStr+='+cityArr[i]+''
}
// 获取市的下拉选对象,并设置标签体内容
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
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Areatitle>
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-表格隔行换色
需求分析:
当页面加载成功后,给表格的奇数行和偶数行分别添加不同的背景颜色,表头除外.
技术分析:
事件: onload
dom: 获取所有的行
操作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";
}
}
}
示例代码
<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>分类IDth>
<th>分类名称th>
<th>分类描述th>
<th>操作th>
tr>
<tr>
<td>1td>
<td>手机数码td>
<td>手机数码类商品td>
<td><a href="">修改a>|<a href="">删除a>td>
tr>
<tr>
<td>2td>
<td>电脑办公td>
<td>电脑办公类商品td>
<td><a href="">修改a>|<a href="">删除a>td>
tr>
<tr>
<td>3td>
<td>鞋靴箱包td>
<td>鞋靴箱包类商品td>
<td><a href="">修改a>|<a href="">删除a>td>
tr>
<tr>
<td>4td>
<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;
}
}
示例代码
<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 必需。在执行代码前需等待的毫秒数。
注意：
该定时器只执行一次
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时弹出广告title>
head>
<body>
<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 = 1
window.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">
<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>