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.举例: < < less than > > greater than 空格 版权符号:© © 2003-现在 Taobao.com 版权所有 人民币符号:¥ `显示图片的标签img 属性: 1.src:表示引入的图片的服务器地址 1)src="../img/美女.jpg" : ..表示当前页面demo01.html的父目录:c_img_03 2)然后找到c_img_03的同级目录:img 3)img/美女.jpg:找到img下面的美女.jpg 2.alt:如果加载图片失败,显示alt中的属性值内容 3.title:表示鼠标放到图片上的说明 4.width:图片宽度 5.height:图片高度 6.border:图片边框 `无序列表标签ul 说明: 1.无序列表标签ul单独使用没有意义,必须借助于子标签li一起使用 2.ul具有一个常见的属性:type,具有三个属性值 1)disc:默认的,表示实心圆 2)square:表示实心正方形 3) circle:表示空心圆 ul>li*4 按tab键 快速生成无序的四个列表 `有序列表标签ol 说明: 1.有序列表标签ol单独使用没有意义,必须借助于子标签li一起使用 2.ol具有一个常见的属性:type,具有属性值: 1)1:默认的,数字 2)a:小写字母 3)A:大写字母 4)i:罗马数字 5)I:罗马数字 `超链接标签:a 属性: 1.href:要跳转的服务器地址 2.target:以何种方式打开要跳转的新页面: 1)_blank:新的窗口打开 2)_self:覆盖当前页面,属于默认的打开方式 a标签实现空连接:不能跳转 1.<a href="#"> 这种不建议使用 2.javascript:void(0); 表示使用我们后面学习的语言javascript中的空函数void(0) 3.javascript: 建议使用 a标签的锚点连接 例如: <a href="#maodian">找锚点</a> =================================================== =================================================== 。。。。。。省略一万行 ============== <a name="maodian">锚点在这呢</a>======
`表格标签 1)<table>表格标签 border表格边框的宽度 width表格的宽度 height表格的高度 cellpadding单元格边沿与其内容之间的空白 cellspacing单元格之间的空白 bgcolor :background color表格的背景颜色 2) <tr>表格中的行标签 align单元格内容的水平对齐方式,取值:left 左 、right 右、center 居中 3)<td>表格中一行中的列标 colspan单元格可横跨的列数(横向合并单元格)column rowspan单元格可横跨的行数(纵向合并单元格) align单元格内容的水平对齐方式,取值:left 左 、right 右、center 居中 (了解)表格标签的子标签: 1.整个表格的标题:caption 2.tbody:表格体标签,默认就存在的 <table border="1px" cellpadding="0px" cellspacing="0px" width="400px" height="400px"> <!--整个表格的标题:caption--> <caption>联系人</caption> <!--表格体标签--> <tbody> <tr> <th>姓名</th> <!-- 表示跨2列,手机号占第2 3列 --> <th colspan="2">手机号</th> <!--<th>手机号</th>--> </tr> <tr> <td>张三</td> <td>138000000000</td> <td>138000000001</td> </tr> <tr> <td>李四</td> <td>139000000000</td> <td>139000000001</td> </tr> </tbody> </table>
第二部分
`form表单标签 1.单独存在无意义,必须借助于子标签,子标签内容必须书写在form标签文本中,否则后台无法获取到 前端浏览器提交的数据 2.form表单标签常见属性: 1)action="提交数据到服务器的地址" 2)method="前端浏览器提交到后台服务器数据的提交方式" 注意: 1.常见的提交方式有两种:get post 2.如果不书写提交方式,默认是get请求方式,对于post请求方式必须书写post 3.get和post的请求方式区别: a:get请求的数据放到请求服务器的地址后面:例如: http://www.baidu.com?username=zhangsan&password=1234 get请求缺点:不安全 所有数据都放到url后面,大小有限制 只能传输字符数据 get优点:快 可以作为商品分享 b:post请求的数据不放到请求服务器的地址后面:数据放到请求体中 http://www.baidu.com post请求缺点:慢 post请求优点: 1)安全 2)可以传输的数据没有限制 可以传输图片 音频 视频 `input标签: 属性: 1.type属性,常见的属性值: 1)text:input输入标签的文本,默认的 2)password:密码框 加密 2) email:邮件框 3)radio:单选按钮 4)checkbox:复选框(多选) 5)file:表示上传的文件 6) image:上传的图片 了解 7) hidden:隐藏域,不在页面中显示,但是可以使用 8) submit:提交按钮 通过value属性来显示显示的值 9) reset:重置 10)button :提交按钮,后续可以使用js操作 等 2.name属性: 1)使用在单选按钮上,多个单选按钮的name属性值相同,那么就会实现只能选择一个的效果 2)在实际开发中我们必须给input标签书写name属性, 后台服务器就可以通过name属性值获取输入框的value属性值 3.value属性,后台服务器获取的就是value属性对于输入框输入的值就是value属性值 4.checked属性:使用在单选按钮和复选框中,表示默认被选中 使用:checked="checked" 或者在input标签中直接书写checked 5.disabled:使得按钮不能操作,使用在单选按钮和复选框 使用:disabled="disabled" 或者在input标签中直接书写disabled 6.readonly:只读,一般使用在输入框中 7.maxlength:允许输入的最大长度 <input type="image" src="../img/美女.jpg"> 两种方式都可以显示图片 <img src="../img/美女.jpg" alt=""> `select下拉框标签: 1.单独存在没有意义,需要使用子标签:option表示下拉框的选项,有几个选项就书写几个option 2.select标签的属性: 1)name属性:后台可以通过name属性值获取当前下拉框被选中项的value属性值 举例:当前页面被选中的是硕士,那么后台可以根据edu获取硕士的value属性值sh 2)size:下拉框每次显示的选项个数 3)multiple="multiple" 表示下拉框可以展示多个选项 3.子标签option属性: 1)value属性:必须书写,如果不书写,后台获取的就是option的文本值 2) selected="selected" 表示页面一加载下拉框被选中的项 eg: <form action="#" method="get"> <!--<select name="edu" size="2">--> <!--<select name="edu" multiple="multiple">--> <select name="edu"> <option value="">-----------请选择学历-----------</option> <option value="bs">博士</option> <option value="sh">硕士</option> <option value="bk" selected="selected">本科</option> <option value="zk">专科</option> </select> </form> `文本域标签:textarea `按钮标签:button <form action="#"> <!-- 文本域标签:textarea:由行和列组成 --> 自我描述:<br> <textarea rows="10" cols="20"></textarea> <!-- 按钮标签: button常见属性type具有属性值: 1.submit :提交表单 2.button:提交按钮,后续可以使用js操作 3.reset :重置 注意:上述三个属性值显示的内容在标签的文本中指定 --> <button type="submit">登录</button> <button type="button">注册</button> <button type="reset">重置</button> </form> `label标签 【可以实现通过文本选中某个指定的标签】 比较常见的应用场景是单选按钮。 说明: 使用label标签的for属性值引用要定位的标签的id属性值。就是for属性值必须和id属性值一致 eg: <form action="#"> 性别: <input type="radio" name="sex" id="male"><label for="male">男</label> <input type="radio" name="sex" id="female"><label for="female">女</label> </form>
`html5后对于input标签的type新增的属性值 <form action="#"> <!--显示日历年月日--> <input type="date"> <input type="color"> <input type="datetime-local"> <!--邮箱校验--> <input type="email"> <!--只能输入数字--> <input type="number"> <!--表示查找--> <input type="search"> <input type="submit"> </form>
第三部分
div标签:主要结合css技术用来页面的布局,单独使用没有效果,属于块级标签 p标签属于块级标签,具有留白 span标签:单独使用没有意义,和css一起使用,可以设置字体样式,从html5后取代了font. span标签属于行内标签(共处一行的标签:input span a等)
总结
第一章、HTML概述 1、HTML:超文本标签语言 标签语言,超文本(文本,音频,视频....) 2、作用:编写网页 3、HTML文件: 【1】后缀名: .html .htm 【2】书写内容: 普通文本,标签 【3】运行: 浏览器运行html 4、HTML文件基本结构: 【1】文档声明: <!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、特殊字符:字符实体 空格: 大于: > 小于: < 。。。。。。。。。。。。。。。。 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)" />全选/全不选 <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+='<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"> <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>
- JavaScript遍历对象方法总结
- 前端入门之JavaScript基本语法
- JavaScript 异步之美 async / await
- TypeScript实战 -- 贪吃蛇游戏(1)--项目简介与具体实现、实现食物类和计分板类
- HTML+CSS+JS实现十款好看的登录注册界面模板,赶紧收藏起来吧!
- javascript中的闭包closure详解
- 二、开发过程中遇到的js知识点总结(2)
- Dojo初探之1:AMD规范,编写符合AMD规范(异步模块加载机制)的模块化JS(其中dojo采用1.11.2版本)
- 我劝你学一下TypeScript(TypeScipt有这篇就够了)
- JavaScript 中对象解构时指定默认值
- Typescript进阶之路
- 运营商劫持狠起来,连json都改
- 跨域库herryPostMessage.js的一些优化,多iframe跨域
- JS实现苹果计算器
- JavaScript中常用的几种字符串方法汇总(新手必看)
- JS数组降维的几种方法详解
- js实现一个简易的计算器
- JavaScript自定义插件实现tabs切换功能
- JavaScript实现循环轮播图
- JS实现判断对象是否为空对象的5种方法