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.举例:
        <     &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】文档声明: 
		【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>

你可能感兴趣的:(Web,css,javascript)