文章目录
- 1.标签：input
-
- 1.1 html：HTML（用于创建网页结构），CSS（对页面进行美化），JavaScript（用于与用户交互）
- 1.2 文本标签：字体属性
- 1.3 a标签：anchor(锚) 超链接
- 1.4 列表标签：list (嵌套)
- 1.5 图像标签：img标签
- 1.6 标签分类：div，span
- 1.7 表格标签：快捷键，table(嵌套)，F12
- 1.8 合并单元格：rowspan="2"
- 1.9 实体字符：copy
- 1.10 form表单标签：和列表或表格标签一样不能单独，需嵌套
- 1.11 input标签：type/name/value/checked属性
- 1.12 select和textarea标签：< form >下
- 2.css：选择器
- 3.js：Bom，Dom
-
- 3.1 js两种引入：js最终要引入到html在浏览器中运行
- 3.2 js五大原始类型：undefined
- 3.3 js的运算符和流程控制：js不支持单&和单|性能低
- 3.4 案例_99乘法表：Sources调试
- 3.5 函数的基本语法：function
- 3.6 函数的两种变量和两种定义：全局/局部变量
- 3.7 事件的两种注册：js事件驱动语言
- 3.8 页面加载事件：当浏览器加载完整个html页面时才触发
- 3.9 案例_轮播图：每隔一秒换一张图片
- 3.10 内置对象_数组/日期/字符串解析/url编码：encodeUri编码，decodeUri解码
- 3.11 Bom编程_window对象：编写时可被省略，窗口 (运行环境)
- 3.12 案例_会动的时钟：innerText (开闭标签之间的内容)
- 3.13 Bom编程_location对象：地址栏
- 3.14 Bom编程_history对象：历史记录
- 3.15 Dom编程_查找节点：document.querySelector('video').playbackRate = 3
- 3.16 案例_全选全不选：商品选项勾选状态 和 全选的勾选状态一致
- 3.17 属性_innerText和innerHTML：追加
- 3.18 案例_省市级联：0对应bj数组
- 3.19 Dom编程_js修改css样式：.className
- 3.20 案例_隔行/触摸换色：鼠标移上去时, 当前行改背景色
- 3.21 js中的正则表达式：regular expression (regex) 具有某种特定规律的表达式
- 3.22 案例_表单校验：result = false
1.标签：input
1.1 html：HTML（用于创建网页结构），CSS（对页面进行美化），JavaScript（用于与用户交互）
File-New-Project-Static Web，右击New-HTMLFile。
<!DOCTYPE html>
<!-- 文档声明 : 文档类型html 版本5.0
H5 : html 5.0 : html5.0 + css3.0 + js
Html基础结构
1. 根标签 : 必须名为html
2. head标签 : 头部
元标签: 编码utf-8
title: 网页的标题,显示在标签栏
3. body标签 : 主体
网页主体内容写在这里面
标签分两类
1. 成对标签 : <start> 内容 </end>
2. 单独标签 : <自关闭/>
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
Hello Html
<hr> <!-- 横线 -->
<hr/>
<div>div </div> <!-- 浏览器自动解析加上闭标签 -->
xx
</body>
</html>
1.2 文本标签：字体属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1. h1: headline 内容标题。title：网页标题
编号: 1~6 , 大到小
2. hr : horizontal 水平线
3. font : 字体
1. face : 字体样式
2. color:颜色
3. size : 大小
1~7 小到大
4. b : bold 加粗
5. i : italic 斜体
6. br : break line 换行(间距比较小)
7. p : paragraph 段落也是换行 (间距比较大)
html属性不好用:
1. 不是所有的标签属性都一样
A标签有abc属性 B标签只有c属性
2. 不同的标签的同种属性效果可能不同
A标签的a属性大小 B标签的a属性长度
属性(以hr标签为例):
1. size 大小(高度)
单位 : px (pixel 像素) 1920*1080 fhd
2. color 颜色
1. 单词
2. RGB(red green blue : 光三原色)
每个颜色取值(0~255 -> 16进制 00~ff)
#ff0000
3. width 宽度
1. 固定
2. 百分比 : 默认占浏览器的显示宽度
4. align : 排列
left center right
-->
中文
<font face="楷体">中文</font>
<font face="楷体" color="#a0522d">中文</font>
<font face="楷体" color="#a0522d" size="1">中文1</font>
<font face="楷体" color="#a0522d" size="3">中文3</font>
<font face="楷体" color="#a0522d" size="7">中文7</font>
<b>
<i>
<font face="楷体" color="#a0522d" size="8">中文8</font>
</i>
</b>
</body>
</html>
1.3 a标签：anchor(锚) 超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1. 必要属性: href (hypertext reference 超文本链接)
1. 远程地址: 网址
2. 本地地址: 当前页面所在的网页位置
3. 发邮件(h5): 了解
4. 锚点: 1. 设置锚点: 给网页中的某个标签添加一个属性 id (值唯一性)
2. 跳转: a标签的href = #id值
5. # : 当前网页(测试)
2. target
1. _self : 自己 (默认)
2. _blank : 新的页面
3. title : 鼠标停留在这个标签的提示内容
-->
<h1 id="start"> h1</h1>
<a>百度一下,你就知道</a> <br>
<a href="http://www.baidu.com">百度一下,你就知道</a> <br>
<a href="00_基本语法.html">基本语法</a> <br>
<a href="mailTo:liuyan@163.com?subject=约会&cc=高圆圆">发邮件</a> <br>
<a href="#start">回到h1的位置</a> <br>
<a href="#">当前页面</a> <br>
<hr>
<a href="http://www.baidu.com" >百度一下,你就知道</a> <br>
<a href="http://www.baidu.com" target="_self">百度一下,你就知道</a> <br>
<a href="http://www.baidu.com" target="_blank" title="点击了解更多">百度一下,你就知道</a> <br>
</body>
</html>
1.4 列表标签：list (嵌套)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1. 有序列表（ol li） order list
1. type属性
1. 1 默认使用数字序列
2. a,A 使用字母序列
3. i,I 罗马数字
2. 无序列表（ul li） unordered list
1. type属性
1. disc ● 默认
2. circle ○
3. square ■
-->
<h1>奥运奖牌榜</h1>
<ol type="I">
<li>中国</li>
<li>美国</li>
<li>俄罗斯</li>
</ol>
<h1>优秀男性榜</h1>
<ul type="square">
<li>东哥</li>
<li>坤哥</li>
<li>凡哥</li>
</ul>
</body>
</html>
1.5 图像标签：img标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1. 必要属性src: 图片的地址
a. 本地地址
b. 远程地址
2. alt :图片加载失败的提示
3. width / height：宽/高
原图片: 480*320
特点: 设置单边, 另一边会等比例缩放
4. title : 鼠标放上去有提示
-->
<img src="img/a.jpg" alt="查无此图片" title="呵呵">
<img src="img/b.jpg" alt="查无此图片">
<!-- <img src="https://img.ixiumei.com/uploadfile/2019/0422/20190422095425634.jpg" alt=""> -->
<img src="img/a.jpg" alt="查无此图片" width="160px">
<img src="img/a.jpg" alt="查无此图片" height="320px">
<img src="img/a.jpg" alt="查无此图片" width="320px" height="240px">
</body>
</html>
1.6 标签分类：div，span
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1. 按是否包裹内容
1. 成对标签
2. 单独标签
2. 按是否自动换行
1. 块级标签: block -> 自动换行: h1
div : divide + css
2. 内联标签: inline -> 不会自动换行: a
span + css 取代font标签
-->
<font>font</font> <!--成对-->
<hr> <!--单独-->
<img src="" alt=""> <!--单独-->
<a href="#">嘻嘻</a> <!--成对-->
<hr>
啦啦
<h1>h1</h1>
嘻嘻 <br>
<a href="#">a</a> <br>
呼呼
<hr>
<div>div</div>
<div>div</div>
<span>span</span>
<span>span</span>
</body>
</html>
1.7 表格标签：快捷键，table(嵌套)，F12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1. 子标签
1. tr : table row 行
2. caption : 表格的标题 (正中上)
2. 子子标签
1. td : table data 数据
2. th : table header 数据标题(td的居中加粗)
属性: 1. border : 边界
2. cellspacing : 单元格之间的距离 (默认2px) -> 外间距
3. cellpadding : 单元格边框到内容的距离(默认1px) -> 内间距
4. width : 表格的宽度
渲染的优先级: 属性的绘制是有顺序：先左后右, 先上后下(网页坐标原点: 左上角)
特殊的属性：align : center：1. table : 整个表格居中
2. tr : 整行的内容居中
3. td : 单元格内容居中
-->
<table border="1px" cellspacing="0px" cellpadding="10px" width="500px" >
<caption>学生成绩表</caption>
<tr>
<td align="center"><b>姓名</b></td>
<th>年龄</th>
<th>身高</th>
<th>体重</th>
</tr>
<tr align="center">
<td>张三</td>
<td>18</td>
<td>180</td>
<td>180</td>
</tr>
<tr>
<td align="center">李四</td>
<td>18</td>
<td>180</td>
<td>180</td>
</tr>
</table>
</body>
</html>
1.8 合并单元格：rowspan=“2”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1. 先把所有的单元格都写出来
2. 然后进行合并
1. 跨越: 让其中一格占多个位置, 然后删除多余的单元格
2. 规则: 同行跨列,同列跨行
需求A: 第一行的第一列和第二行的第一列 合并
td标签的属性:
rowspan : 跨行
colspan : 跨列 (column)
需求B: 第一行的第三列和第一行的第四列 合并
-->
<table width="500px" border="1px" cellspacing="0px">
<tr>
<td rowspan="2">11</td>
<td>12</td>
<td colspan="2">13</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table width="500px" border="1px" cellspacing="0px" cellpadding="10px">
<caption>
<h1>学生成绩表</h1>
</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>成绩</th>
</tr>
<tr align="center">
<td>100</td>
<td>zs</td>
<td>male</td>
<td>30</td>
</tr>
<tr>
<td>200</td>
<td></td>
<td></td>
<td rowspan="2">90</td>
</tr>
<tr>
<td>300</td>
<td></td>
<td></td>
</tr>
<tr>
<td>总成绩</td>
<td colspan="3">900</td>
</tr>
</table>
</body>
</html>
1.9 实体字符：copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
&开头 ;结尾
lt : less than <
gt : >
nbsp : 空格
-->
<
>
©版权归百度所有
¥988
< > © ¥ 可以直接写
</body>
</html>
1.10 form表单标签：和列表或表格标签一样不能单独，需嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
子标签: 1. input 输入框
2. select 下拉框
3. textarea 文本域
属性: 1. action: 数据提交的地址
实际: 服务器的地址
现在: # （当前网页）
2. method : 请求方式(http协议)
1. get 默认
2. post
-->
<form action="#" method="get">
用户名: <input type="text" name="username"> <br> <!-- 写name为了点击提交后username=显示在url中 -->
密码: <input type="text" name="password"> <br>
<input type="submit"> <!-- 点击有跳转效果 -->
</form>
</body>
</html>
百度服务器不会理你。
1.11 input标签：type/name/value/checked属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1.input标签的type属性即type = :
1. text : 默认值, 文本
2. password : 密码(输入隐藏)
3. radio : 单选框(像收音机一样按一个按钮，其他按钮弹出来)
4. checkbox: 复选框
5. date : 日期
6. file : 文件
7. submit : 提交
8. image : 还是提交(通过src属性设置背景图片)
9. reset : 重置(恢复初始状态，不是清空)
10. hidden : 隐藏 (用于提交用户不需要知道的内容)
-->
<form action="#">
用户名: <input type="text" value="zs"> <br>
密码: <input type="password"> <br>
性别: <input type="radio"> 男
<input type="radio"> 女 <br>
喜好: <input type="checkbox"> 抽烟
<input type="checkbox"> 喝酒
<input type="checkbox"> 烫头 <br>
生日: <input type="date"> <br>
上传文件: <input type="file"> <br>
<input type="hidden" value="xx"> <!--这一行写了和没写一样-->
<input type="submit">
<input type="image" src="../img/btn.jpg"> <br><br>
<input type="reset">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
2.input标签的name属性即name =
问题1:点击提交, 数据没有提交?
url格式: 协议://ip:port/资源位置?name1=value1&name2=value2(问号后面就是参数)
解决: 记住但凡要提交数据的input标签,name属性必须要写
问题2:单选项如何实现单选效果?
多个input的name属性值相同即可，不相同即两个radio收音机，相同就是一个收音机，可实现单选。
3.input标签的value属性
1. 文本内容 的输入框,用户输入的内容即为value -> value可选手动设置(默认)
2. 非文本内 容的输入框,会有默认value(一般没有意义) -> 必须手动设置value
如勾选上单选框gender=on（默认） url提交没意义，所以要手动设置value="male"
4.input标签的checked属性
radio/checkbox 的默认选中: 如下两种。默认不选中直接不写就行
1. 标准: checked="checked"。以后属性名=属性值都支持标准和畸形写法。
2. 特殊/畸形 : checked
-->
<form action="#">
用户名: <input type="text" name="user" value="zs"> <br>
密码: <input type="password" name="pwd"> <br>
性别: <input type="radio" name="gender" value="male" checked="checked"> 男
<input type="radio" name="gender" value="female"> 女 <br>
喜好: <input type="checkbox" name="hobby" value="smoke" checked="checked"> 抽烟
<input type="checkbox" name="hobby" value="drink" checked> 喝酒
<input type="checkbox" name="hobby" value="firehead"> 烫头 <br>
生日: <input type="date" name="birth"> <br>
上传文件: <input type="file" name="tx"> <br>
<input type="hidden" name="id" value="xx">
<input type="submit" value="我是提交"> <!--如下3行不需要提交，所以没有name属性-->
<input type="image" src="../img/btn.jpg"> <br><br>
<input type="reset">
</form>
</body>
</html>
1.12 select和textarea标签：< form >下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
select 标签 (下拉框)
1. name 属性 必须，和input标签name属性一样
2. 没有value
子标签: option 选项
1. value属性 必须
2. 默认选中: selected
默认: 下拉框只能选中一个, 所以name=area=value=1,2,3...
了解: multiple : 多选
-->
<!--
textare标签：文本域
1. name 必须
2. value 输入的内容
3. cols : column 列数
4. rows : 行数
-->
<form action="#">
地区:
<select name="area" id="" multiple> <!--内联标签，还是和 地区: 同行-->
<option value="1">安徽</option>
<option value="2" selected>江苏</option>
<option value="3">福建</option>
</select>
<br>
自我介绍: <br>
<textarea name="self" cols="8" rows="5"></textarea>
<br>
<input type="submit">
</form>
</body>
</html>
2.css：选择器
2.1 css三种引入方式：< style >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* CSS: 专业美化网页的： 1. html没有的css有 2. html有也没有css方便 */
h2{
color: blue;
}
span{
font-size: 60px;
}
</style>
</head>
<body>
<!--
需求A: h1标签添加红色
需求B: font设置大小
-->
<h1> <!--h1没有clor属性-->
<font color="red">标题</font>
</h1>
<font size="7">span1</font> <!--代码冗余-->
<font size="7">span2</font>
<font size="7">span3</font>
<!--1111111111111111111111111111111111111111111111111111111如下用css-->
<h2>标题</h2>
<span>span1</span>
<span>span2</span>
<span>span3</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
css三种引入方式：
1. 行内样式 (写在标签行内)
1. 任何标签都有一个style属性(属性值 = css内容)
2. 语法: css属性1:值1 ; css属性2:值2... 作用范围: 只对当前标签
2. 内部样式(写在当前html内部)
1. 在html中添加一个style标签(在内部写css内容)。写在哪里无所谓, 软性规范(head标签里)
2. 语法:
选择器{
css属性1:值1 ;
css属性2:值2...
}
3. 外部样式(css单独一个文件,然后导入某个html)
1. 编写css文件(放css文件夹)：new-stylesheet
里面的内容同上删除style标签
2. 导入
link标签: rel= "stylesheet" 固定值
rel：relationship 关系
href= css文件的位置
static web默认相对路径: 当前文件所在的位置
java中默认相对路径: 当前工程
优先级:
行内 > 内部 = 外部
html被浏览器的加载顺序: 从上之下，下面内容会覆盖上面内容
-->
<link rel="stylesheet" href="../css/my.css">
<style>
span{
color: green;
font-size: 40px;
}
</style>
</head>
<body>
<font color="green" size="4"></font> <!-- 里面没写内容看不到-->
<span style="color: red;font-size: 30px">字体</span> <br> <!-- 行内样式, style作为属性 -->
<span >字体</span> <br>
</body>
</html>
2.2 css三种基本选择器：优先级：id > class > 标签tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
1. id选择器selector
1. 所有的标签都有id属性(值唯一，id值不能为数字，java中标识符以数字开头不行)
2. #id值
2. class选择器
1. 所有的标签都有class属性(值可重复)
2. .class属性值
3. 标签选择器
标签名
-->
<style>
#myid{
color: red;
}
.myclass{
color: green;
}
span{
color: blue;
}
</style>
</head>
<body>
<span >span</span> <br>
<span id="myid" class="myclass">span1</span> <br>
<span class="myclass">span2</span> <br>
<span class="myclass">span2</span> <br>
<span >span3</span> <br>
<span >span3</span> <br>
<span >span3</span> <br>
</body>
</html>
2.3 扩展选择器：层级/并集/属性/伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
需求: 让div下的span变red
层级选择器:
父选择器 子选择器{ .xx类选择器也是子选择器
}
*/
div .xx{
color: red;
}
</style>
</head>
<body>
<div>div</div>
<div>
<span>div下的span</span>
<span class="xx">div下的span xx</span>
<span class="xx">div下的span xx</span>
<span>div下的span</span>
<span>div下的span</span>
</div>
<span class="xx">span</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
需求: span和div都变red
并集选择器:
选择器1,选择器2...{
}
*/
span,div h1{ /*div h1是层级选择器 */
color: red;
}
</style>
</head>
<body>
<span>span</span>
<div>div</div>
<div>
<h1>div下的h1</h1>
</div>
<h1>h1</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
属性选择器：
标签名[属性名] : 选中有某种属性的标签
标签名[属性名="属性值"] : 某种属性=某个特定的值的标签
*/
font[size][face]{
color: red;
}
font[size='3']{
color: green;
}
</style>
</head>
<body>
<font size="1" face="楷体">font1</font>
<font size="3">font3</font>
<font size="5">font5</font>
<font size="3">font3</font>
<font>font</font>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
伪类选择器 : 选中某种状态下的标签
选择器1:状态{
}
超链接的不同状态:
1. 未点击 link: 蓝色
2. 鼠标悬浮 hover: 蓝色
3. 激活 active: 红色
4. 访问过后 visited: 紫色
*/
a:link{ //改变默认的颜色
color: black;
}
a:hover{
color: green;
}
a:active{
color: deeppink;
}
a:visited{
color: grey;
}
</style>
</head>
<body>
<a href="#">超链接</a> <br>
<a href="#">超链接</a> <br> <!--这个超链接点完后，上面超链接也变为紫色了，因为都为# -->
<a href="#1">超链接</a> <br>
<a href="#2">超链接</a> <br>
<a href="#3">超链接</a> <br>
<a href="#4">超链接</a> <br>
<a href="#5">超链接</a> <br>
</body>
</html>
2.4 css属性：背景/文本/字体/边框/浮动/展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* body{
background-color: #a3d1dd;
background-image: url("../img/girl2.jpg");
background-repeat: no-repeat;
background-position: 50px 10px; 背景横着是x轴
}*/
body{
color: green; /*文本属性*/
direction: ltr; /*文本方向*/
line-height: 30px; /*行高*/
letter-spacing: 20px; /*字符间距*/
text-decoration: overline; /* 下划线underline */
text-indent: 2em; /* 首行缩进*/
font-size: 25px; /*字体属性*/
font-family: 楷体; /*相当于html中face属性*/
font-weight: bold; /* 加粗*/
font-style: italic; /* 斜体*/
}
</style>
</head>
<!--11111111111111111111111111111111111111111111111111111111111111111-->
<body>
他找若遂凌云志, 敢笑黄巢不丈夫.
他找若遂凌云志, 敢笑黄巢不丈夫.
他找若遂凌云志, 敢笑黄巢不丈夫.
他找若遂凌云志, 敢笑黄巢不丈夫.
他找若遂凌云志, 敢笑黄巢不丈夫.
他找若遂凌云志, 敢笑黄巢不丈夫.
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
1. 边框: border: 1px green solid; solid : 实线(固体)
2. float : 浮动 clear: 清除浮动效果
*/
div{
border: 1px green solid;
width: 150px;
height: 150px;
float: left;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div style="clear: left">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</body>
</html>
如下7是接着6后面，看浏览器窗口大小，动态调整。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
display : 1. inline : 内联 不换行
2. block : 块级
3. none : 隐藏
*/
div{
display: none; /*将div隐藏*/
}
span{
display: block; /*将span换行*/
}
</style>
</head>
<body>
<div>1</div> <!-- 换行 -->
<div>2</div>
<div>3</div>
<span>span1</span> <!-- 不换行 -->
<span>span2</span>
<span>span3</span>
</body>
</html>
2.5 盒子模型：每个标签都可看成一个盒子，width height border，padding margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
1/2. width/height：指的是内容的宽高(边框里面: 内容 + 内间距)
3. border : 边框，有线宽
4. padding : 内间距 (边框 和 内容之间的距离)
5. margin : 外间距 (当前标签与其他标签的距离)
*/
div{
border: 1px green solid;
width: 100px;
height:100px;
padding: 10px;
padding-left: 20px;
margin: 30px;
}
</style>
</head>
<body>
<div>div</div>
</body>
</html>
2.6 注册案例：中间 < div > < form >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
big的内容: 750px(包含3个小div)
2个side的div大小= 200 * 2 + 4 = 404
1个middle的div大小= 750-404-2 = 344
*/
#big{
border: 1px red solid;
height: 450px;
width: 750px;
margin: auto;
}
.side{
border: 1px green dashed;
width: 200px;
height: 450px;
float: left; /* 流式布局 */
}
#middle{
border: 1px blue dashed;
float: left;
height: 450px;
width: 344px;
}
</style>
</head>
<body>
<div id="big">
<div class="side">1</div>
<div id="middle">2</div>
<div class="side">3</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#big{
border: 10px lightgrey solid;
height: 450px;
width: 750px;
margin: auto;
}
.side{
width: 200px;
height: 450px;
float: left;
}
#middle{
float: left;
height: 450px;
width: 344px;
}
</style>
</head>
<body>
<div id="big"> <!--最外面-->
<div class="side">
<span style="color: orange;font-size: 20px;margin: 30px">新用户注册</span> <br>
<span style="color: grey;font-size: 20px">USER REGISTER</span> <br>
</div>
<div id="middle">
<form action="#"> <!--4行3列的表-->
<table>
<tr>
<td>用户名</td> <!--第一列-->
<td colspan="2"> <!--跨两列-->
<input type="text" placeholder="请输入账号" size="30" style="border-radius: 5px">
</td>
</tr>
<tr>
<td>密码</td>
<td colspan="2">
<input type="password" placeholder="请输入密码">
</td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text">
</td>
<td>
<img src="../img/btn.jpg" alt="">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit">
</td>
<td></td>
</tr>
</table>
</form>
</div>
<div class="side">
已有账号?
<a href="#" style="color: hotpink;text-decoration: none">立即登录</a>
</div>
</div>
</body>
</html>
2.7 css的优先级：id>class>tag
div下面p标签，同时p标签需具有class是cp1且id是p1。如下第二行蓝色比第一行蓝色优先级高。
3.js：Bom，Dom
3.1 js两种引入：js最终要引入到html在浏览器中运行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
JavaScript 作用: 主要是 与用户进行交互
1. java : 网景 (liveScript) <-> 微软 (浏览器 IE) 付费
2. script 脚本 (文本保存, 往往直接 解释运行,不需要编译)
-->
<script>
function method01() {
var result = confirm("你满18岁了吗?")
}
</script>
</head>
<body>
<form action="#">
<input type="text" name="user" placeholder="请输入用户名"> <br>
<input type="submit">
</form>
<hr>
<input type="button" value="按钮:跳转" onclick="method01()" >
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
1. 内部
1. 在html中编写一个script标签
a. head标签中 (阅读性好)
b. body标签之后 (比较方便)
2. 然后内部写js代码
2. 外部
1. 在外部编写一个js文件(js代码)
2. 然后用script标签src属性导入
注意: 1. 一个html中允许多个script标签(从上到下)
2. 一个script标签只允许做一件事(要么写,要么导)
-->
<script>
document.writeln("hello"); //DOM : 在网页中输出
</script>
<script src="../js/my.js">
//中间不能写
</script>
<script>
/*
* 1. 一行代码后面可以不加 ;
* 2. js弱类型语言 (有类型,但是不强调)，所有类型都赋值给var (variable 变量)
* 3. var可写可不写
*/
document.writeln("<br>")
document.writeln("a")
var a = 1; //数字 不用int a =1
// a = "abc" // 字符串
b = 2;
document.writeln(a + b)
var c = 1; //定义: 初次声明并赋值
var c = 2; // 赋值
</script>
</head>
<body>
内容
</body>
</html>
3.2 js五大原始类型：undefined
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* js的类型
* 1. 原始类型: 如下
* 2. 引用类型： a. object
* b. function
* 原始类型：
* 1. number : 数字：整数/小数
* 2. string : 字符串：单引/双引
* 3. boolean：true/false
* 4. null (值)：表示引用类型变量为null
* 5. undefined : 未定义
* 定义: 变量初次声明并赋值
* 未定义: 变量只声明不赋值
* java: int a; //定义
* a = 1; // 赋值
* js : var a = 1; //定义
* var b; //未定义
* 运算符 : 变量的类型 = typeof 变量 。 返回变量类型 像java中instance of
*/
var a = 1.1;
var type = typeof a
document.writeln(a + "->" + type)
document.writeln("<br>")
var a = 'abc'; //赋值
var type = typeof a
document.writeln(a + "->" + type)
document.writeln("<br>")
var a = true;
var type = typeof a
document.writeln(a + "->" + type)
document.writeln("<br>")
var a = null; //任意引用类型继承object
var type = typeof a
document.writeln(a + "->" + type)
document.writeln("<br>")
var b;
var type = typeof b
document.writeln(b + "->" + type)
document.writeln("<br>")
</script>
</head>
<body>
</body>
</html>
3.3 js的运算符和流程控制：js不支持单&和单|性能低
判断用户是否输入内容：java如下，js中直接写if(a)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* 在js中,任意类型的表达式或者变量都可以作为判断条件
* 1. number : 非0为true , 0为false
* 2. string : 非空串为true，空串为false(比较重要)。可以用来判断用户是否输入内容
* 3. null : false
* 4. undefined : false
*/
var a = "用户输入的内容"
if(a){
document.writeln("true") //true
}else{
document.writeln("false")
}
document.writeln("<hr>")
</script>
<script>
var result = 1 > false? "嘻嘻" : 10 //三元运算，java中问号后面必须同类型，js可不同
document.writeln(result) //嘻嘻 ，因为false运算时转为数字0
document.writeln("<hr>")
</script>
<script>
/*
* == : 等等: 只比较字面值, 不比较类型。常用
* === : 恒等：不仅比较字面值, 比较类型。不常用，在js中判断类型意义不大，因为js弱类型。
*/
var a = "200"
var b = 200
document.writeln(a == b) // true //网页输入都是字符串
document.writeln(a === b)// false
document.writeln("<hr>")
</script>
<script>
/*
* 运算规则: 任意类型都可运算
* 以+为例:
* 1. 任意类型+string=string
* 2. 除string之外+ number = number / NaN
* 1. boolean : true=1,false=0
* 2. null : 0
* 3. undefined : NaN(not a number)
*/
// var a = "abc"
// var b = 100
// document.writeln(a + b) // abc100
// var a = "abc"
// var b = true
// document.writeln(a + b) // abctrue
var a = "abc"
var b
document.writeln(a + b) // abcundefined
// var a = 100
// var b = true
// document.writeln(a + b) // 101
// var a = 100
// var b = null
// document.writeln(a + b) // 100
// var a = 100
// var b
// document.writeln(a + b) // NaN
</script>
</head>
<body>
</body>
</html>
3.4 案例_99乘法表：Sources调试
i：1到9。
j：列数=行序号，1到i。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
border-collapse : collapse;
}
</style>
<!--11111111111111111111111111111111111111111如上collapse:折叠：去除表外边框的上和右线-->
<script>
document.writeln("<table border='1px' cellpadding=\"5px\" cellspacing='0px'>")
for (var i = 1; i <= 9; i++) {
document.writeln("<tr>")
for (var j = 1; j <= i; j++) {
document.writeln("<td>")
document.writeln(j + "x" + i + "=" + i * j)
document.writeln("</td>") //这行及以下成对
}
document.writeln("</tr>")
}
document.writeln("</table>")
</script>
</head>
<body>
<!-- <table border="1px" cellpadding="5px" cellspacing="0px">
<tr>
<td></td>
</tr>
</table>
-->
</body>
</html>
Sources 》打断点》右击重新加载 》watch右边点+号 并输入想看的变量 》如下鼠标所指的下一步。
3.5 函数的基本语法：function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* java : public static void main(String[] args){
* 方法体
* }
* 修饰符 返回值类型 方法名(参数列表) {方法体}
*
* js : function 函数名(参数列表){ 函数体}
* 注意点: 1. 参数列表不写var
* 2. 如果有返回值,直接return
* 3. 调用函数时,传入的参数个数不限制
* 4. 函数内部有个默认参数, arguments (本质数组 : 调用此函数传入的所有参数)
*/
function method01() {
console.log("控制台输出")
}
method01()
function method02(a,b) {
// return a + b;
var sum = 0;
for(var i=0;i<arguments.length;i++){
sum += arguments[i]
}
return sum;
}
var result = method02(1) //return a + b;为NaN （因为b undefined） //如上arguments输出为1
var result = method02(1,2,3) //return a + b;为3 //如上arguments输出为6
console.log(result)
</script>
</head>
<body>
</body>
</html>
3.6 函数的两种变量和两种定义：全局/局部变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var a = 1; //全局，外面隐含var c;
function method01() {
var b = 2; //局部
c = 3; // 没有写var为全局变量
document.writeln("内部:" + a)
document.writeln("内部:" + b)
document.writeln("内部:" + c)
}
method01()
document.writeln("外部:" + a)
document.writeln("外部:" + c)
// document.writeln("外部:" + b) //访问不到
</script>
<script>
document.writeln("另一个script:" + a) //可访问到，等价于上面document.writeln("外部:" + a)
</script>
<script>
/*
* 两种定义: 1. 命名函数
* function 函数名(参数列表){
* }
* 2. 匿名函数
* 变量名 = function(参数列表) { }
*/
document.writeln("<hr>")
function method02() {
document.writeln("2")
}
method02()
//如下没有函数名
var m = function (a,b) {
return a + b;
}
var result = m(1,2)
document.writeln(result)
</script>
<script>
function method03(xx) { //xx=匿名函数 ，函数回调(callback)：xx()
xx()
}
method03( function(){document.writeln("哈哈")} ) //最终打印 哈哈
</script>
</head>
<body>
</body>
</html>
3.7 事件的两种注册：js事件驱动语言
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* 事件(event，实现和用户的交互): 发生在html元素上的事：1.用户输入的行为
* 2.浏览器自己的行为
*
* 事件A : onclick (单击事件 : 当用户单击鼠标左键的时候触发)
*
* 事件绑定函数(事件注册)
* 1. 命名注册
* 1. 首先声明一个命名函数
* 2. 每个标签都有事件属性：onclick = "method01()"，当单击事件被触发的时候,method01执行。
* 2. 匿名注册
* 1. 先找到html标签, 生成对象
* 2. 给对象的事件属性 赋值一个匿名函数
*/
function method01() {
console.log("xx")
}
</script>
</head>
<body>
<input type="button" value="命名注册" onclick="method01()"> <br><br>
<input type="button" value="匿名注册" id="myid">
</body>
</html>
<script>
//1. 如下先找到html标签, 生成对象 (id选择器)
var btn = document.getElementById("myid");
//2. 如下给对象的事件属性 赋值一个匿名函数，不用上面的method01()
btn.onclick = function (ev) { // 回调函数 (一个函数是我们定义的,但不是我们调用,但最终还是执行的)
console.log("yy")
}
</script>
3.8 页面加载事件：当浏览器加载完整个html页面时才触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* 问题: 不能给null设置onclick属性
* 原因: 页面加载顺序: 从上至下的
* 解决: 1. script标签写在body标签之后
* 2. script标签写在head标签中 + 页面加载事件
*/
window.onload = function (ev) { //页面加载事件
//1. 先找到html标签, 生成对象 (id选择器)
var btn = document.getElementById("myid");
//2. 给对象的事件属性 赋值一个匿名函数
btn.onclick = function (ev) { // 回调函数 (一个函数是我们定义的,但是不是我们调用,但最终还是执行的)
console.log("yy")
}
}
</script>
</head>
<body>
<input type="button" value="匿名注册" id="myid">
</body>
</html>
3.9 案例_轮播图：每隔一秒换一张图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* 知识预备：只要动态修改html中的东西, 浏览器会自动刷新
* java思路: 0.jpg到4.jpg
* int i = 0;
* while(true){ //死循环
* Thread.sleep(1000); //每隔1秒
* i++;
* img = document.getElementById("myid"); //找到这图
* img.src = "../img/"+ i +".jpg"
* if(i == 4){
* i = -1; //没有跳出循环
* }
* }
*
* js思路: 有多进程(多进程占资源)。 js里没有多线程（多线程不安全） -> 引入BOM
*/
</script>
</head>
<body>
<img src="../img/0.jpg" width="500px" id="myid">
<script>
var i = 0;
function method01() {
i++;
var img = document.getElementById("myid");
img.src = "../img/"+ i +".jpg"
if(i == 4) {
i = -1 //循环回去++又变成0
}
}
window.setInterval(method01,1000)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* BOM: browser Object model 浏览器对象模型。 window : 窗体
* window.setInterval(函数名,时间) 含义: 每隔时间ms 执行一次 函数名，相当于: 死循环+ 暂停
*/
function method01() {
document.writeln("哈")
}
window.setInterval(method01,1000) //这行可以替代Thread.sleep(1000);，因为没有线程。
</script>
</head>
<body>
</body>
</html>
3.10 内置对象_数组/日期/字符串解析/url编码：encodeUri编码，decodeUri解码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* 1. 数组对象
1. 数组在JS中是一个类，通过构造方法创建对象
2. 数组的四种方式
1. new Array() 无参的构造方法，创建一个长度为0的数组
2. new Array(5) 有参的构造方法，指定数组的长度
3. new Array(2,4,10,6,41) 有参的构造方法，指定数组中的每个元素
4. [4,3,20,6] 使用中括号的方式创建数组
java数组
int[] array = new int[5]
int[] array = {1,2,3} array = new int[]{1,2,3}
js的数组特点:
1. 数组中的元素类型不需要一致
2. 数组可以自动扩容(只要新增元素就会扩容, 没有越界异常, 没有默认值)
*/
var array = [0,1,"a"]
array[4] = 4; //扩容
document.writeln(array.length) //5
document.writeln("<br>")
for(var i=0; i < array.length; i++){
document.writeln(array[i]) //0 1 a undefined 4
}
</script>
<script>
document.writeln("<hr>")
/*
* 2. 日期对象
1. 作用：Date 对象用于处理日期和时间。
2. 创建 Date 对象的语法: var myDate=new Date()
1. Date 对象会自动把当前日期和时间保存为其初始值。
3. 日期对象的方法
1. getFullYear() 从 Date 对象以四位数字返回年份。
2. getMonth() 从 Date 对象返回月份 (0 ~ 11)。
3. getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
4. getTime() 返回 1970 年 1 月 1 日（Unix）至今的毫秒数。类似于Java中的System.currentTimeMillis()
5. toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。
*/
var myDate = new Date()
document.writeln(myDate) // 系统当前时间
document.writeln("<br>")
document.writeln(myDate.getMonth()) //10月打印出：9
document.writeln("<br>")
document.writeln(myDate.getTime()) //1970年到现在 时间毫秒值
document.writeln("<br>")
document.writeln(myDate.toLocaleString())
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* parseInt() : 从左开始读取到第一个非数字的内容,停止解析, 返回整数
* parseFloat () : 从左开始读取到第一个非数字的内容,停止解析, 返回整数+小数
* isNaN : 如果是NaN(not a number),返回true
*/
var str = "1230.01 px"
// var n = parseInt(str) //1230
var n = parseFloat(str)
document.writeln(n) //1230.01
var a
var b = 1
var c = a + b
document.writeln(isNaN(c)) //true
document.writeln("<br>")
</script>
<script>
/*
* url(uri)编码 : url远程 < uri远程和本地
* word=%E6%9D%AF%E5%AD%90
*
* 前端->服务器(请求): 提交的数据 要经过 url编码
* 编码: 字符 -> 字节
* 杯子 -> %E6%9D%AF%E5%AD%90 （浏览器上网址栏渲染的url中还是杯子）
*
* 服务器接收到 : url解码
* %E6%9D%AF%E5%AD%90 -> 杯子
*/
var word = '杯子'
var result = encodeURI(word)
document.writeln(result) //%E6%9D%AF%E5%AD%90
var re = decodeURI(result)
document.writeln(re) //杯子
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function method01() {
/*
* 1. 获取span的字体大小
* 2. 字体大小 * 2
* 3. 重新赋值给span标签
*/
var span = document.getElementById("myid");
console.log(span.style.fontSize) // 20px
var newSize = parseInt(span.style.fontSize) * 2 // 拿出20数字再* 2
span.style.fontSize = newSize + "px"
}
</script>
</head>
<body>
<input type="button" value="字体放大两倍" onclick="method01()"> <br><br>
<span style="font-size: 20px" id="myid">字体</span>
</body>
</html>
3.11 Bom编程_window对象：编写时可被省略，窗口 (运行环境)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* Bom : browser object model 浏览器对象模型
* 1. window
* 2. history
* 3. location
*
* 三种提示框
* 1. alert(msg) : 警告框, 只有确认按钮
* 2. var result = confirm(msg) : 确认框
* a. 确定 : 返回true
* b. 取消 : 返回false
* 3. var result = prompt(msg,default)
* a. 确定: 返回输入的内容
* b. 取消: 返回null
*
* 两种计时器
* 1. 无限循环
* 返回值 setInterval(method,time,param)
* 每隔time ms 执行一次method(调用method,传入的param)
* 返回值: 就是当前设置的计时器
*
* 2. 单次使用 setTimeout
* 清除计时器
* clearInterval(计时器对象)
* clearTimeout
*/
// window.alert("警方提示: 今晚会下雨~~")
// alert("警方提示: 今晚会下雨2~~")
// var result = confirm("你满18周岁了吗?");
// document.writeln(result) //result返回值由用户选择按钮决定
// var content = prompt("安全问题: 你的女朋友是谁?","高圆圆"); //提示框默认输入高圆圆，可以改
// document.writeln(content)
</script>
<script>
var method01 = function (a) {
// document.writeln(a) //网页输出
console.log(a)
}
var timer = setInterval(method01,1000,"呼") //每1秒打印一次 呼 死循环
// setInterval("method01('嘻')",1000) //效果同上行
// setTimeout(method01,3000,'呵呵') //3秒后就执行一次 呵呵，不会死循环
function method02() {
clearInterval(timer)
}
</script>
</head>
<body>
<input type="button" value="按钮" onclick="method02()">
</body>
</html>
3.12 案例_会动的时钟：innerText (开闭标签之间的内容)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* 1. 先实现 页面初始化效果
* 坑: 页面刚刷新的时候,设置系统当前时间
* 1. 先获取系统事件
* 2. 然后设置到div标签内
*
* 2. 哪些事件驱动什么逻辑 (js)
* 1. 开始按钮被点击: 时间动起来
* 方案A: 每隔1秒,时间+1 (时间进制问题)
* 方案B: 每隔1秒,获取系统当前时间(不自己写)
*
* 2. 暂停按钮被点击: 时间不动了
* 清除计时器
*
* 坑: 连续点击开始按钮, 那么就停不掉了!!!
* 原因: 计时器在一个网页中可以设置多个
* timer = 0x0001
* timer = 0x0002
* 解决: 1. 方案A: 点开始, 先清除timer
* 2. 方案B: 当开始按钮点击的时候,开始按钮 禁用!
* 当暂停按钮点击的时候,开始按钮 启用!
*/
</script>
<script>
window.onload = function (ev) { // <script>写在<body>后就不用这行页面加载事件了
method01()
}
function method01() {
var myDate = new Date();
var time = myDate.toLocaleString();
console.log(time) //获取到了系统当前时间
var div = document.getElementById("mydiv"); //寻找id=mydiv的标签(事先加载好 : 页面加载事件)
div.innerText = time
}
var timer;
function start() { //注意: 命名函数不要写在另外一个函数内部
timer = setInterval(method01,1000) //timer前面不写var，timer是全局变量
var startBtn = document.getElementById("start");
startBtn.disabled = true //禁用开始按钮
}
function pause() {
clearInterval(timer)
var startBtn = document.getElementById("start");
startBtn.disabled = false //启用开始按钮
}
</script>
</head>
<body>
<div id="mydiv" style="color: green;font-size: 30px">
系统当前时间
</div>
<input type="button" value="开始" onclick="start()" id="start">
<input type="button" value="暂停" onclick="pause()">
</body>
</html>
3.13 Bom编程_location对象：地址栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* 1. 重要属性 href (地址栏中的内容,如果被修改,会自动跳转)
* 2. 方法 reload() : 重新加载 / 刷新
*/
function method01() {
location.href = "http://www.baidu.com"
}
function method02() {
location.reload()
}
</script>
</head>
<body>
<input type="button" value="跳转到百度" onclick="method01()"> <br> <!--下行a标签底层就是这行-->
<a href="http://www.baidu.com">超链接:跳转</a>
<hr>
<input type="button" value="重新加载" onclick="method02()">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* 事件: 页面加载
* 逻辑: 倒计时, 时间=0, 跳转
*/
var i = 5;
function method01() {
i--;
var span = document.getElementById("myspan"); //拿到<body>里<span>
span.innerText = i + "秒后回到主页"
if(i == 0){
location.href = "http://www.baidu.com"
}
}
window.onload = function (ev) {
setInterval(method01,1000) //每隔1秒调用method01
}
</script>
</head>
<body>
付款成功!!! <br>
<span id="myspan">5秒后回到主页</span> <a href="http://www.baidu.com">如果没有自动跳转,请点击这个</a>
</body>
</html>
3.14 Bom编程_history对象：历史记录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* 函数: forward()
* back()
* go(index)
*/
function forward() {
// history.forward()
history.go(1) //效果同上行
}
</script>
</head>
<body>
第一页面 <br>
<a href="06_history第二页面.html">点击跳转到二</a><br>
<input type="button" value="前进" onclick="forward()">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function back() {
// history.back()
history.go(-1)
}
</script>
</head>
<body>
第二页面 <br>
<input type="button" value="后退" onclick="back()">
</body>
</html>
3.15 Dom编程_查找节点：document.querySelector(‘video’).playbackRate = 3
Dom作用：在.html文件里找标签，类似java中反射（一个类被加载进内存会自动生成class对象，通过这个class对象获取这个类中任何元素）。如下只有id是唯一的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>根据标签的属性找元素</title>
<script type="text/javascript">
window.onload = function (ev) { //页面加载事件，ev参数是鼠标移动获取坐标
var b2 = document.getElementById("b2");
b2.onclick = function (ev2) {
var array = document.getElementsByTagName("a");
for(var i=0; i < array.length; i++){
array[i].href = "http://www.baidu.com"
}
}
document.getElementById("b3").onclick = function (ev2) {
var array = document.getElementsByName("one")
for(var i=0; i < array.length; i++){
array[i].innerText = "嘻嘻"
}
}
document.getElementById("b4").onclick = function (ev2) {
var array = document.getElementsByClassName("two")
for(var i=0; i < array.length; i++){
array[i].innerText = "嘻嘻2"
}
}
}
</script>
</head>
<body>
<input type="button" value="(通过标签名)给a链接添加地址" id="b2" />
<input type="button" value="(通过name属性)给div设值" id="b3"/>
<input type="button" value="(通过类名)给div设值" id="b4"/>
<hr/>
<a>传智播客</a><br/>
<a>传智播客</a><br/>
<a>传智播客</a><br/>
<hr/>
<div name="one"></div>
<div name="one"></div>
<div name="one"></div>
<hr/>
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
</body>
</html>
3.16 案例_全选全不选：商品选项勾选状态 和 全选的勾选状态一致
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* 1. 先获取全选按钮的勾选状态
* 对象.checked = true/false （勾上为true，没勾上为false）
* 畸形写法的属性 js = boolean。 包括checked/selected/disabled/readonly...
*
* 2. 然后找到所有的商品项，遍历,修改商品项的勾选状态 = 上面的勾选状态
*/
function selectAll() { // 全选/全不选
var all = document.getElementById("all");
console.log(all.checked) // boolean : true /false
var array = document.getElementsByName("item"); //item条目
for(var i=0; i < array.length; i++){
array[i].checked = all.checked
}
}
/*
* 反选： 1. 然后找到所有的商品项
* 2. 遍历,修改商品项的勾选状态 与 自身原状态 相反
*/
function reverseSelect() {
var array = document.getElementsByName("item");
for(var i=0; i < array.length; i++){
array[i].checked = !array[i].checked
}
}
/*
* 结账: 1. 然后找到所有的商品项
* 2. 遍历,如果 checked = true, 计入总账
*/
function total() {
var array = document.getElementsByName("item");
var total = 0; //var total 没有初始值，undefined
for(var i=0; i < array.length; i++){
if(array[i].checked){
total += parseInt(array[i].value) //类型转换，网页获取默认是字符串进行拼接
}
}
alert(total)
}
</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="selectAll()" />全选/全不选
<input type="button" id="reverse" onclick="reverseSelect()" value=" 反 选 "/>
<input type="button" value=" 结 账 " onclick="total()" /> <span id="result"></span>
</body>
</html>
3.17 属性_innerText和innerHTML：追加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* innerText : 内部文本(开闭标签之间的文本内容)
* innerHTML : 内部超文本 (识别标签语法)
*/
window.onload = function (ev) {
var div = document.getElementById("mydiv");
console.log(div.innerText) // 哈哈
// div.innerText = "嘻嘻" // 修改
// div.innerText = div.innerText + "嘻嘻" //如下简化
// div.innerText += "嘻嘻" // 追加
// div.innerText += "<a href='#'>呼呼</a>" //纯文本
div.innerHTML += "<a href='#'>呼呼</a>"
}
</script>
</head>
<body>
<div id="mydiv">
哈哈
</div>
</body>
</html>
3.18 案例_省市级联：0对应bj数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* 省市级联 : 省的选项改变,市的选项也要跟着改变
* 思路:
* 1. 事件 : 省标签的onchange事件
* 1. onclick : 鼠标点击触发
* 2. onchange : 当内容改变的时候触发
*
* 2. 执行逻辑
* 1. 首先得有省对应的市区数据 (事先准备)
* java：map : key="bj" value=bjArray
* js：没有map，把北京索引设为0。 bj : 0 -> bjArray
* 2. 获取省选项的value值, 去cityArray找数据
* 3. 拿到数据之后,遍历添加到 市选项那边
*/
var bj = ["朝阳区","海淀区","石景山区"]
var sh = ["航头区","黑马区","徐汇区"]
var fj = ["福州市","厦门市","莆田市","三明市"]
var js = ["宿迁市","淮安市","徐州市"]
var cityArray = [bj,sh,fj,js] // 二维数组 List<List> : 双重for循环
function selectCity() {
var province = document.getElementById("provinceId");
// console.log(province.value) //0，1，2，3 //不需要找到<option>，找到<select>就行 ，默认选中那个代表当前value值
var array = cityArray[province.value] // 自动转换 // var array = cityArray[parseInt(province.value)]
//如上的array[0,1,2,3]就是第几行的市
var city = document.getElementById("cityId");
city.innerHTML = "<option value=''>‐‐请选择市‐‐</option>" //重置 //坑: 每次重新选择之前,数据要清空
for(var i=0; i< array.length; i++){ //如下 "+array[i]+" 拼接字符串
city.innerHTML += "<option value=''>"+array[i]+"</option>" //超文本追加
}
}
</script>
</head>
<body>
<select id="provinceId" onchange="selectCity()">
<option>‐请选择‐</option>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">福建</option>
<option value="3">江苏</option>
</select>
<select id="cityId">
<option value="">‐‐请选择市‐‐</option>
<!-- <option value="">南京市</option>
<option value="">苏州市</option> -->
</select>
</body>
</html>
3.19 Dom编程_js修改css样式：.className
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.my{
font-size: 40px;
color: green;
}
.your{
font-size: 60px;
color: yellow;
}
</style>
<script>
/*
* 1. 直接修改 -> 行内样式
* a. js中,任何标签对象都有style属性,用于操作css
* b. 语法
* 标签对象.style.css属性
* css属性命名: font-size -> fontSize (小驼峰)(“-”在js中是非法标识符)
*
* 2. 类修改 -> 内部样式
* a. js中,任何标签对象都有className属性,用于操作css
* b. 语法
* 标签对象.className = 类选择器名字
*/
function method01() { //修改行内样式，平级关系可修改
var span1 = document.getElementById("span1");
span1.style.fontSize = "50px" //没改style
span1.style.color = "blue"
}
function method02() { //修改内部样式
var span2 = document.getElementById("span1"); //点击按钮2没效果（下面的改class），因为行内样式优先级高于内部样式
// var span2 = document.getElementById("span2"); //点击按钮2有效果（下面的改class），同是内部样式，后设置覆盖前设置
span2.className = "your" //改class
}
</script>
</head>
<body>
<input type="button" value="按钮1" onclick="method01()">
<input type="button" value="按钮2" onclick="method02()">
<hr>
<span id="span1" style="font-size: 30px;color: red">span</span> <br>
<span id="span2" class="my">span</span> <br> <!--调用my 类选择器 -->
</body>
</html>
如下是按按钮前样式。
3.20 案例_隔行/触摸换色：鼠标移上去时, 当前行改背景色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*
* 隔行换色: 奇偶行的背景色不一样
* 1. 事件: 页面加载
* 2. 逻辑: 1. 找到所有的行
* 2. 遍历,改变背景色
*/
window.onload = function (ev) {
var trs = document.getElementsByTagName("tr");
for(var i=2;i<trs.length; i++){ //i=2，标题行不算
if(i % 2 == 1){ //奇数行，行数和下标不一样
trs[i].style.backgroundColor = "green"
}
}
}
</script>
<script>
/*
* 触摸换色
* 1. 事件:
* 鼠标移上去 onmouseover
* 鼠标移出去 onmouseout
* 2. 逻辑:
* 1. 找到所有的行
* 2. 遍历,注册事件
*/
window.onload = function (ev) {
var trs = document.getElementsByTagName("tr");
for(var i=2;i<trs.length; i++){
//左边 : 属性 右边:回调函数
trs[i].onmouseover = function (ev2) {
/*
* 期望: 触摸哪一行,i就应该是哪一行的索引
* 结果: 无论哪一行, i = 6
* 解释: 左边是在页面加载结束时运行
* 右边的回调函数是在用户鼠标移上去时执行(不确定)，晚于左边
*
* 左边运行结束: i=6 ，右边一定是在左边运行结束时 才有可能运行，用this解决
*/
// console.log(i)
// trs[i].style.backgroundColor = "yellow" //无效果
this.style.backgroundColor = "yellow"
}
trs[i].onmouseout = function (ev2) {
this.style.backgroundColor = "white"
}
}
}
</script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center" >
<tr> <!--6行6组tr-->
<td colspan="5"><input type="button" value="添加"/> <input type="button" value="删除"></td>
</tr>
<tr style="background-color: #999999;">
<th><input type="checkbox"></th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
</body>
</html>
3.21 js中的正则表达式：regular expression (regex) 具有某种特定规律的表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* 在java中, 正则表达式就是个字符串 (完全匹配：abc只能abc，abca包含abc不行)
* 在js中,正则是 类 (模糊匹配)
*
* 正则对象的 两种创建方式
1. 正则表达式是JS中是一个类：RegExp = Regular Expression 正则表达式
var reg = new RegExp("正则表达式");
2. 以/开头，以/结尾，中间的部分就是正则表达式
var reg = /正则表达式/匹配模式; （匹配模式 i = ignore case 忽略大小写）
*/
var reg = new RegExp("abc") //字符串只有包含abc,返回true
var reg = /abc/ //上行的简写 //包含就行
var reg = /^abc/ //异或(数字6上) : 以什么开头
var reg = /abc$/ //$ : 以什么结尾
var reg = /^abc$/ //完全匹配
var reg = /^(abc)+$/i //abc一个或多个，忽略大小写
var str = "abcabcABC"
var result = reg.test(str); //上面reg规则应用
document.write(result)
</script>
</head>
<body>
</body>
</html>
3.22 案例_表单校验：result = false
手机号：/^ $/ 完全匹配，第二位3到8中选一个，\d是0-9选一个（出现9次）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证注册页面</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-size: 12px;
line-height: 20px;
}
.main {
width: 525px;
margin-left: auto;
margin-right: auto;
}
.hr_1 {
font-size: 14px;
font-weight: bold;
color: #3275c3;
height: 35px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #3275c3;
vertical-align: bottom;
padding-left: 12px;
}
.left {
text-align: right;
width: 80px;
height: 25px;
padding-right: 5px;
}
.center {
width: 280px;
}
.in {
width: 130px;
height: 16px;
border: solid 1px #79abea;
}
.red {
color: #cc0000;
font-weight: bold;
}
div {
color: #F00;
}
</style>
<script type="text/javascript">
/*
* 1. 事件
* a. 光标离开当前输入框触发: onblur
* b. onsubmit : 表单提交(submit按钮被点击)的时候触发
* return true : 数据正常提交
* return false : 数据拒绝提交
*/
function myFormCheck() {
/*
* 表单数据校验
* 1. 所有表单项都校验合格 , return true
* 2. 如果有一项错误, return false
* TODO:
*/
var result = true
var user = document.getElementById("user");
if(user.value.length < 3 || user.value.length > 5){
// alert("用户名必须在3~5长度之间") //弹窗提示
document.getElementById("userspan").innerText = "用户名必须在3~5长度之间"
result = false; //不能用return false
}
var pwd = document.getElementById("pwd");
if(pwd.value.length < 3){
document.getElementById("pwdspan").innerText = "密码必须3位或以上"
result = false;
}
var repwd = document.getElementById("repwd");
if(repwd.value != pwd.value){ //字符串比较用==就行，不要用equal。==就是字面值一致返回true。
document.getElementById("repwdspan").innerText = "确认密码必须一致"
result = false;
}
var email = document.getElementById("email");
var regex = /^([a-zA-Z\d])(\w|\-)+@[a-zA-Z\d]+\.[a-zA-Z]{2,4}$/
if(!regex.test(email.value)){
document.getElementById("emailspan").innerText = "邮箱地址必须字母开头(字母数字和下划线+@+地址.com/cn)"
result = false;
}
return result; //最后才return，下面不执行
}
</script>
</head>
<body>
<form action="http://www.baidu.com" method="get" id="myform" onsubmit="return myFormCheck()">
<table class="main" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="img/logo.jpg" alt="logo"/><img src="img/banner.jpg" alt="banner"/></td>
</tr>
<tr>
<td class="hr_1">新用户注册</td>
</tr>
<tr>
<td style="height:10px;"></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<!-- TODO: 将要做，相当于书签方便查看
不能为空， 输入长度必须介于 3 和 5 之间 -->
<td class="left">用户名：</td>
<td class="center">
<input id="user" name="user" type="text" class="in"/>
<span style="color: red" id="userspan"></span>
</td>
</tr>
<tr>
<!-- 不能为空， 输入长度大于6个字符 -->
<td class="left">密码：</td>
<td class="center">
<input id="pwd" name="pwd" type="password" class="in"/>
<span style="color: red" id="pwdspan"></span>
</td>
</tr>
<tr>
<!-- 不能为空， 与密码相同 -->
<td class="left">确认密码：</td>
<td class="center">
<input id="repwd" name="repwd" type="password" class="in"/>
<span style="color: red" id="repwdspan"></span>
</td>
</tr>
<tr>
<!-- 不能为空， 邮箱格式要正确 -->
<td class="left">电子邮箱：</td>
<td class="center">
<input id="email" name="email" type="text" class="in"/>
<span style="color: red" id="emailspan"></span>
</td>
</tr>
<tr>
<!-- 不能为空， 使用正则表达式自定义校验规则,1开头，11位全是数字 -->
<td class="left">手机号码：</td>
<td class="center">
<input id="mobile" name="mobile" type="text" class="in"/>
</td>
</tr>
<tr>
<!-- 不能为空， 要正确的日期格式 -->
<td class="left">生日：</td>
<td class="center">
<input id="birth" name="birth" type="text" class="in"/>
</td>
</tr>
<tr>
<td class="left"> </td>
<td class="center">
<input name="" type="image" src="img/register.jpg"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
