文章目录
- 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：选择器
- 2.1 css三种引入方式：< style >
- 2.2 css三种基本选择器：优先级：id > class > 标签tag
- 2.3 扩展选择器：层级/并集/属性/伪类
- 2.4 css属性：背景/文本/字体/边框/浮动/展示
- 2.5 盒子模型：每个标签都可看成一个盒子，width height border，padding margin
- 2.6 注册案例：中间 < div > < form >
- 2.7 css的优先级：id>class>tag
- 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.0H5 : html 5.0 : html5.0 + css3.0 + jsHtml基础结构1. 根标签 : 必须名为html2. head标签 : 头部元标签: 编码utf-8title: 网页的标题,显示在标签栏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 fhd2. color 颜色1. 单词2. RGB(red green blue : 光三原色)每个颜色取值(0~255 -> 16进制 00~ff)#ff00003. 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. target1. _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 list1. type属性1. 1 默认使用数字序列2. a,A 使用字母序列3. i,I 罗马数字2. 无序列表（ul li） unordered list1. 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 -> 自动换行: h1div : divide + css 2. 内联标签: inline -> 不会自动换行: aspan + 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选择器selector1. 所有的标签都有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 = 4041个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 adocument.writeln(a + "->" + type) document.writeln("<br>")var a = 'abc'; //赋值var type = typeof adocument.writeln(a + "->" + type)document.writeln("<br>")var a = true;var type = typeof adocument.writeln(a + "->" + type)document.writeln("<br>")var a = null; //任意引用类型继承objectvar type = typeof adocument.writeln(a + "->" + type)document.writeln("<br>")var b;var type = typeof bdocument.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运算时转为数字0document.writeln("<hr>")</script><script>/** == : 等等: 只比较字面值, 不比较类型。常用* === : 恒等：不仅比较字面值, 比较类型。不常用，在js中判断类型意义不大，因为js弱类型。*/var a = "200"var b = 200document.writeln(a == b) // true //网页输入都是字符串document.writeln(a === b)// falsedocument.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) // abctruevar a = "abc"var bdocument.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输出为1var result = method02(1,2,3) //return a + b;为3 //如上arguments输出为6console.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) //5document.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月打印出：9document.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) //1230var n = parseFloat(str)document.writeln(n) //1230.01var avar b = 1var c = a + bdocument.writeln(isNaN(c)) //truedocument.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) // 20pxvar newSize = parseInt(span.style.fontSize) * 2 // 拿出20数字再* 2span.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 没有初始值，undefinedfor(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" //没改stylespan1.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,返回truevar 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 = truevar 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>
