>
``` 第一部分：技术操作
>
> >
> > 框架标签：<frameset> 属性：cols左右切割 rows上下切割 框架元素：<frame> 属性：src跳转的页面
> > name页面名称
> >
> > 一.使用JS完成注册页面表单提示及校验
> > 1.JS的输出 *document.getElementById("").innerHTML="HTML的代码"； 往innerHTML里面去写代码 innerHTML不是一个方法，他是一个属性
> > *document.write(""); 向文档输出写内容，write是一个方法，有括号 *<span> 默认都在一行
> > 2.JS的事件 *onfocus 获得焦点 *onblur 失去焦点 *onsubmit 提交的时候
> > 3.JS事件的总结 *onload 某个页面或者图片被完成加载 *onclick 鼠标点击某个对象 *onsubmit 提交按钮被点击 *onfocus 元素获得焦点 *onblur 元素失去焦点 *onchange 下拉列表改变事件
> > *ondblclick 双击某个元素的事件 键盘操作事件：
> > *onkeydown 某个键盘的键被按下 *onkeyup 某个键盘的键被松开 *onkeypress 某个键盘的键被按下或按住 鼠标操作事情：
> > *onmousemove 鼠标被移动 *onmouseout 鼠标从某元素移开 *onmouseover 鼠标被移到某元素之上 *onmousedown 某个鼠标按键被按下 *onmouseup 某个鼠标按键被松开
> > 二.使用JS完成后台数据展示的隔行换色的表格
> > 1.使用JS获得表格的行数 *获得到控制的表格元素： *var table = document.getElementById("tabl"); id可以随便取名字 *var len =
> > tabl.rows.length;
> >
> > 三.使用JS完成复选框的全选和全不选的效果
> > 1.DOM的常见的操作 *获得元素 *document.getElementById(); 通过ID获得元素 *document.getElementByName(); 通过name属性获得元素
> > *document.getElementByTagName();通过标签名获得元素 eg：
> > document.getElementsByTagName(“div”) 就是根据div这个标签获得元素 *创建元素
> > *document.createElement(); 创建元素 *document.createTextNode(); 创建文本
> > *添加节点 *element.appendChild(); 在最后添加一个节点
> > *element.insertBefore(); 在某个元素之前插入 *删除节点
> > *element.removeChild(); 删除元素 四.使用JS完成省市联动的效果
> > 1.JS中创建数组 *创建Array对象的语法 *new Array(); *new Array(size); *new Array(element0,element1,...,elementn);
> > 2.JS的内置对象 *JavaScript对象 *JS Array *JS Boolean *JS Date *JS Math *JS Number *JS String
> > 3.JS的全局函数 *顶层函数（全局函数） *parseInt(); 解析一个字符串并返回一个整数 eg：parseInt(“11”); *parseFloat(); 解析一个字符串并返回一个浮点数
> > eg：parseFloat(“32.09”); *编码和解码的方法 *decodeURI(); 解码某个编码的URI
> > *decodeURIComponent(); 解码一个编码的URI组件 *encodeURI(); 把字符串编码为URI
> > *encodeURIComponent(); 把字符串编码为URI组件
> >
> > 第二部分：今日重要内容概述以及步骤分析和相应的代码实现
> >
> > 1.使用JS完成注册页面表单提示及校验 *步骤分析： [1]创建一个html文档 （代码实现第[1]步） [2]在要去校验的文本框上添加事件 （代码实现第[2]步）
> > [3]触发函数 （代码实现第[2]步）
> > [4]在函数中向文本框后的html的区域中写一段提示的内容 （代码实现第[2]步） *代码实现: (以用户名和密码为例)
> > [1]<form action="05案例五：网站首页.html" method="get" onsubmit="return
> > check1()"> [onfocus添加一个事件]
> > <input type="text" name="username" id="username" value="" size="20" maxlength="16"
> > onfocus="tips('username','用户名需要是字母和数字组成！')"/><span
> > id="usernameSpan"></span>
> > <input type="password" name="password" id="password" value="" size="20" maxlength="16" onfocus="tips('password','密码至少六位！')"/><span
> > id="passwordSpan"></span>
> > [2] function tips(id,content){ 【一个id，一个内容】 document.getElementById(id+"Span").innerHTML = "<font
> > color='red'>"+content+"</font>"; span默认是和元素在同一行 }
> > function check1(){ 【如果不写这一步的话，用户名和密码等文本框不写，提交也能成功，所有要有onsubmit=checkForm（），触发函数，所以必须要写这步，文本框全部注册了才能提交】
> > // 判断用户名不能为空: var username =
> > document.getElementById("username").value; if(username == ""){
> > document.getElementById("usernameSpan").innerHTML = "<font color='red'>用户名不能为空！</font>";
> > return false; } var password = document.getElementById("password").value; if(password == ""){
> > document.getElementById("passwordSpan").innerHTML = "<font color='red'>密码不能为空！</font>";
> > return false; } } [3]引入JS文件 （在你所注册的页面引用，印错页面和印错文件都是不行的） <script type="text/javascript" src="../Js/check1.js" ></script>
> >
> > 2.使用JS完成后台数据展示的隔行换色的表格 *步骤分析： [1]创建一个HTML页面：可以使用后台设计页面. [2]确定事件：onload事件. [3]触发一个函数.在这个函数中获得操作的表格. [4]获得表格中的所有的行数.
> > [5]遍历表格的行数. [6]判断是否是奇数行还是偶数行. 【奇数行一个颜色，偶数行一个颜色】 *代码实现:
> > [1]<body onload="changeColor()"> <table id="tab1" border="1"
> > width="80%" align="center"> <thead><!--隔行换色，用thead，把下面的tr改成th-->
> > <tr>
> > <th>分类的ID</th>
> > <th>分类的名称</th>
> > <th>分类的描述</th>
> > <th>操作</th> </tr> </thead>
> > <tbody> <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> </tbody>
> > [2] function changeColor(){
> > // 获得操作的表格的控制权:
> > var tab1 = document.getElementById("tab1");
> > // 获得tbody中的所有的行.
> > var count = tab1.tBodies[0].rows.length; 【 找tbody的表格，thead是表头，不需要换色，只需要表体换色】
> > for(var i = 0;i< count ;i++){
> > if(i % 2 == 0){
> > tab1.tBodies[0].rows[i].style.backgroundColor = "green"; 【tBodies[0 第一个tbody】【因为thead只有一个，而tbody可以有多个】
> > }else{
> > tab1.tBodies[0].rows[i].style.backgroundColor = "gold";
> > }
> > } }
> > [3] 引入JS文件 <script type="text/javascript" src="../Js/changeColor.js" ></script>
> >
> > 3.使用JS完成复选框的全选和全不选的效果 *步骤分析： [1]创建一个HTML页面. [2]确定事件：复选框的单击事件. [3]触发一个函数 [4]在函数中,获得上面的复选框是否被选中. [5]如果选中,下面的所有的复选框都被选中.
> > [6]如果不选中,下面的所有的复选框都不选中. *代码实现 [1] <thead> <tr>
> > <th><input type="checkbox" id="selectAll" onclick="checkAll()"/></th>
> > <th>分类的ID</th>
> > <th>分类的名称</th>
> > <th>分类的描述</th>
> > <th>操作</th> </tr> </thead>
> > <tbody> <tr>
> > <td><input type="checkbox" name="ids"/></td>
> > <td>1</td>
> > <td>手机数码</td>
> > <td>手机数码</td>
> > <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr>
> > <td><input type="checkbox" name="ids"/></td>
> > <td>2</td>
> > <td>电脑办公</td>
> > <td>电脑办公</td>
> > <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr>
> > <td><input type="checkbox" name="ids"/></td>
> > <td>3</td>
> > <td>烟酒糖茶</td>
> > <td>烟酒糖茶</td>
> > <td><a href="">修改</a>|<a href="">删除</a></td> </tr> </tbody>
> > [2] function checkAll(){
> > // 获得上面的复选框
> > var selectAll = document.getElementById("selectAll");
> > // 判断这个复选框是否被选中.
> > var ids = document.getElementsByName("ids");
> > if(selectAll.checked == true){
> > // 上面复选框被选中：获得下面所有的复选框,修改checked属性
> > for(var i = 0 ;i<ids.length;i++){
> > ids[i].checked = true;
> > }
> > }else{
> > // 上面复选框没有被选中：获得下面所有的复选框,修改checked属性
> > for(var i = 0 ;i<ids.length;i++){
> > ids[i].checked = false;
> > }
> > } } [3]引用JS文件 <script type="text/javascript" src="../../js/checkAll.js" ></script>
> > *DOM概述 *什么是DOM DOM：Document Object Model 文档对象模型 将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子.
> >
> > 4.使用JS完成省市联动的效果： [1]<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>案例五-省市联动</title> <!-- 引入js文件 --> <script
> > type="text/javascript" src="../../js/city.js" ></script> </head>
> > <body> <select id="province" name="province"
> > onchange="changeCity(this.value)"> <option
> > value="">--请选择--</option> <option value="0">安徽省</option> <option
> > value="1">内蒙古自治区</option> <option value="2">浙江省</option> <option
> > value="3">北京市</option> </select>
> > <select id="city" name="city"> <option>--请选择--</option> </select> </body> </html>
> >
> > [2] function changeCity(value) {
> > 【value就是0,1,2,3,4,5，是和数组进行匹配的，很有作用】 var arrs = new Array(4); arrs[0]
> > = new Array("合肥市","芜湖市","黄山市","蚌埠市","铜陵市"); arrs[1] = new Array("赤峰市","通辽市","包头市","乌海市","呼和浩特市","鄂尔多斯市"); arrs[2] = new
> > Array("杭州市","义乌市","绍兴市","温州市","嘉兴市"); arrs[3] = new
> > Array("昌平区","海淀区","朝阳区","房山区","丰台区"); //获取city var ctiy =
> > document.getElementById("city"); //将city清空 city.options.length =
> > 1; //遍历数组， for(var i = 0; i < arrs.length; i++) {
> > 【i就是下标（0,1,2,3,4,5）】 【遍历所有的省份】 //如果当前传入的value值和索引一致 if(value
> > == i) { 【说明省市匹配上了】 for(var j = 0; j < arrs[i].length; j++) { 【遍历所有的市】
> > //创建option
> > var opEl = document.createElement("option"); // <option></option> 【得到一个option的元素】
> > //设置文本
> > var textEl = document.createTextNode(arrs[i][j]); 【如果是00，就是合肥市，省对应市】 【有了一个文本内容】
> > //将文本添加到option中`这里写代码片`
> > 引用块内容
> > opEl.appendChild(textEl);
> > //将option添加到city中
> > city.appendChild(opEl); } } } } ```