您的位置:首页 > Web前端 > JavaScript

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

2021-04-25 20:16 1016 查看

文章目录

  • CSS
  • JavaScript
  • BOM浏览器对象模型
  • DOM文档对象模型
  • 案例:

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

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

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

    前端知识点 细,碎,多

    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>
  • 内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
    标签: