01-HTML+CSS+JS【常用总结+案例练习】-爱代码爱编程

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

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

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

前端知识点 细，碎，多

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="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.举例：
        <     &lt;    less than
        >     &gt;    greater than
        空格   &nbsp;
        版权符号：&copy; © 2003-现在 Taobao.com 版权所有
        人民币符号：&yen;
        
`显示图片的标签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】文档声明： <!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】段落标签： p

	2、特殊字符：字符实体
		空格： &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: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='<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.获取"全选/全不选"复选框的状态  checked
        	let 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-表格隔行换色

需求分析:
	当页面加载成功后,给表格的奇数行和偶数行分别添加不同的背景颜色,表头除外.
技术分析:
	事件: 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";
                }
            }
    	}

示例代码

<!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 = 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">&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>