1. ·使用JS完成表格的隔行换色
2. 使用JS完成复选框的全选效果
3. 使用JS完成联动效果
1. 使用JS可以获得指定元素
2. 使用JS可以创建元素
3. 使用JS可以对元素的属性进行操作
4. 使用JS可以对元素的标签进行操作
5. 使用JS可以对指定元素的样式进行操作（获得与修改）
案例4. 使用JS完成注册页面的表单验证（显示提示信息和校验结果）
技术和步骤分析：
使用事件(聚焦事件onfocus和离焦事件onblur),之前使用onsubmit也需要！
使用<span></span>
向页面指定位置写入内容：innerHTML属性(该属性的值存在覆盖现象)
a. 确定事件（给出提示信息使用聚焦事件，给出校验结果信息使用离焦事件），并为其绑定函数
b. 聚焦事件绑定的函数中（获取span给出提示信息）
c. 离焦事件绑定的函数中（获取用户输入的内容进行判断）
d. 如果失败，在span位置给出错误提示信息，如果成功让span内容为空
Html部分代码：
<input type="text" name="name" id="name" size="30px" οnfοcus="showTips('name','用户名必须以字母开头！')" οnblur="check('name','用户名不能为空！')"/> <span id="namespan"></span>
function showTips(id,info){ // 1. 获取span元素，给出提示信息 document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>"; } function check(id,info){ // 2. 获取用户输入权限 var uValue = document.getElementById(id).value; // 3. 在span位置给出错误提示信息 if(uValue==""){ document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>"; }else{ document.getElementById(id+"span").innerHTML=""; } }
案例5. 表格隔行换色
技术和步骤分析：
a. 确定事件（页面加载事件onload）
b. 书写函数，获取元素：获取表格（document.getElementById()）,最终获取表格中tbody内的行数
c. 获取tbody里面的行数（rows.length）
d. JS的遍历（for循环），获取奇数行与偶数行（角标对2取余）
e. 设置不同的背景颜色（.style.backgroundcolor）
window.onload=function(){ // 1. 获取表格 var tblEle = document.getElementById("tbl"); // 2. 获取表格中tbody里面的总行数（length） var len = tblEle.tBodies[0].rows.length; // alen(len); // 3. 对tbody里面的行进行遍历，对奇偶行设置不同的颜色 for(var i=0;i<len;i++){ if(i%2==0){ tblEle.tBodies[0].rows[i].style.backgroundColor="pink"; }else{ tblEle.tBodies[0].rows[i].style.backgroundColor="gold"; } }HTML代码：给table里面添加一个id=“tbl”,在table里面添加新标签<thead></thead>和<tbody></tbody>
案例6. 表格的高亮显示
技术和步骤分析：
a. 第一步：确定事件（onmouseover 和 onmouseout）并分别为其绑定一个函数
b. 第二步：获取鼠标移上去的那行，对其设置背景颜色
function changeColor(id,flag) { if(flag=="over"){ document.getElementById(id).style.backgroundColor="pink"; }else if(flag=="out"){ document.getElementById(id).style.backgroundColor="white"; } }HTML代码：给table里每一行添加onmouseover / onmouseout触发事件
<tr onmouseover="changeColor('tr1','over')" id="tr1" onmouseout="changeColor('tr1','out')">
总结一：事件(onsubmit / onclick / onload / onfocus / onblur /onmouseover / onmouseout )
onfocus/onblur:聚焦离焦事件，用于表单校验的时候比较合适。
onclick/ondblclick:鼠标单击和双击事件
onkeydown/onkeypress：搜索引擎使用较多
onload：页面加载事件，所有的其它操作(匿名方式)都可以放到这个绑定的函数里面去。如果是有名称，那么在html页面中只能写一个。
onmouseover/onmouseout/onmousemove：购物网站商品详情页。
onsubmit：表单提交事件 ，有返回值，控制表单是否提交。
onchange:当用户改变内容的时候使用这个事件(二级联动)
案例7. 使用JS完成全选和全部选操作
技术和步骤分析：
a. 确认事件（onclick）并为其绑定一个函数
b. 书写函数，获取编号前面的复选框，获取其状态：
获取复选框：var checkAllEle = document.getElementById（”id“）
获取复选框的状态：checkAllEle.checked
c. 判断编号前复选框的状态：
如果选中，获取下面所有的复选框，并将其状态置为选中 / 如果未选中，获取下面所欲的复选框，并将其置为未选中；
function checkAll(){ var checkAllEle = document.getElementById("checkAll"); if(checkAllEle.checked==true){ var checkOnes = document.getElementsByName("checkOne"); for(var i = 0;i<checkOnes.length;i++){ checkOnes[i].checked = true; } } else{ var checkOnes = document.getElementsByName("checkOne"); for(var i=0;i<checkOnes.length;i++){ checkOnes[i].checked = false; } } }HTML代码：
全选框：<input type="checkbox" onclick="checkAll()" id="checkAll"/>
单选框：<input type="checkbox" name="checkOne"/>
总结二：javascript的DOM操作
Document:整个html文件都成为一个document文档
Element:所有的标签都是Element元素
Attribute：标签里面的属性
Text：标签中间夹着的内容为text文本
Node:document、element、attribute、text统称为节点node.
Document对象每个载入浏览器的 HTML 文档都会成为 Document 对象。
后面两个方法获取之后需要遍历！
以下两个方法很重要，但是在手册中查不到！
创建文本节点：document.createTextNode()
创建元素节点：document.createElement()
Element对象我们所认知的html页面中所有的标签都是element元素
element.appendChild()
向元素添加新的子节点，作为最后一个子节点。
element.firstChild
返回元素的首个子节点。
element.getAttribute()
返回元素节点的指定属性值。
element.innerHTML
设置或返回元素的内容。
element.insertBefore()
在指定的已有的子节点之前插入新节点。
element.lastChild
返回元素的最后一个子元素。
element.setAttribute()
把指定属性设置或更改为指定值。
element.removeChild()
从元素中移除子节点。
element.replaceChild()
替换元素中的子节点。
Attribute对象我们所认知的html页面中所有标签里面的属性都是attribute
案例8：使用JS完成省市二级联动
技术和步骤分析：createTextNode() / createElement() / appendChild()
a. 确定事件（onchange）并为其绑定一个函数
b. 创建一个二维数组来储存省份和城市
c. 获取用户选择的省份（使用传参的方法this。value），
d. 遍历二位数组中的省份，将遍历的省份与用户选择的省份进行比较， 如果相同，遍历该省份下所有的城市
e. 创建城市文本节点
f. 创建option元素节点
g. 将城市文本节点添加到option元素节点中去
h. 获取第二个下拉列表,并将option元素节点添加进去
i. 每次操作前清空第二个下拉列表的option内容
//1. 创建一个二维数组用于存储省份和城市 var cities = new Array(3); cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市"); cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市"); cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市"); cities[3] = new Array("郑州市","洛阳市","开封市","安阳市"); function changeCity(val){ //7. 获取第二个下拉列表 var cityEle = document.getElementById("city"); //9. 清空第二个下拉列表的option内容 cityEle.options.length = 0; //2. 遍历二维数组中的省份， for(var i=0;i<cities.length;i++){ // 注意，比较的是角标 if(val == i){ //3. 遍历用户选择的省份下的城市 for(var j=0;j<cities[i].length;j++){ //4. 创建城市的文本节点 var textNode = document.createTextNode(cities[i][j]); //5. 创建option元素节点 var opEle = document.createElement("option"); //6. 将城市的文本节点添加到option元素节点 opEle.appendChild(textNode); //8. 将option元素节点添加到第二个下拉列表中去 cityEle.appendChild(opEle); } } } }HTML代码：
<select onchange="changeCity(this.value)"> <option>--请选择--</option> <option value="0">湖北</option> <option value="1">湖南</option> <option value="2">河北</option> <option value="3">河南</option> </select> <select id="city"> </select>
总结三：
1 javascript内置对象
Array对象数组的创建：
数组的特点：
长度可变！数组的长度=最大角标+1
Boolean对象对象创建：
如果value 不写，那么默认创建的结果为false
Date对象getTime()
返回 1970 年 1 月 1 日至今的毫秒数。
解决浏览器缓存问题
Math和number对象与java里面的基本一致。
String对象match()
找到一个或多个正则表达式的匹配。
substr()
从起始索引号提取字符串中指定数目的字符。
substring()
提取字符串中两个指定的索引号之间的字符。
例子：
<script>
var str = "-a-b-c-d-e-f-";
var str1 = str.substr(2,4);//-b-c
//alert(str1);
var str2 = str.substring(2,4);//-b
alert(str2);
</script>
RegExp对象正则表达式对象
test
检索字符串中指定的值。返回 true 或 false。
2 全局函数
全局属性和函数可用于所有内建的 JavaScript 对象
关于编码和解码的一组方法：
<script>
var str = "张三";
//alert(encodeURI(str));//%E5%BC%A0%E4%B8%89
//alert(encodeURIComponent(str));//%E5%BC%A0%E4%B8%89
//alert(decodeURI(encodeURI(str)));//张三
//alert(decodeURIComponent(encodeURIComponent(str)));//张三
var str1 = "http://www.itheima.cn";
//alert(encodeURI(str1));//http://www.itheima.cn
//alert(encodeURIComponent(str1));//http%3A%2F%2Fwww.itheima.cn
//alert(decodeURI(encodeURI(str1)));//http://www.itheima.cn
//alert(decodeURIComponent(encodeURIComponent(str1)));//http://www.itheima.cn
var str2 = "alert('abc')";
//alert(str2);
eval(str2);
</script>
